:root {
  /* Brand */
  --orange: oklch(67% 0.19 45);
  --orange-hot:        oklch(72% 0.20 50);
  --orange-deep:       oklch(58% 0.18 42);
  --orange-text:       var(--orange);
  --orange-text-hover: var(--orange-deep);
  --orange-soft: oklch(94% 0.04 60);

  /* Stage */
  --charcoal: oklch(22% 0.005 260);
  --charcoal-2: oklch(28% 0.008 260);
  --charcoal-3: oklch(35% 0.01 260);

  /* Reading */
  --paper: oklch(97% 0.008 70);
  --paper-2: oklch(94% 0.012 65);
  --border: oklch(88% 0.012 60);
  --surface-white: #ffffff;
  --ink: oklch(22% 0.012 50);
  --ink-soft: oklch(38% 0.012 50);

  /* Text on dark (charcoal) surfaces — 4-stop scale */
  --text-on-dark:    #f4efe9;
  --text-dark-faint: oklch(70% 0.012 60);
  --text-dark-muted: oklch(76% 0.012 60);
  --text-dark-base:  oklch(80% 0.012 60);
  --text-dark-soft:  oklch(85% 0.012 60);

  /* Accents */
  --plum: oklch(45% 0.07 20);
  --blue: oklch(72% 0.06 230);

  /* Interaction roles */
  --button-primary-bg: var(--orange);
  --button-primary-bg-hover: var(--orange-hot);
  --button-primary-text: var(--charcoal);

  /* Typography */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Bitter", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Spacing */
  --section-y: clamp(80px, 9vw, 140px);
  --container: 1240px;

  /* Legacy compat (used by existing site.css patterns) */
  --color-paper: var(--paper);
  --color-ink: var(--ink);
  --color-surface: var(--surface-white);
  --color-line: var(--border);
  --color-brand-800: var(--orange);
  --color-brand-950: var(--orange);
  --radius-card: 6px;
  --font-sans: var(--font-display);
  --font-serif: var(--font-body);
  --wrap: var(--container);
  --space-section: var(--section-y);
}