/* Every color the site uses lives here; components reference roles only. */
:root {
  --color-page: #ffffff;
  --color-mist: #f7f7f2;
  --color-surface: #ffffff;
  --color-ink: #1d1d1b;
  --color-ink-soft: #55534b;
  --color-ink-faint: #7a786f;
  --color-line: #dedcd3;
  --color-line-soft: #ebeae3;

  /* Brand teal, calibrated to #007b82 for WCAG AA text and button contrast. */
  --color-teal: #009199;
  --color-teal-strong: #007b82;
  --color-teal-deep: #005f66;
  --color-teal-mist: #cfe6e4;
  --color-teal-soft: rgba(0, 145, 153, 0.12);
  --color-terra: #cc7859;
  --color-terra-soft: #f4e3db;

  --color-night: #1b2122;
  --color-night-card: #252c2d;
  --color-night-line: rgba(255, 255, 255, 0.12);
  --color-on-dark: #ffffff;
  --color-on-dark-soft: rgba(255, 255, 255, 0.72);

  --color-device: #141716;
  --color-chrome-bar: #eeede8;
  --color-chrome-dot: #d3d1c8;
  --color-grid-line: rgba(29, 29, 27, 0.05);
  --color-grain: rgba(77, 71, 56, 0.55);
  --color-shadow: rgba(20, 24, 24, 0.18);
  --color-wordmark: #16191c;

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-wordmark: "Pally", sans-serif;

  --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: 6.5rem;

  --radius-sm: 12px;
  --radius-card: 20px;
  --radius-panel: 28px;
  --radius-pill: 999px;

  --container: 77.5rem;
  --header-height: 4.25rem;

  --shadow-device: 0 30px 60px -20px var(--color-shadow), 0 12px 24px -12px var(--color-shadow);
  --transition: 200ms ease;
}