/* tokens.css · Reelrun · same token names as Launchroar; the theme lives here. */
:root {
  /* colour: warm near-black page, white type at three strengths, glass surfaces,
     one coral signal colour with teal, amber and a paid green */
  --color-bg: oklch(10.5% 0.006 40);
  --color-bg-2: oklch(14.5% 0.008 40);
  --color-ink: oklch(100% 0 0);
  --color-ink-2: oklch(100% 0 0 / 0.72);
  --color-ink-3: oklch(100% 0 0 / 0.5);
  --color-line: oklch(100% 0 0 / 0.1);
  --color-line-2: oklch(100% 0 0 / 0.18);
  --color-glass: oklch(100% 0 0 / 0.05);
  --color-glass-2: oklch(100% 0 0 / 0.08);
  --color-glass-dark: oklch(0% 0 0 / 0.7);
  --color-pill: oklch(100% 0 0);
  --color-pill-ink: oklch(10.5% 0.006 40);
  --color-card: oklch(18% 0.009 40);
  --color-signal: oklch(71% 0.17 28);
  --color-signal-bg: oklch(71% 0.17 28 / 0.16);
  --color-sky: oklch(79% 0.11 185);
  --color-sky-bg: oklch(79% 0.11 185 / 0.16);
  --color-amber: oklch(80% 0.15 70);
  --color-amber-bg: oklch(80% 0.15 70 / 0.16);
  --color-ok: oklch(78% 0.15 155);
  --color-ok-bg: oklch(78% 0.15 155 / 0.16);
  --color-mark: oklch(71% 0.17 28 / 0.28);
  --color-error: oklch(70% 0.18 25);
  --color-scrim: oklch(0% 0 0 / 0.7);
  --color-shadow: oklch(0% 0 0 / 0.6);
  --color-word: oklch(100% 0 0 / 0.09);

  /* type: Sora throughout */
  --font: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-hero: clamp(2.25rem, 1rem + 4.6vw, 4.5rem);
  --text-h2: clamp(2rem, 1.5rem + 1.9vw, 3rem);
  --text-stat: clamp(2.5rem, 1.9rem + 2.4vw, 4rem);
  --text-h3: 1.25rem;
  --text-lg: 1.125rem;
  --text-md: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --track-display: -0.045em;
  --track-heading: -0.03em;
  --track-label: 0.08em;

  /* space — 4pt scale */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px;
  --space-11: 96px; --space-12: 128px;

  /* shape */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-card: 24px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 360ms;
  --dur-rise: 800ms;

  /* layout */
  --max: 1200px;
  --measure: 36rem;
  --z-nav: 20;
}