/* ==========================================================================
   TOKENS — the single source of truth.

   Every value here resolves through the project design system:
   · Type sizes come from the Tailwind default type scale (12/14/16/18/20/
     24/30/36/48/60/72/96px) and are switched between steps at breakpoints
     rather than interpolated to arbitrary in-between values.
   · Spacing comes from the fixed spacing table only.
   · Radii come from Tailwind's radius values only.
   · Dark backgrounds are limited to the six approved flat colors. No
     background gradients anywhere.
   ========================================================================== */

:root {
  /* ---------- Approved flat background colors ---------- */
  --bg: #000000;
  --surface-warm: #131209; /* warm panel, used for accent surfaces */
  --surface-1: #181818;
  --surface-2: #1f1f1f;
  --surface-3: #272727;
  --surface-4: #313131;

  /* ---------- Text ---------- */
  --fg: #ffffff;
  --fg-soft: #9b9b9b;
  --fg-mute: #6f6f6f;
  --fg-faint: #4f4f4f;

  /* ---------- Accent (text and borders only) — brand violet from logo ---------- */
  --accent: #8b6cff;
  --accent-dim: #5b4599;

  /* ---------- Borders ---------- */
  --line: #272727;
  --line-strong: #313131;

  /* ---------- Type families ---------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  /* ---------- Tailwind type scale ---------- */
  --text-xs: 0.75rem; /* 12 */
  --text-xs-lh: 1rem; /* 16 */
  --text-sm: 0.875rem; /* 14 */
  --text-sm-lh: 1.25rem; /* 20 */
  --text-base: 1rem; /* 16 */
  --text-base-lh: 1.5rem; /* 24 */
  --text-lg: 1.125rem; /* 18 */
  --text-lg-lh: 1.75rem; /* 28 */
  --text-xl: 1.25rem; /* 20 */
  --text-xl-lh: 1.75rem; /* 28 */
  --text-2xl: 1.5rem; /* 24 */
  --text-2xl-lh: 2rem; /* 32 */
  --text-3xl: 1.875rem; /* 30 */
  --text-3xl-lh: 2.25rem; /* 36 */
  --text-4xl: 2.25rem; /* 36 */
  --text-4xl-lh: 2.5rem; /* 40 */
  --text-5xl: 3rem; /* 48 */
  --text-6xl: 3.75rem; /* 60 */
  --text-7xl: 4.5rem; /* 72 */
  --text-8xl: 6rem; /* 96 */

  /* ---------- Semantic type roles (step-swapped per breakpoint) ---------- */
  --type-hero: var(--text-4xl);
  --type-hero-lh: var(--text-4xl-lh);
  --type-h2: var(--text-3xl);
  --type-h2-lh: var(--text-3xl-lh);
  --type-h3: var(--text-2xl);
  --type-h3-lh: var(--text-2xl-lh);
  --type-h4: var(--text-lg);
  --type-h4-lh: var(--text-lg-lh);
  --type-lede: var(--text-lg);
  --type-lede-lh: var(--text-lg-lh);
  --type-reveal: var(--text-4xl);
  --type-reveal-lh: var(--text-4xl-lh);

  /* ---------- Spacing table ---------- */
  --sp-0: 0;
  --sp-25: 2px;
  --sp-50: 4px;
  --sp-75: 8px;
  --sp-100: 12px;
  --sp-200: 16px;
  --sp-300: 24px;
  --sp-400: 32px;
  --sp-500: 40px;
  --sp-600: 48px;
  --sp-700: 64px;
  --sp-800: 80px;
  --sp-900: 96px;

  /* Vertical rhythm between sections — steps, never interpolated */
  --section-y: var(--sp-700);

  /* ---------- Layout ---------- */
  --shell: 1200px;
  --shell-narrow: 800px;
  --measure: 680px; /* hero heading + subheading cap */
  --gutter: var(--sp-300);

  /* ---------- Tailwind radii ---------- */
  --r-sm: 2px;
  --r: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-3xl: 24px;
  --r-full: 9999px;

  /* ---------- Motion — fluid spring curve from the design system ---------- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 300ms;
  --dur: 700ms;
  --dur-slow: 800ms;

  /* ---------- Z layers ---------- */
  --z-nav: 50;
  --z-overlay: 45;

  /* ---------- Nav ---------- */
  --nav-h: 72px;
}

/* Tablet and up. The hero caps at 48px so the heading still breaks into
   readable lines inside the 680px measure instead of one word per line. */
@media (min-width: 768px) {
  :root {
    --type-hero: var(--text-5xl);
    --type-hero-lh: 1;
    --type-h2: var(--text-4xl);
    --type-h2-lh: var(--text-4xl-lh);
    --type-h3: var(--text-2xl);
    --type-h3-lh: var(--text-2xl-lh);
    --type-lede: var(--text-xl);
    --type-lede-lh: var(--text-xl-lh);
    --type-reveal: var(--text-4xl);
    --type-reveal-lh: var(--text-4xl-lh);
    --section-y: var(--sp-800);
    --gutter: var(--sp-400);
  }
}

/* Desktop */
@media (min-width: 1280px) {
  :root {
    --type-h2: var(--text-5xl);
    --type-h2-lh: 1;
    --type-h3: var(--text-3xl);
    --type-h3-lh: var(--text-3xl-lh);
    --type-reveal: var(--text-5xl);
    --type-reveal-lh: 1;
    --section-y: var(--sp-900);
    --gutter: var(--sp-500);
  }
}