/* ============================================================
   tokens.css — design tokens only (see DESIGN.md §2–4)
   No selectors other than :root may live in this file.
   ============================================================ */

:root {
  /* Color (DESIGN.md §2) */
  --color-bg: #0b0b0c;
  --color-surface: #141416;
  --color-line: #26262a;
  --color-text: #eaeae6;
  --color-muted: #8b8b86;
  --color-accent: #cfff3a;
  --color-accent-ink: #0b0b0c;

  /* Typography (DESIGN.md §3) */
  --font-sans: "Archivo", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --type-display: clamp(4rem, 13vw, 11.5rem);
  /* 90% of the max the widest word ("STORYTELLING") allows —
     above ~10.2vw it can no longer fit on one line at narrow widths */
  --type-hero-tagline: clamp(2.25rem, 9.18vw, 9rem);
  --type-h2: clamp(2rem, 4.5vw, 3.5rem);
  --type-h3: clamp(1.25rem, 2vw, 1.625rem);
  --type-body-lg: clamp(1.125rem, 1.6vw, 1.375rem);
  --type-body: 1rem;
  --type-label: 0.75rem;
  --type-label-sm: 0.6875rem;

  --tracking-display: -0.03em;
  --tracking-h2: -0.02em;
  --tracking-label: 0.14em;
  --tracking-label-sm: 0.12em;

  /* Spacing scale, base-4 (DESIGN.md §4) */
  --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: 144px;

  /* Layout frame */
  --max-width: 1440px;
  --page-pad: clamp(20px, 4vw, 56px);
  --grid-gutter: 24px;
  --header-height: 64px;

  /* Motion (DESIGN.md §6) */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 160ms;
  --dur-med: 240ms;

  /* Misc */
  --radius: 2px;
  --hairline: 1px solid var(--color-line);
}