/* ============================================================
   TOKENS — "The Technical Sublime"  (see docs/DESIGN_SYSTEM.md)
   Tri-tonal lighting system + type + spacing + motion.
   ============================================================ */
:root {
  /* ---- BLUEPRINT (home key) ---- */
  --bp-void: #06131F;
  --bp-surface: #0B2136;
  --bp-surface-2: #0E2A44;
  --bp-line: #24506B;
  --bp-line-soft: #17384E;
  --bp-draft: #7FB2C7;
  --bp-ink: #DCEAF0;

  /* ---- VELLUM (relief) ---- */
  --vl-paper: #E4E6E1;
  --vl-paper-2: #DADED8;
  --vl-grid: #C5CCC7;
  --vl-ink: #12212B;
  --vl-ink-soft: #5A6A72;
  --vl-line: #B7C0BC;

  /* ---- CARBON (cinematic) ---- */
  --cb-black: #08090B;
  --cb-surface: #0E1013;
  --cb-bone: #E6E9EC;
  --cb-bone-soft: #99A2A8;
  --cb-line: #23282D;

  /* ---- ACCENT (rationed) ---- */
  --red: #E4552B;
  --red-deep: #C6431F;
  --cyan-live: #66D9E8;

  /* ---- Fonts ---- */
  --f-display: "Clash Grotesk", "Arial Narrow", system-ui, sans-serif;
  --f-body: "General Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Type scale (fluid) ---- */
  --fs-mega: clamp(2.9rem, 8.6vw, 8.25rem);
  --fs-h1: clamp(2.3rem, 5.4vw, 4.4rem);
  --fs-h2: clamp(1.85rem, 3.8vw, 3rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.7rem);
  --fs-body: clamp(1rem, 1.05vw, 1.16rem);
  --fs-small: 0.9rem;
  --fs-mono: 0.76rem;

  /* ---- Spacing (8-pt) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 160px;

  --maxw: 1280px;
  --sec-pad: clamp(96px, 12vh, 176px);
  --gutter: clamp(20px, 5vw, 64px);

  /* ---- Motion ---- */
  --e-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --e-inout: cubic-bezier(0.65, 0.05, 0.36, 1);
  --t-micro: 150ms;
  --t-base: 260ms;
  --t-slow: 420ms;
}