/* Chalk Labs · Floodlight — ONE dark theme. Single source of truth:
   serve this file at /static/tokens.css and link it from base.html,
   login.html and the SPA's index.html instead of hand-mirroring hexes.
   (Evidence the mirror already drifted: --rule-strong is #69716c in
   tokens.css and #7b837d in base.html today.) */
:root {
  color-scheme: dark;

  /* ── type ─────────────────────────────────────────────── */
  --font-sans: "Figtree", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace;
  --text-xs: 0.75rem;    /* 12px — the floor for any text */
  --text-sm: 0.8125rem;  /* 13px */
  --text-md: 0.9375rem;  /* 15px — body */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);    /* 24 → 32 */
  --text-3xl: clamp(2.25rem, 1.6rem + 2.2vw, 3rem);   /* 36 → 48, hero numbers only */
  --lh-xs: 1rem; --lh-sm: 1.125rem; --lh-md: 1.375rem; --lh-lg: 1.5rem; --lh-xl: 1.875rem;
  --lh-tight: 1.15; --lh-solid: 1;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
  --tracking-caps: 0.06em; --tracking-2xl: -0.02em; --tracking-3xl: -0.03em;
  --numeric: tabular-nums lining-nums;

  /* ── surfaces & lines ─────────────────────────────────── */
  --bg: #0B0E13;
  --surface-1: #12171F;
  --surface-2: #19202A;
  --surface-3: #212935;
  --border-subtle: #2A3340;
  --border: #5E6B7D;
  --border-strong: #8593A6;

  /* ── text ─────────────────────────────────────────────── */
  --text-1: #EEF2F7;
  --text-2: #AEB8C6;
  --text-3: #8B97A8;
  --text-disabled: #5A6576;

  /* ── brand voice: chalk (selection, primary, focus, reference) ── */
  --accent: #F3F0E6;
  --accent-hover: #FFFFFF;
  --on-accent: #0B0E13;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* ── data: sides of a proposition (no valence) ────────── */
  --over: #3D8CE6;
  --over-soft: #13253B;
  --under: #DC6D24;
  --under-soft: #35200F;
  --push: #9AA5B4;
  --model: #C9A0F0;        /* strokes / hollow marks only */
  --model-soft: #241C38;

  /* ── status (always icon + word) ──────────────────────── */
  --ok: #3FC98A;       --ok-soft: #10301F;
  --warn: #F2C14E;     --warn-soft: #342A12;
  --critical: #FF6B6B; --critical-soft: #3A181B;
  --unknown: var(--text-3);
  --gain: var(--ok);   /* realized money, with a printed + */
  --loss: var(--critical); /* realized money, with a printed − */

  /* ── neutral sequential ramp (magnitude, heatmaps) ────── */
  --seq-1: #26303C; --seq-2: #3E4A59; --seq-3: #5F6C7D; --seq-4: #8F9AAA; --seq-5: #D5D9DF;

  /* ── chart roles ──────────────────────────────────────── */
  --chart-surface: var(--surface-1);
  --chart-grid: var(--border-subtle);
  --chart-axis: var(--border-strong);
  --chart-label: var(--text-3);
  --chart-value: var(--text-1);
  --chart-ref: var(--accent);
  --chart-ref-halo: var(--surface-1);
  --chart-bar-min: 8px;
  --chart-bar-max: 28px;
  --chart-label-min-pitch: 24px;
  --hatch-stroke: 1.5px;
  --hatch-gap: 5px;
  /* low-evidence texture; set --hatch-color on the element */
  --hatch: repeating-linear-gradient(135deg, var(--hatch-color, var(--text-2)) 0 var(--hatch-stroke), transparent var(--hatch-stroke) var(--hatch-gap));

  /* ── spacing (4px base) ───────────────────────────────── */
  --space-0-5: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --gutter: clamp(16px, 3vw, 32px);

  /* ── layout ───────────────────────────────────────────── */
  --page-max: 1440px;
  --content-max: 960px;
  --rail-w: 280px;
  --tray-w: 320px;
  --appbar-h: 56px;
  --appbar-h-phone: 52px;
  --tabbar-h: 56px;
  --touch: 44px;

  /* ── radii ────────────────────────────────────────────── */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;

  /* ── elevation ────────────────────────────────────────── */
  --shadow-card: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 1px 2px rgb(0 0 0 / 0.30);
  --shadow-overlay: 0 16px 48px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.06);
  --shadow-sheet: 0 -12px 40px rgb(0 0 0 / 0.50);
  --scrim: rgb(0 0 0 / 0.50);

  /* ── motion ───────────────────────────────────────────── */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 280ms; --dur-chart: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ── z-index ──────────────────────────────────────────── */
  --z-sticky: 20; --z-appbar: 30; --z-tabbar: 30; --z-tray: 35; --z-sheet: 40; --z-popover: 50; --z-tooltip: 60;

  /* ── TRANSITIONAL ALIASES (delete once every call site is triaged).
     They map to the NEUTRAL meaning on purpose: --signal was over bars,
     positive EV, ok status, links and selection at once (117 uses), so it
     falls back to chalk, never to a valenced hue. Over/under call sites
     (.hit-tiles, .gamelog-bar, .strip-bar, .confidence-fill, .preview-bucket,
     .factor-chip, .trend-chip, .spark-delta, charts._side_cls) must be
     re-pointed to --over/--under explicitly. ── */
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-numeric: var(--font-sans);
  --paper: var(--surface-1);
  --paper-raised: var(--surface-2);
  --paper-deep: var(--bg);
  --graphite: var(--bg);
  --graphite-2: var(--surface-2);
  --ink: var(--text-1);
  --ink-muted: var(--text-2);
  --rule: var(--border-subtle);
  --rule-strong: var(--border);
  --signal: var(--accent);
  --signal-soft: var(--surface-2);
  --amber: var(--warn);
  --amber-soft: var(--warn-soft);
  --coral: var(--critical);
  --coral-soft: var(--critical-soft);
  --cobalt: var(--model);
  --cobalt-soft: var(--model-soft);
  --focus: var(--accent);
  --shadow: var(--shadow-overlay);
  --shadow-pop: var(--shadow-overlay);
  --motion-fast: var(--dur-fast);
  --grain: 0;
  --plate-text: var(--text-1);
  --plate-muted: var(--text-2);
  --plate-rule: var(--border-subtle);
}

/* ── reduced motion (both shells) ───────────────────────────────────────
   Every duration token collapses, so a rule written against the tokens
   honours the viewer's setting without its own media query. Shimmer and
   bar growth are switched off where they are declared. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-chart: 0.01ms;
  }
}