/* ============================================================
   Startup Speaks — design tokens
   Monochrome, mirrored: light = black on white,
   dark = white on black. Single crimson accent kept for CTAs.
   Soft rounded corners. No monospace labels.
   ============================================================ */

:root,
[data-theme="light"] {
  /* Light — black on white */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-dim: #ededed;
  --surface-bright: #ffffff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f4f4f4;
  --surface-container: #ededed;
  --surface-container-high: #e4e4e4;
  --surface-container-highest: #dcdcdc;
  --surface-variant: #e4e4e4;
  --surface-stroke: #e0e0e0;
  --text: #0d0d0d;
  --text-secondary: #4a4a4a;
  --text-muted: #6f6f6f;
  --text-variant: #4a4a4a;
  --stat-num: #0d0d0d;
  --accent: #e60000;
  --accent-soft: #c00000;
  --accent-tint: #ffe3df;
  --on-accent: #ffffff;
  --border: #141414;
  --border-subtle: #dcdcdc;
  --inverse-bg: #0d0d0d;
  --inverse-text: #ffffff;
  --nav-bg: rgba(255, 255, 255, 0.9);
  --focus-ring: #0d0d0d;

  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-label: "Hanken Grotesk", system-ui, sans-serif;

  --container-max: 1280px;
  --margin-desktop: 64px;
  --margin-mobile: 16px;
  --gutter: 24px;
  --space-unit: 8px;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --thumb-1: #161616;
  --thumb-2: #1e1e1e;
  --thumb-3: #101010;
}

[data-theme="dark"] {
  /* Dark — white on black (mirrored) */
  --bg: #0d0d0d;
  --surface: #0d0d0d;
  --surface-dim: #0d0d0d;
  --surface-bright: #2a2a2a;
  --surface-container-lowest: #070707;
  --surface-container-low: #151515;
  --surface-container: #1b1b1b;
  --surface-container-high: #242424;
  --surface-container-highest: #2e2e2e;
  --surface-variant: #242424;
  --surface-stroke: #262626;
  --text: #f5f5f5;
  --text-secondary: #b3b3b3;
  --text-muted: #8a8a8a;
  --text-variant: #b3b3b3;
  --stat-num: #f5f5f5;
  --accent: #e60000;
  --accent-soft: #ff5a4d;
  --accent-tint: #3a0f0c;
  --on-accent: #ffffff;
  --border: #ededed;
  --border-subtle: #2b2b2b;
  --inverse-bg: #ffffff;
  --inverse-text: #0d0d0d;
  --nav-bg: rgba(13, 13, 13, 0.9);
  --focus-ring: #ededed;

  --container-max: 1440px;

  --thumb-1: #1c1c1c;
  --thumb-2: #242424;
  --thumb-3: #161616;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d0d;
    --surface: #0d0d0d;
    --surface-dim: #0d0d0d;
    --surface-bright: #2a2a2a;
    --surface-container-lowest: #070707;
    --surface-container-low: #151515;
    --surface-container: #1b1b1b;
    --surface-container-high: #242424;
    --surface-container-highest: #2e2e2e;
    --surface-variant: #242424;
    --surface-stroke: #262626;
    --text: #f5f5f5;
    --text-secondary: #b3b3b3;
    --text-muted: #8a8a8a;
    --text-variant: #b3b3b3;
    --stat-num: #f5f5f5;
    --accent: #e60000;
    --accent-soft: #ff5a4d;
    --accent-tint: #3a0f0c;
    --on-accent: #ffffff;
    --border: #ededed;
    --border-subtle: #2b2b2b;
    --inverse-bg: #ffffff;
    --inverse-text: #0d0d0d;
    --nav-bg: rgba(13, 13, 13, 0.9);
    --focus-ring: #ededed;
    --container-max: 1440px;
    --thumb-1: #1c1c1c;
    --thumb-2: #242424;
    --thumb-3: #161616;
  }
}