/* =========================================================
   SIGNAL — design tokens
   One accent (signal amber), one cool secondary (cyan),
   on a deep slate base. Light mode is "paper map".
   ========================================================= */

:root {
  /* Type */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Fluid type scale (360px → 1440px) */
  --step--2: clamp(0.69rem, 0.67rem + 0.08vw, 0.75rem);
  --step--1: clamp(0.81rem, 0.78rem + 0.12vw, 0.88rem);
  --step-0: clamp(1rem, 0.96rem + 0.19vw, 1.13rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.37vw, 1.45rem);
  --step-2: clamp(1.44rem, 1.29rem + 0.65vw, 1.9rem);
  --step-3: clamp(1.73rem, 1.47rem + 1.11vw, 2.5rem);
  --step-4: clamp(2.07rem, 1.64rem + 1.85vw, 3.33rem);
  --step-5: clamp(2.49rem, 1.8rem + 3.05vw, 4.6rem);

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: clamp(4.5rem, 3rem + 6vw, 8rem);

  /* Shape */
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 18px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 150ms;
  --dur-2: 300ms;
  --dur-3: 600ms;
  --dur-4: 1000ms;
  --sweep-dur: 6s;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --nav-h: 64px;
}

/* ---------- Dark (default) ---------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0f14;
  --bg-raised: #0f151c;
  --surface: #131b25;
  --surface-2: #1a2430;
  --line: #222e3c;
  --line-strong: #314155;

  --text: #e7edf3;
  --text-muted: #94a3b4; /* 7.4:1 on --bg */
  --text-faint: #7d8b9d; /* 5.5:1 on --bg */

  --accent: #ffb020; /* signal amber: fills, highlights */
  --accent-text: #ffb020; /* amber used as text on --bg (11:1) */
  --accent-ink: #1a1200; /* text on amber fills */
  --accent-soft: rgb(255 176 32 / 0.12);
  --accent-glow: rgb(255 176 32 / 0.45);

  --signal: #3dd6f5; /* cyan secondary */
  --signal-text: #3dd6f5;
  --signal-soft: rgb(61 214 245 / 0.1);

  --live: #3ddc97;
  --live-soft: rgb(61 220 151 / 0.12);
  --alert: #ff6b5e;

  --contour: rgb(61 214 245 / 0.09);
  --contour-strong: rgb(61 214 245 / 0.2);
  --grid: rgb(231 237 243 / 0.035);

  --shadow-card: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 20px 40px -24px rgb(0 0 0 / 0.7);
  --nav-bg: rgb(11 15 20 / 0.72);
}

/* ---------- Light ("paper map") ---------- */
[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f2ec;
  --bg-raised: #faf8f3;
  --surface: #ffffff;
  --surface-2: #ece8de;
  --line: #ddd7ca;
  --line-strong: #c4bcab;

  --text: #0f1720;
  --text-muted: #4b5866; /* 6.6:1 */
  --text-faint: #626b77; /* 4.8:1 */

  --accent: #ffb020;
  --accent-text: #8f5200; /* 5.6:1 on --bg */
  --accent-ink: #1a1200;
  --accent-soft: rgb(255 176 32 / 0.18);
  --accent-glow: rgb(214 138 0 / 0.4);

  --signal: #0a8aa1;
  --signal-text: #0a6e80; /* 5.3:1 */
  --signal-soft: rgb(10 138 161 / 0.1);

  --live: #0f7a4c;
  --live-soft: rgb(15 122 76 / 0.1);
  --alert: #c2321f;

  --contour: rgb(120 96 60 / 0.12);
  --contour-strong: rgb(143 82 0 / 0.22);
  --grid: rgb(15 23 32 / 0.04);

  --shadow-card: 0 1px 0 rgb(255 255 255 / 0.8) inset, 0 18px 36px -24px rgb(60 45 20 / 0.35);
  --nav-bg: rgb(244 242 236 / 0.8);
}