/* ==========================================================================
   Design tokens
   Palette built in OKLCH: deep indigo night, rose -> magenta -> violet arc,
   a single gold accent reserved for the 20/10 mark.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Surface ------------------------------------------------------- */
  --ink-950: oklch(0.098 0.045 284);
  --ink-900: oklch(0.142 0.060 285);
  --ink-850: oklch(0.185 0.072 286);
  --ink-800: oklch(0.225 0.082 288);
  --ink-700: oklch(0.310 0.095 290);
  --ink-600: oklch(0.420 0.105 292);

  /* --- Accents ------------------------------------------------------- */
  --rose-300: oklch(0.860 0.100 352);
  --rose-400: oklch(0.790 0.160 354);
  --rose-500: oklch(0.710 0.220 356);
  --rose-600: oklch(0.630 0.245 358);
  --magenta-500: oklch(0.660 0.260 330);
  --violet-400: oklch(0.750 0.170 302);
  --violet-500: oklch(0.660 0.230 298);
  --gold-400: oklch(0.850 0.130 86);

  /* --- Text ---------------------------------------------------------- */
  --text-strong: oklch(0.980 0.008 320);
  --text: oklch(0.905 0.020 320);
  --text-soft: oklch(0.760 0.035 322);
  --text-faint: oklch(0.620 0.040 322);

  /* --- Glass --------------------------------------------------------- */
  --glass-bg: color-mix(in oklab, var(--ink-700) 34%, transparent);
  --glass-bg-hi: color-mix(in oklab, var(--ink-600) 44%, transparent);
  --glass-line: color-mix(in oklab, var(--rose-300) 20%, transparent);
  --glass-line-hi: color-mix(in oklab, var(--rose-300) 42%, transparent);
  --glass-blur: 22px;

  /* --- Radii --------------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- Spacing: the 1 / 4 / 9 rhythm --------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-9: 36px;
  --s-12: 48px;
  --s-16: 64px;

  /* --- Type ---------------------------------------------------------- */
  --font-sans: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(3rem, 12.6vw, 10.5rem);
  --fs-eyebrow: clamp(0.6875rem, 0.66rem + 0.2vw, 0.8125rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-caption: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  --fs-xs: 0.75rem;

  --lh-display: 0.94;
  --lh-body: 1.75;
  --measure: 62ch;

  --track-display: -0.032em;
  --track-eyebrow: 0.22em;

  /* --- Motion -------------------------------------------------------- */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
  --dur-4: 640ms;

  /* --- Elevation ----------------------------------------------------- */
  --shadow-card: 0 40px 90px -50px oklch(0.04 0.05 288 / 0.95),
                 0 2px 10px -4px oklch(0.04 0.05 288 / 0.6);
  --shadow-tile: 0 22px 44px -22px oklch(0.04 0.05 288 / 0.95);

  /* --- Focus --------------------------------------------------------- */
  --focus-ring: 0 0 0 2px var(--ink-950), 0 0 0 5px color-mix(in oklab, var(--rose-400) 85%, transparent);

  /* --- Title gradient (overridden from config.json at runtime) -------- */
  --title-gradient: linear-gradient(100deg, #ff9ecb 0%, #c77dff 38%, #ff5fa2 62%, #ff9ecb 100%);
  --title-glow: 0.9;
}

@media (max-width: 640px) {
  :root {
    --lh-body: 1.7;
    --measure: 40ch;
  }
}