/* ============================================================================
   Design tokens — "phosphor editorial"

   Extracted verbatim from docs/designs/prototypes/claude-design-attempt-3/
   00-design-system.html, which spec 004 names as the source of truth.

   This file is the ONLY place a colour, font stack or radius is defined.
   Everything downstream references a custom property; a literal colour
   anywhere else is a defect, because the prototype's contrast ratios are a
   property of these exact values and nothing re-derives them.

   Measured against --bg in the prototype:
     --ink    14.9:1     --ink-2   7.8:1
     --ink-3   4.6:1     --green   9.9:1
   --ink-3 clears WCAG AA for normal text (4.5:1) with almost no margin, so it
   is for de-emphasised data, never for anything a customer must read to act.

   oklch throughout rather than hex: the palette is essentially one hue rotated
   through lightness, and a perceptual space keeps those steps evenly spaced.
   ========================================================================= */

:root {
  /* Ground. bg-1 is a panel on bg; bg-2 is raised on bg-1. */
  --bg: oklch(13% .01 165);
  --bg-1: oklch(15.5% .012 165);
  --bg-2: oklch(18.5% .014 165);

  /* Rules. --line separates; --line-2 outlines something interactive. */
  --line: oklch(25% .014 165);
  --line-2: oklch(31% .016 165);

  /* Text, brightest first. */
  --ink: oklch(95% .008 130);
  --ink-2: oklch(73% .014 145);
  --ink-3: oklch(55% .018 150);

  /* The single accent. --green-ink is the only text colour legible on it. */
  --green: oklch(80% .19 152);
  --green-ink: oklch(20% .06 152);
  --green-soft: oklch(80% .19 152 / .1);

  /* Reserved for real states, never decoration: amber is degraded, red is
     failed. A page with no problem on it shows neither colour. */
  --amber: oklch(80% .13 82);
  --amber-soft: oklch(80% .13 82 / .12);
  --red: oklch(68% .19 25);
  --red-soft: oklch(68% .19 25 / .12);

  /* Two faces. Sans carries prose; mono carries every piece of data — hosts,
     ports, counts, reply codes, timestamps. The split is semantic rather than
     decorative: mono marks a value a customer might copy. */
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* Two radii. --r for controls, --r-lg for panels. */
  --r: 6px;
  --r-lg: 12px;
}