/* Design tokens — see DESIGN.md for the rationale behind every value here.
   Breakpoints are documented as a comment (CSS custom properties can't be used
   inside @media conditions): sm 480px · md 768px · lg 1024px · xl 1280px · 2xl 1600px. */

:root {
  /* Type */
  --font-display: 'Archivo Variable', system-ui, sans-serif;
  --font-body: 'Archivo Variable', system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono Variable', ui-monospace, monospace;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --text-3xl: clamp(2.25rem, 1.75rem + 2vw, 3rem);
  --text-hero: clamp(2.75rem, 2rem + 4.5vw, 4.75rem);

  --leading-tight: 1.15;
  --leading-base: 1.6;
  --leading-loose: 1.75;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-48: 12rem;
  --space-section: clamp(3rem, 6vw, 8rem);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;

  /* Prose measure */
  --measure: 68ch;

  /* z-index scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer: 300;
  --z-modal-backdrop: 400;
  --z-modal: 410;
  --z-toast: 500;
  --z-tooltip: 600;
}

/* Dark theme — the default on first visit (no stored preference). */
:root,
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: oklch(0.16 0.02 260);
  --surface: oklch(0.21 0.02 260);
  --surface-2: oklch(0.27 0.02 260);
  --border: oklch(0.33 0.02 260);
  --ink: oklch(0.96 0.01 260);
  --ink-muted: oklch(0.74 0.02 260);
  --accent: oklch(0.72 0.19 40);
  --accent-strong: oklch(0.65 0.21 36);
  --accent-ink: oklch(0.16 0.02 260);
  --danger: oklch(0.62 0.22 25);

  --shadow-sm: none;
  --shadow-md: none;
  --glow-accent: 0 0 0 3px oklch(0.72 0.19 40 / 0.35);
  --body-line-height-bump: 0.06;
}

:root[data-theme='light'] {
  color-scheme: light;

  --bg: oklch(0.985 0.003 260);
  --surface: oklch(0.955 0.004 260);
  --surface-2: oklch(0.91 0.006 260);
  --border: oklch(0.85 0.007 260);
  --ink: oklch(0.2 0.02 260);
  --ink-muted: oklch(0.42 0.02 260);
  --accent: oklch(0.54 0.2 35);
  --accent-strong: oklch(0.47 0.21 32);
  --accent-ink: oklch(0.99 0.004 260);
  --danger: oklch(0.5 0.2 25);

  --shadow-sm: 0 1px 2px oklch(0.2 0.02 260 / 0.06);
  --shadow-md: 0 8px 24px oklch(0.2 0.02 260 / 0.1);
  --glow-accent: 0 0 0 3px oklch(0.54 0.2 35 / 0.3);
  --body-line-height-bump: 0;
}