/*
  Design tokens — single source of truth (Phase 1: COLOUR/SPACING/TYPOGRAPHY/MOTION specs).
  Dark is the design-lead theme (defaults on :root); light overrides under [data-theme='light'].
  Theme switching is a pure attribute swap — no JS re-render (ARCHITECTURE A4).
*/

:root {
  color-scheme: dark;

  /* ---- Surfaces & ink (COLOUR_SYSTEM §2, dark) ---- */
  --surface-0: #0b0e14;
  --surface-1: #11151d;
  --surface-2: #171c26;
  --ink: #e8ecf2;
  --ink-muted: #9aa4b2;
  --ink-faint: #828b98; /* raised to WCAG AA (≥4.5:1) — used for small labels/captions */
  --border: rgba(232, 236, 242, 0.08);
  --border-strong: rgba(232, 236, 242, 0.16);

  /* ---- Accent & functional (status-LED usage only) ---- */
  --accent: #3ecfae;
  --accent-ink: #062a22;
  --amber: #e5a93d;
  --amber-chip-bg: rgba(229, 169, 61, 0.1);
  --danger: #e5606b;

  /* ---- Effects ---- */
  --halo: rgba(62, 207, 174, 0.07); /* single permitted gradient, hero only */
  --dot-grid: rgba(232, 236, 242, 0.05);
  --shadow-card: none; /* dark uses border-strong instead of shadow */
  --shadow-overlay: 0 24px 60px -20px rgba(0, 0, 0, 0.7);

  /* ---- Radius (DESIGN_SYSTEM §3) ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ---- Spacing scale, 8pt base (SPACING_SYSTEM §1) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Type families (TYPOGRAPHY_GUIDE §1) ---- */
  --font-display: 'Space Grotesk Variable', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter Variable', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono Variable', ui-monospace, 'Cascadia Code', monospace;

  /* ---- Type scale (TYPOGRAPHY_GUIDE §2), fluid where responsive ---- */
  --text-display: clamp(2.5rem, 1.8rem + 3.1vw, 3.8125rem); /* 40 → 61 */
  --text-h1: clamp(2.125rem, 1.6rem + 2.3vw, 3.0625rem); /* 34 → 49 */
  --text-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.4375rem); /* 28 → 39 */
  --text-h3: clamp(1.5rem, 1.3rem + 0.9vw, 1.9375rem); /* 24 → 31 */
  --text-h4: 1.25rem; /* 20 */
  --text-body-lg: 1.125rem; /* 18 */
  --text-body: 1rem; /* 16 */
  --text-small: 0.875rem; /* 14 */
  --text-mono-label: 0.75rem; /* 12 */
  --text-mono-meta: 0.8125rem; /* 13 */

  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --tracking-label: 0.08em;
  --measure: 68ch;

  /* ---- Motion (MOTION_GUIDELINES §2) ---- */
  --dur-instant: 80ms;
  --dur-quick: 160ms;
  --dur-standard: 240ms;
  --dur-entrance: 400ms;
  --dur-signature: 700ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Layout ---- */
  --content-max: 1200px;
  --header-h: 72px;
  --header-h-scrolled: 56px;
}

:root[data-theme='light'] {
  color-scheme: light;

  --surface-0: #fafaf8;
  --surface-1: #ffffff;
  --surface-2: #f1f2ef;
  --ink: #171a20;
  --ink-muted: #555e6b;
  --ink-faint: #626b77; /* raised to WCAG AA (≥4.5:1) */
  --border: rgba(23, 26, 32, 0.1);
  --border-strong: rgba(23, 26, 32, 0.2);

  --accent: #0b7a63; /* white text ≥5:1; also passes as link/label on light surfaces */
  --accent-ink: #ffffff;
  --amber: #8a6114;
  --amber-chip-bg: #f5e5c2;
  --danger: #b3323e;

  --halo: rgba(14, 140, 114, 0.06);
  --dot-grid: rgba(23, 26, 32, 0.05);
  --shadow-card: 0 2px 4px rgba(23, 26, 32, 0.06);
  --shadow-overlay: 0 24px 60px -20px rgba(23, 26, 32, 0.25);
}
