/* ============================================================
   Design tokens — Standby "live signal" system (matches usestandby.com)
   Dark, high-tech, high-contrast. Electric-green signal + amber standby,
   mono technical labels, Space Grotesk numerics. Sharp, not soft.
   ============================================================ */
:root {
  /* ---- Canvas & surfaces (near-black, cool tint) — matches usestandby.com ---- */
  --bg: oklch(12.5% 0.012 255);
  --bg-tint: oklch(15% 0.014 255);
  --card: oklch(20% 0.016 250 / 0.62);     /* frosted dark surface */
  --card-solid: oklch(19.5% 0.016 250);
  --card-2: oklch(17% 0.015 250);
  --surface-2: oklch(27% 0.02 250);        /* ring tracks, inset wells */
  --hairline: oklch(100% 0 0 / 0.08);
  --hairline-strong: oklch(100% 0 0 / 0.16);
  --highlight: oklch(100% 0 0 / 0.06);
  --fill-subtle: oklch(100% 0 0 / 0.04);
  --fill: oklch(100% 0 0 / 0.08);

  /* ---- Hero instrument well (center telemetry panel) ---- */
  --well: linear-gradient(180deg, oklch(20.5% 0.018 250), oklch(14.5% 0.014 250));
  --well-edge: oklch(100% 0 0 / 0.1);
  --well-glow: oklch(84% 0.18 152 / 0.16);

  /* ---- Text ---- */
  --text: oklch(97% 0.005 250);
  --text-2: oklch(82% 0.012 250);          /* soft */
  --text-3: oklch(65% 0.014 250);          /* muted */
  --text-4: oklch(52% 0.014 250);          /* faint */

  /* ---- Signal palette (the brand) ---- */
  --accent: oklch(84% 0.18 152);           /* electric "live/closing" green */
  --accent-press: oklch(70% 0.14 152);
  --signal-bright: oklch(90% 0.2 150);
  --blue: oklch(82% 0.13 210);             /* cyan secondary */
  --orange: oklch(83% 0.15 80);            /* amber "standby" */
  --pink: oklch(72% 0.19 28);
  --violet: oklch(72% 0.16 290);
  --warn: oklch(83% 0.15 80);              /* standby amber */
  --danger: oklch(72% 0.19 28);            /* alert red-orange */
  --gold: oklch(83% 0.15 80);

  /* ---- Activity-ring hues ---- */
  --ring-m: oklch(84% 0.18 152);           /* momentum — signal green */
  --ring-c: oklch(83% 0.15 80);            /* combo — amber */
  --ring-x: oklch(82% 0.13 210);           /* call XP — cyan */

  /* ---- Score bands (low → high = alert → standby → signal) ---- */
  --band-low: oklch(72% 0.19 28);
  --band-mid: oklch(83% 0.15 80);
  --band-high: oklch(84% 0.18 152);

  /* ---- Type ---- */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Menlo', monospace;
  --tnum: 'tnum' 1;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: clamp(1.2rem, 0.9rem + 1vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1rem + 1.8vw, 2.2rem);
  --text-mega: clamp(2.6rem, 1.6rem + 3.4vw, 3.6rem);

  /* ---- Spacing ---- */
  --s-1: 0.375rem;
  --s-2: 0.625rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2.25rem;

  /* ---- Radius — Apple-grade: softer & continuous, cards at 16px (matches site) ---- */
  --r-sm: 7px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 16px;
  --r-pill: 999px;

  /* ---- Shadow (deep, layered, dark) ---- */
  --sh-1: 0 1px 2px oklch(0% 0 0 / 0.4);
  --sh-2: 0 8px 24px -8px oklch(0% 0 0 / 0.55), 0 1px 0 var(--highlight) inset;
  --sh-3: 0 24px 60px -16px oklch(0% 0 0 / 0.72);
  --sh-ring-m: 0 6px 22px -6px oklch(84% 0.18 152 / 0.5);     /* signal glow */
  --sh-hero: 0 2px 12px oklch(0% 0 0 / 0.5), 0 28px 64px -22px oklch(0% 0 0 / 0.62), 0 1px 0 var(--highlight) inset;
  --glow-hero: radial-gradient(58% 52% at 50% 36%, var(--well-glow), transparent 72%);

  /* ---- Motion ---- */
  --dur-1: 160ms;
  --dur-2: 300ms;
  --dur-3: 560ms;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tracking-wide: 0.16em;

  --nav-h: 58px;
  color-scheme: dark;
}

/* Explicit dark = same as default (theme toggle stays functional). */
:root[data-theme="dark"] { color-scheme: dark; }

/* ============================================================
   Light variant — a clean light take on the same signal system,
   kept coherent so the toggle never looks broken. Dark is primary.
   ============================================================ */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: oklch(97% 0.004 250);
  --bg-tint: oklch(99% 0.003 250);
  --card: oklch(100% 0 0 / 0.78);
  --card-solid: oklch(100% 0 0);
  --card-2: oklch(97% 0.004 250);
  --surface-2: oklch(91% 0.006 250);
  --hairline: oklch(0% 0 0 / 0.09);
  --hairline-strong: oklch(0% 0 0 / 0.16);
  --highlight: oklch(100% 0 0 / 0.8);
  --fill-subtle: oklch(0% 0 0 / 0.04);
  --fill: oklch(0% 0 0 / 0.07);

  --well: linear-gradient(180deg, oklch(99% 0.002 250), oklch(95.5% 0.005 250));
  --well-edge: oklch(0% 0 0 / 0.09);
  --well-glow: oklch(72% 0.17 152 / 0.14);

  --text: oklch(22% 0.012 250);
  --text-2: oklch(42% 0.012 250);
  --text-3: oklch(56% 0.012 250);
  --text-4: oklch(68% 0.01 250);

  --accent: oklch(62% 0.16 152);
  --accent-press: oklch(55% 0.15 152);
  --blue: oklch(58% 0.16 256);
  --orange: oklch(70% 0.15 70);
  --warn: oklch(72% 0.15 75);
  --danger: oklch(58% 0.21 27);
  --ring-m: oklch(64% 0.17 150);
  --ring-c: oklch(72% 0.15 70);
  --ring-x: oklch(58% 0.17 256);
  --band-low: oklch(60% 0.21 27);
  --band-mid: oklch(72% 0.15 75);
  --band-high: oklch(64% 0.17 150);

  --sh-1: 0 1px 2px oklch(0% 0 0 / 0.06), 0 4px 12px oklch(0% 0 0 / 0.05);
  --sh-2: 0 2px 6px oklch(0% 0 0 / 0.06), 0 14px 34px oklch(0% 0 0 / 0.08);
  --sh-3: 0 8px 18px oklch(0% 0 0 / 0.08), 0 40px 80px oklch(0% 0 0 / 0.16);
  --sh-hero: 0 2px 4px oklch(0% 0 0 / 0.05), 0 20px 50px oklch(0% 0 0 / 0.12), 0 1px 0 var(--highlight) inset;
}