:root {
  --color-ink: #14171c;
  --color-ink-soft: #1e242d;
  --color-surface: #f4f1ec;
  --color-surface-elevated: #fffdf9;
  --color-muted: #5c6672;
  --color-line: #d7d2c8;
  --color-accent: #0b6e99;
  --color-accent-strong: #085576;
  --color-accent-soft: rgba(11, 110, 153, 0.12);
  --color-success: #1f6b4a;
  --color-danger: #8a2f2f;
  --color-placeholder: #8a6d3b;

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  /* Layout grid — one page, three content widths */
  --page-max: 78rem; /* ~1248px */
  --content-max: 57.5rem; /* ~920px */
  --reading-max: 45rem; /* ~720px */
  --page-gutter: clamp(1.25rem, 5vw, 4rem);
  --card-padding: clamp(1.5rem, 3vw, 2.5rem);
  --space-section: clamp(5rem, 10vw, 8rem);
  --numbered-col: 3.5rem;

  /* Compat aliases used across existing CSS */
  --container: var(--page-max);
  --container-narrow: var(--content-max);

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;

  --shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 23, 28, 0.08);

  --transition-fast: 160ms ease;
  --transition: 240ms ease;

  --z-nav: 40;
  --z-overlay: 50;

  --nav-height: 4.25rem;
  --focus-ring: 0 0 0 3px var(--color-accent-soft);
}