/* ---------------------------------------------------------------
   Design tokens — single source of truth. Every color, size, motion
   value used in the site lives here. Components consume these only.
   --------------------------------------------------------------- */
:root {
  /* surfaces */
  --bg: #080711;
  --bg-elev: #0E0D1A;
  --bg-elev-2: #141327;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* text */
  --text-primary: #FFFFFF;
  --text-subhead: #B7B7C2;
  --text-body: #9A9AA6;
  --text-meta: #6E6E78;

  /* accents (mirror the hero gradient) */
  --accent: #7FB0FF;
  --accent-soft: rgba(127, 176, 255, 0.14);
  --neon-blue: #5470FF;
  --neon-purple: #8A6CF0;
  --gold: #FFE08A;
  --pink: #F2A0B4;
  --grad-hero: linear-gradient(180deg, #FFE08A 0%, #FCD2B4 20%, #F2A0B4 40%, #C58BF0 60%, #8A6CF0 80%, #5470FF 100%);
  --grad-text: linear-gradient(90deg, #FFE08A 0%, #F2A0B4 35%, #C58BF0 65%, #5470FF 100%);

  /* light "paper" palette (spotlight section) */
  --paper: #F4F5FA;          /* cool, faintly blue: the dark bg with the lights on */
  --paper-elev: #FFFFFF;
  --ink: #0B0A14;
  --ink-2: #3F3E4A;
  --ink-3: #6E6E78;
  --ink-line: rgba(11, 10, 20, 0.08);
  --accent-lit: #3D5BFF;     /* the neon blue, tuned for light backgrounds */

  /* controls */
  --cta-border: #3A3A4D;
  --cta-border-hover: #5B8CFF;

  /* type */
  --font-display: "Clash Display", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --fs-hero: clamp(52px, 8vw, 96px);
  --fs-h2: clamp(36px, 5vw, 64px);
  --fs-h3: clamp(24px, 2.6vw, 34px);
  --fs-lead: clamp(18px, 1.6vw, 22px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-eyebrow: 13px;
  --track-eyebrow: 0.16em;

  /* layout */
  --side: clamp(24px, 5vw, 72px);
  --max: 1440px;
  --gap: 24px;
  --section-y: clamp(96px, 12vw, 180px);
  --radius: 20px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --nav-h: 76px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;

  /* hero */
  --hero-pin: 200vh;   /* scroll distance the hero stays pinned for */
  --hero-bg: radial-gradient(135% 95% at 66% -14%, #13162a 0%, #0a0a15 46%, var(--bg) 80%);
}
@media (max-width: 760px) {
  :root { --hero-pin: 180vh; --nav-h: 64px; }
}