:root {
  /* Primitive tokens */
  --fd-navy-950: #10313a;
  --fd-navy-800: #1a4650;
  --fd-frost-300: #c9dadd;
  --fd-frost-200: #dce7e8;
  --fd-gold-600: #c5860c;
  --fd-gold-700: #8a5a00;
  --fd-gold-500: #e4a21a;
  --fd-white: #f8f9f6;
  --fd-grey-300: #d6dbd8;
  --fd-grey-600: #66716e;
  --fd-carbon: #17201f;
  --fd-error: #a33a2b;

  --fd-space-1: .25rem;
  --fd-space-2: .5rem;
  --fd-space-3: .75rem;
  --fd-space-4: 1rem;
  --fd-space-5: 1.25rem;
  --fd-space-6: 1.5rem;
  --fd-space-8: 2rem;
  --fd-space-10: 2.5rem;
  --fd-space-12: 3rem;
  --fd-space-16: 4rem;
  --fd-space-20: 5rem;
  --fd-space-24: 6rem;
  --fd-space-28: 7rem;
  --fd-space-32: 8rem;

  --fd-display: "Fjalla One", "Arial Narrow", sans-serif;
  --fd-body: "Atkinson Hyperlegible", Arial, sans-serif;
  --fd-utility: "IBM Plex Mono", monospace;

  /* Semantic tokens */
  --color-bg: var(--fd-white);
  --color-surface: #ffffff;
  --color-text: var(--fd-carbon);
  --color-muted: var(--fd-grey-600);
  --color-brand: var(--fd-navy-950);
  --color-brand-soft: var(--fd-frost-300);
  --color-accent: var(--fd-gold-500);
  --color-accent-active: var(--fd-gold-600);
  --color-accent-text: var(--fd-gold-700);
  --color-border: var(--fd-grey-300);
  --color-border-inverse: rgba(255, 255, 255, .18);
  --color-border-carbon-soft: rgba(23, 32, 31, .28);
  --color-border-brand-soft: rgba(16, 49, 58, .24);
  --color-error: var(--fd-error);
  --page-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --page-max: 86rem;
  --section-space: clamp(4.5rem, 9vw, 8.5rem);
  --home-section-space: clamp(var(--fd-space-20), 7vw, var(--fd-space-28));
  --home-section-gap: clamp(var(--fd-space-10), 4vw, var(--fd-space-16));
  --reading-width: 64ch;

  /* Component tokens */
  --button-height: 3.25rem;
  --button-radius: .35rem;
  --button-bg: var(--color-accent);
  --button-fg: var(--fd-carbon);
  --field-height: 3.35rem;
  --field-border: var(--fd-grey-600);
  --focus-ring: var(--fd-gold-500);
  --header-height: 6.25rem;
}

@media (max-width: 48rem) {
  :root { --header-height: 4.75rem; }
}