:root {
  /* Color */
  --bg-base: #0a0a0a;
  --bg-surface: #1a1412;
  --bg-elevated: #2a2018;
  --text-primary: #f2f2f0;
  --text-secondary: #b3b3af;
  --text-muted: #787872;
  --accent: #c1272d;
  --accent-hover: #d43a3e;
  --border-subtle: #2b2420;
  --border-strong: #4a3f35;
  --invert-bg: #f2f2f0;
  --invert-text: #0a0a0a;

  /* Type */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-display: clamp(2.75rem, 6vw, 5rem);
  --text-h1: clamp(2rem, 4vw, 3.5rem);
  --text-h2: clamp(1.75rem, 3vw, 2.625rem);
  --text-h3: clamp(1.5rem, 2.5vw, 2rem);
  --text-h4: 1.5rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --content-max: 1200px;
  --section-pad-y: clamp(4rem, 8vw, 6rem);
  --header-h: 96px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --shadow-elevated: 0 24px 48px -12px oklch(0 0 0 / 0.5);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
}