/* Hallmark · genre: editorial · tone: restrained · palette: monochrome by user choice.
   Structural fingerprint: tool workbench followed by a long-form guide.
   Opt-in tokens for data and tool surfaces.
   Apply .crypto-surface on a route wrapper. Does not change :root. */

.crypto-surface {
  --crypto-paper: var(--gp-white, #fff);
  --crypto-ink: var(--gp-ink, #141414);
  --crypto-ink-soft: var(--gp-ink-soft, #3a3a3a);
  --crypto-line: var(--gp-line, #e4e4e4);
  --crypto-line-strong: #888;
  --crypto-control-line: #5c5c5c;
  --crypto-wash: #f2f3f3;
  --crypto-hero: #f2f3f3;
  --crypto-workbench: var(--gp-white, #fff);
  --crypto-focus: var(--gp-ink, #141414);
  --crypto-good: #1f6b43;
  --crypto-bad: #a12622;
  --crypto-serif: var(--gp-serif, "Newsreader", "Iowan Old Style", Georgia, ui-serif, serif);
  --crypto-sans: var(--gp-sans, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
  --crypto-mono: var(--gp-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  --crypto-width: var(--gp-width, 50rem);
  --crypto-space-xs: 0.5rem;
  --crypto-space-sm: 0.75rem;
  --crypto-space-md: 1rem;
  --crypto-space-lg: 1.5rem;
  --crypto-space-xl: 2rem;
  --crypto-space-2xl: 3rem;
  --crypto-space-3xl: 4rem;
  --crypto-control: 3.5rem;
  --crypto-input-text: 1.125rem;

  --color-instrument-paper: var(--crypto-paper);
  --color-instrument-raised: var(--crypto-paper);
  --color-instrument-surface: var(--crypto-wash);
  --color-instrument-surface-strong: var(--crypto-wash);
  --color-instrument-rule: var(--crypto-line);
  --color-instrument-rule-strong: var(--crypto-line-strong);
  --color-instrument-ink: var(--crypto-ink);
  --color-instrument-ink-soft: var(--crypto-ink-soft);
  --color-instrument-ink-muted: var(--crypto-ink-soft);
  --color-instrument-accent: var(--crypto-ink);
  --color-instrument-accent-soft: var(--crypto-wash);
  --color-instrument-active: var(--crypto-wash);
  --color-instrument-active-hover: var(--crypto-wash);
  --color-instrument-source: var(--crypto-ink-soft);
  --color-instrument-good: var(--crypto-good);
  --color-instrument-bad: var(--crypto-bad);

  --bg: var(--crypto-paper);
  --bg-2: var(--crypto-paper);
  --bg-elev: var(--crypto-wash);
  --bg-elev-2: var(--crypto-paper);
  --panel: var(--crypto-paper);
  --panel-2: var(--crypto-wash);
  --border: var(--crypto-line);
  --border-strong: var(--crypto-line-strong);
  --line: var(--crypto-line);
  --line-2: var(--crypto-line-strong);
  --text: var(--crypto-ink);
  --text-muted: var(--crypto-ink-soft);
  --text-dim: var(--crypto-ink-soft);
  --ink: var(--crypto-ink);
  --ink-2: var(--crypto-ink-soft);
  --ink-3: var(--crypto-ink-soft);
  --accent: var(--crypto-ink);
  --accent-2: var(--crypto-ink);
  --accent-soft: var(--crypto-wash);
  --up: var(--crypto-good);
  --good: var(--crypto-good);
  --down: var(--crypto-bad);
  --bad: var(--crypto-bad);
  --color-focus: var(--crypto-focus);
  --color-paper: var(--crypto-paper);
  --color-paper-raised: var(--crypto-paper);
  --color-surface: var(--crypto-wash);
  --color-surface-strong: var(--crypto-wash);
  --color-rule: var(--crypto-line);
  --color-rule-strong: var(--crypto-line-strong);
  --color-ink: var(--crypto-ink);
  --color-ink-soft: var(--crypto-ink-soft);
  --color-ink-muted: var(--crypto-ink-soft);
  --color-accent: var(--crypto-ink);
  --color-accent-soft: var(--crypto-wash);
  --color-source: var(--crypto-ink-soft);
  --control-active-bg: var(--crypto-wash);
  --control-active-bg-hover: var(--crypto-wash);
  --control-active-text: var(--crypto-ink);
  --control-active-border: var(--crypto-ink);
}