:root {
  /* ── PHOSPHOR SLATE ──────────────────────────────────────────────
     The interface is deliberately desaturated. This is a chart-reading
     product, so green and red have to MEAN something: up candle, down
     candle. When the UI was also green, the chart competed with its own
     chrome and the data never stood out. With a neutral interface, the
     candles are the only saturated thing on screen.

     Three semantic channels, kept strictly separate:
       green / red  → market data only (see --chart-up / --chart-down)
       amber        → locked, special and warning states only
       slate        → everything else, i.e. the interface itself

     NOTE ON NAMES: the --green-* tokens keep their historical names
     because they are referenced across ~15 files. They are ROLE names
     now, not colour names:
       --green-primary → brightest UI / active / focus
       --green-dim     → body copy
       --green-dark    → borders and dividers
     Renaming them is optional future cleanup, not required.

     Contrast ratios are measured against --bg-primary. Body text clears
     WCAG AA (4.5:1); borders clear the 2.5:1 the previous green set had. */

  --bg-primary: #0C1116;
  --green-primary: #B8D0E0;   /* 11.9:1 — headings, active state, buttons */
  --green-dim: #8AA5B8;       /*  7.4:1 — body copy */
  --green-dark: #3E5769;      /*  2.5:1 — borders and dividers */
  --amber: #E8A33D;           /*  8.8:1 — locked / special / warning */
  --red-alert: #FF5A5A;
  --white-em: #EDF3F7;
  --locked: #2A3844;

  /* Market data — intentionally NOT part of the UI palette.
     Up/down candles stay green/red under any theme, because that is what
     they mean everywhere. Keep chart code pointing at these. */
  --chart-up: #00FF41;
  --chart-down: #FF2222;

  /* ── BRIEFING MODE ───────────────────────────────────────────────
     Briefings are a different MODE from challenges: you are reading, not
     answering. They get their own accent so the switch between "here is the
     idea" and "now do it" is visible at a glance.

     Teal sits next to slate on the colour wheel, so it harmonises rather than
     fights, and it collides with nothing else: green/red are market data,
     amber is warnings and special states, slate is the interface.

     To try a different mood, change --brief-accent and --brief-text together:
       Amber manual   accent #E8A33D   text #EDDCC0   bg #14100A
       Warm sand      accent #D9B382   text #EAE0D2   bg #14110D
       Indigo         accent #8B9DE8   text #D8DDF2   bg #0E1020            */
  --brief-bg:      #08131A;   /* full-screen overlay behind the panel */
  --brief-panel:   #0B1A22;   /* the briefing card itself */
  --brief-accent:  #4FD1C5;   /* 10.1:1 — headers, borders, buttons */
  --brief-text:    #CFE6E6;   /* 14.4:1 — body copy, tuned for reading */
  --brief-dim:     rgba(79, 209, 197, 0.55);   /* secondary labels */
  --brief-line:    rgba(79, 209, 197, 0.30);   /* borders and rules */
  --brief-faint:   rgba(79, 209, 197, 0.10);   /* subtle fills */
  --brief-wash:    rgba(79, 209, 197, 0.03);   /* barely-there tint */

  /* Derived */
  --bg-card: #141C24;         /* lifted so panels separate from the page */
  --bg-card-hover: #1A242E;
  --border-default: #3E5769;
  --border-active: #B8D0E0;
  --border-locked: #2A3844;
  --text-primary: #B8D0E0;
  --text-secondary: #8AA5B8;
  --text-muted: #7A90A0;      /*  5.7:1 — small print, labels */
  --text-white: #EDF3F7;

  /* Glow — much subtler than the green set. A saturated bloom around
     every element is what made the old theme read as costume; here it is
     reserved for genuine emphasis. */
  --glow-sm: 0 0 4px rgba(184, 208, 224, 0.35);
  --glow-md: 0 0 8px rgba(184, 208, 224, 0.40);
  --glow-lg: 0 0 16px rgba(184, 208, 224, 0.35), 0 0 32px rgba(184, 208, 224, 0.15);
  --glow-amber: 0 0 8px rgba(232, 163, 61, 0.45);
  --glow-red: 0 0 8px rgba(255, 90, 90, 0.45);

  /* Typography */
  --font-display: 'VT323', 'Share Tech Mono', monospace;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  /* Layout */
  --header-height: 56px;
  --max-width: 1280px;
  --border-radius: 0;

  /* Transitions */
  --transition-fast: 80ms linear;
  --transition-base: 150ms linear;
}