:root {
  /* ---- color ---- */
  --bg: #0a0a0b;
  --bg-elev: #121214;
  --surface: #17171b;
  --surface-2: #1e1e24;
  --text: #f4f4f5;
  --text-muted: #a1a1aa;
  --text-dim: #8a8a93;
  --border: #27272a;
  --border-soft: #1f1f23;
  --accent: #ff5436;
  --accent-soft: rgba(255, 84, 54, 0.14);
  --accent-ink: #0a0a0b;
  --focus: #ff7a5c;

  /* ---- typography ---- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Display face for hero captions + section headings. Swap here = swap
     everywhere (one line). Italic pairs with the <em> accents in the copy. */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1: clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.4vw, 4.8rem);
  --step-5: clamp(3.2rem, 2rem + 6vw, 7rem);

  /* ---- space ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* ---- radius / shadow / layout ---- */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 40px rgba(0, 0, 0, 0.5);
  --maxw: 1080px;
  --maxw-prose: 64ch;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}