/* tokens.css: every color, size, space and timing value the site uses.
   Change a value here and it changes everywhere.
   Contrast ratios in the comments are measured against --bg. */

:root {
  color-scheme: dark;

  /* ---------- Color ---------- */
  --bg: #07070A;
  --surface: #0E0E12;        /* cards */
  --surface-2: #16161B;      /* raised cards */
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text: #F5F5F7;           /* 18.5:1 */
  --text-muted: #A1A1AA;     /* 7.9:1, secondary text */
  --text-faint: #8A8A93;     /* 5.9:1, captions and meta only */

  --red: #E52521;            /* brand red: glows, button fills, type 24px and up (4.4:1) */
  --red-text: #FF5A54;       /* small red text (6.6:1) */
  --red-deep: #7A0E0C;       /* gradient depth */
  --on-red: #FFFFFF;         /* white on --red is 4.55:1 */
  --glow: rgba(229, 37, 33, 0.38);
  --glow-soft: rgba(229, 37, 33, 0.16);

  /* ---------- Type ---------- */
  --font-display: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(2.75rem, 6.4vw, 6rem);    /* hero headline, 44 to 96px */
  --fs-h2: clamp(2rem, 4.2vw, 3.75rem);
  --fs-h3: clamp(1.375rem, 2.2vw, 1.875rem);
  --fs-lead: clamp(1.0625rem, 1.3vw, 1.25rem);  /* 17 to 20px */
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --lh-tight: 0.96;
  --lh-snug: 1.15;
  --lh-body: 1.6;
  --track-display: -0.045em;
  --track-tight: -0.025em;
  --track-label: 0.14em;

  /* ---------- Space (8pt grid) ---------- */
  --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: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---------- Shape ---------- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;
  --dur-xslow: 800ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Layout ---------- */
  --container: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 72px;

  /* ---------- Layers ---------- */
  --z-grain: 1;
  --z-content: 2;
  --z-header: 40;
  --z-modal: 100;
}