:root {
  /* Color (mirrors theme.json palette) */
  --ink:   #0A1B2A;
  --bone:  #F5F1EA;
  --brand: #187A7C;
  --sun:   #E8852C;
  --leaf:  #1F6B3A;
  --sky:   #4A6FA8;
  --steel: #5A6770;
  /* Dim bone for secondary copy on ink backgrounds. Avoids opacity-on-text,
     which smears antialiasing. rgba of bone at 0.72 keeps it warm. */
  --bone-dim: rgba(245, 241, 234, 0.72);

  /* Type families */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Figtree', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (fluid clamp values: min, fluid, max) */
  --fs-xs:      0.75rem;
  --fs-sm:      0.875rem;
  --fs-base:    1rem;
  --fs-lg:      clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --fs-xl:      clamp(1.5rem,  1.25rem + 1vw,  1.75rem);
  --fs-2xl:     clamp(2rem,    1.5rem + 2vw,   2.5rem);
  --fs-3xl:     clamp(2.5rem,  2rem + 2.5vw,   4rem);
  --fs-display: clamp(3rem,    2rem + 5vw,     6rem);

  /* Spacing rhythm (8px baseline) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-20: 10rem;
  --section-pad-y: clamp(4rem, 2rem + 8vw, 7.5rem); /* 64px mobile, 120px desktop */
  --section-pad-x: clamp(1rem, 0.5rem + 4vw, 4rem);

  /* Layout */
  --max-content: 680px;
  --max-wide:    1280px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast:   200ms;
  --duration-normal: 600ms;
  --duration-slow:   1200ms;
}