/* Generated by hand from design/tokens.json — keep in sync when tokens change. Dark is primary; light follows the OS. */
:root {
  color-scheme: dark;
  --bg: #0f0e0d;
  --surface: #191715;
  --surface-2: #24211e;
  --line: #332f2a;
  --line-strong: #6f675e;
  --ink: #f3eee7;
  --ink-muted: #a79e93;
  --lamp: #f2b544;
  --lamp-ink: #f2b544;
  --on-lamp: #1e1403;
  --lamp-soft: #3a2b10;
  --signal: #5ad48a;
  --signal-soft: #12301f;
  --danger: #f47a6d;
  --on-danger: #2a0a06;
  --danger-soft: #3a1814;
  --player-bg: #000000;
  --player-ink: #ffffff;
  --scrim: rgba(0, 0, 0, 0.62);
  --focus: #f2b544;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5);

  /* Self-hosted woff2 files come later; until then these fall back to system faces. */
  --font-display: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f5f2ed;
    --surface: #ffffff;
    --surface-2: #eee9e2;
    --line: #ddd5ca;
    --line-strong: #9d9387;
    --ink: #1c1916;
    --ink-muted: #675e55;
    --lamp: #e8a22a;
    --lamp-ink: #8a5200;
    --lamp-soft: #fcefd3;
    --signal: #146d37;
    --signal-soft: #dcf3e4;
    --danger: #b8352a;
    --on-danger: #ffffff;
    --danger-soft: #fbe3df;
    --focus: #8a5200;
    --shadow-pop: 0 12px 32px rgba(40, 28, 10, 0.14);
  }
}

.t-body { font: 400 15px/22px var(--font-sans); }
.t-body-strong { font: 600 15px/22px var(--font-sans); }
.t-small { font: 400 13px/18px var(--font-sans); }
.t-label { font: 600 11px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.t-time { font: 500 13px/18px var(--font-mono); font-variant-numeric: tabular-nums; }
.t-stat { font: 500 28px/32px var(--font-mono); font-variant-numeric: tabular-nums; }