/* Semantic design tokens — the only place colors, font stacks and type sizes may
   appear (ADR 0004, ADR 0009). Components consume these tokens; they never use
   raw values. Paper is the default theme; Console swaps the same tokens under
   [data-theme="console"]. Both themes share one structure. */

:root {
  --font-sans: "Seravek", "Gill Sans", "Gill Sans Nova", "Avenir Next", "Avenir", ubuntu, calibri,
    "Trebuchet MS", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", menlo, consolas, "DejaVu Sans Mono",
    monospace;

  /* The type scale (ADR 0009). One scale for both instruments. */
  --text-micro: 10px; /* eyebrow labels, legends */
  --text-xs: 11px; /* secondary chrome */
  --text-sm: 12px; /* dense UI, meta rows */
  --text-base: 13px; /* body */
  --text-md: 15px; /* section headings */
  --text-lg: 18px; /* page headings */
  --text-xl: 22px; /* display */

  /* Inline machine matter rides its host's step instead of picking one, so code
     in a 12px comment stays smaller than code in a 13px description. */
  --text-inline: 0.92em;

  /* The signed-out marketing surface grows with the viewport, alongside the
     spacing clamps it already uses. */
  --text-section: clamp(22px, 3.5vw, 32px);
  --text-title: clamp(26px, 4vw, 40px);
  --text-hero: clamp(30px, 5.5vw, 52px);

  /* 150ms perceived interaction budget (ADR 0001) */
  --dur-fast: 120ms;
  --dur: 150ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ADR 0001's budget is how soon a gesture must answer, not how long the
     answer may take to arrive, and --ease is tuned for the few pixels a caret
     or a hover moves: its steep out lays down 45% of the travel in the first
     frame and is finished by 100ms, which over that distance is exactly the
     point. A surface crossing the desk on the same pair covers ~370px in that
     first frame and is done in six — past what the eye follows as motion, so
     it lands all at once. Lengthening alone does not fix it: a curve that
     steep just grows an invisible tail (at 260ms it is still 91% done by
     100ms). Distance needs both a longer budget and a curve that keeps moving
     through the middle of it — this one is at 28% by 50ms and 66% by 100ms,
     so the panel is seen crossing rather than arriving. */
  --dur-travel: 260ms;
  --ease-travel: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* How long a round trip may take before it is worth reporting at all. Under
     it, saying "loading" and unsaying it is just a flash; over it, silence
     looks like nothing happened. Delay the state, never the answer. */
  --delay-busy: 250ms;
  --focus: var(--accent);

  /* Enrollment QR: dark-on-light in BOTH themes — a scanner needs the contrast,
     so this plate does not theme. Warm-tinted, never pure #000/#fff. */
  --qr-ink: oklch(22% 0.02 62deg);
  --qr-bg: oklch(97.5% 0.008 88deg);
}

/* Paper: warm paper-and-ink. Declared on both :root (the default) and
   [data-theme="paper"] so a Paper island can nest inside a Console page. */
:root,
[data-theme="paper"] {
  color-scheme: light;

  --font-body: var(--font-sans);
  --surface: oklch(96.5% 0.013 88deg);
  --surface-sunken: oklch(93.5% 0.016 86deg);
  --surface-raised: oklch(90.5% 0.018 84deg);
  --surface-selected: oklch(93% 0.035 55deg);
  --text: oklch(24% 0.021 62deg);
  --text-soft: oklch(42% 0.022 68deg);
  --text-faint: oklch(48% 0.02 72deg);
  --rule: oklch(84% 0.02 82deg);
  --rule-strong: oklch(38% 0.025 62deg);
  --accent: oklch(62% 0.195 42deg);
  --accent-strong: oklch(52% 0.18 40deg);
  --accent-wash: oklch(93% 0.035 55deg);
  --text-on-accent: oklch(96.5% 0.013 88deg);

  /* Agent attribution: outlined machine chip in agent ink */
  --agent-bg: transparent;
  --agent-fg: oklch(38% 0.06 45deg);
  --agent-border: oklch(38% 0.06 45deg);
  --agent-text: oklch(38% 0.06 45deg);
  --lamp-ok: oklch(60% 0.11 140deg);

  /* Modal scrim: warm ink at partial opacity, darkens the desk behind overlays */
  --scrim: oklch(24% 0.021 62deg / 34%);

  /* The user-pickable palette (workflow-state and label colors) */
  --palette-gray: oklch(52% 0.02 80deg);
  --palette-red: oklch(52% 0.14 20deg);
  --palette-orange: oklch(60% 0.16 45deg);
  --palette-amber: oklch(65% 0.14 85deg);
  --palette-green: oklch(60% 0.11 140deg);
  --palette-teal: oklch(58% 0.09 190deg);
  --palette-blue: oklch(55% 0.09 250deg);
  --palette-purple: oklch(58% 0.1 300deg);
}

/* Console: warm phosphor on tinted charcoal, mono-forward. Token swap only —
   no structural differences. */
[data-theme="console"] {
  color-scheme: dark;

  --font-body: var(--font-mono);
  --surface: #171310;
  --surface-sunken: #1c1713;
  --surface-raised: #251e17;
  --surface-selected: #2b2218;
  --text: #e6dcc8;
  --text-soft: #94856d;
  --text-faint: #8f8269;
  --rule: #332a20;
  --rule-strong: #5f5445;
  --accent: #eab470;
  --accent-strong: #e0a458;
  --accent-wash: #2b2218;
  --text-on-accent: #1d150b;

  /* Agent attribution: reverse-video machine tag */
  --agent-bg: #e0a458;
  --agent-fg: #1d150b;
  --agent-border: #e0a458;
  --agent-text: #e0a458;
  --lamp-ok: #a8b268;

  /* Modal scrim: warm near-black at partial opacity */
  --scrim: oklch(9% 0.012 60deg / 60%);

  /* The phosphor palette is deliberately narrow, as in the ancestor prototype */
  --palette-gray: #8f8269;
  --palette-red: #e06c4f;
  --palette-orange: #d88a3f;
  --palette-amber: #eab470;
  --palette-green: #a8b268;
  --palette-teal: #86a394;
  --palette-blue: #7f9aa6;
  --palette-purple: #b494a6;
}