/* ==========================================================================
   THE STUDIO INDEX — Design Tokens
   ========================================================================== */

:root {
  /* Color */
  --bg: #f9f9f9;
  --text: #1a1a1a;
  --muted: #888888;
  --border: #e5e5e5;
  --heart: #fce1e5;

  /* Typography */
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-editorial: 'Jost', 'Futura', sans-serif;

  --text-xs: 0.5625rem;   /* 9px */
  --text-sm: 0.625rem;    /* 10px */
  --text-base: 0.8125rem; /* 13px */
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 3vw, 1.5rem);
  --text-hero: clamp(1.5rem, 4.5vw, 2.25rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */

  --page-pad: clamp(1rem, 4vw, 5%);
  --nav-height: 52px;
  --content-max: 1200px;

  /* Motion */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.7, 0, 0.84, 0);
  --duration-fast: 320ms;
  --duration-slow: 900ms;
  --duration-glacial: 1400ms;
  --reveal-distance: 16px;

  /* Breakpoints (reference) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

html.dark {
  --bg: #121212;
  --text: #e0e0e0;
  --muted: #666666;
  --border: #2a2a2a;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-slow: 0.01ms;
    --duration-glacial: 0.01ms;
  }
}