:root {
  /* Primitive colors */
  --blue-950: #0f1e36;
  --blue-900: #1e3a5f;
  --blue-700: #234e8f;
  --blue-600: #2b5fb8;
  --blue-100: #e9f0fa;
  --gold-500: #c89c6f;
  --gold-700: #8a623a;
  --sand-100: #faf8f5;
  --sand-200: #f4efe4;
  --sand-300: #e8dfc8;
  --neutral-0: #ffffff;
  --neutral-700: #4b5563;
  --neutral-900: #1f2937;
  --green-700: #28724f;
  --amber-800: #7a4b00;
  --red-700: #b42318;

  /* Semantic colors */
  --color-background: var(--sand-100);
  --color-surface: var(--neutral-0);
  --color-surface-elevated: var(--sand-200);
  --color-text: var(--neutral-900);
  --color-text-muted: var(--neutral-700);
  --color-heading: var(--blue-950);
  --color-primary: var(--blue-950);
  --color-primary-hover: var(--blue-900);
  --color-link: var(--blue-950);
  --color-border: var(--sand-300);
  --color-accent: var(--gold-500);
  --color-accent-text: var(--gold-700);
  --color-subtle: var(--blue-100);
  --color-focus: var(--blue-950);
  --color-success: var(--green-700);
  --color-warning: var(--amber-800);
  --color-error: var(--red-700);

  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-h3: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);
  --font-size-h2: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --font-size-h1: clamp(2rem, 1.65rem + 1.5vw, 3rem);
  --line-height-tight: 1.2;
  --line-height-base: 1.65;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --shadow-subtle: 0 0.25rem 1rem rgb(31 41 55 / 8%);
  --site-width: 82rem;
  --editorial-width: 68rem;
  --reading-width: 70ch;
  --wide-media-width: 60rem;
}