:root {
  color-scheme: light;
  --color-primary: #0066cc;
  --color-primary-focus: #0071e3;
  --color-primary-on-dark: #2997ff;
  --color-ink: #1d1d1f;
  --color-ink-muted: #333333;
  --color-body-on-dark: #ffffff;
  --color-muted: #6e6e73;
  --color-subtle: #7a7a7a;
  --color-canvas: #ffffff;
  --color-parchment: #f5f5f7;
  --color-pearl: #fafafc;
  --color-dark: #272729;
  --color-black: #000000;
  --color-hairline: #e0e0e0;
  --color-divider: #f0f0f0;
  --color-error: #b42318;
  --color-error-surface: #fff4f2;
  --color-success: #137333;

  --font-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text: "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --text-hero: clamp(2.5rem, 7vw, 4rem);
  --text-display: clamp(2rem, 4vw, 2.5rem);
  --text-title: 1.3125rem;
  --text-body: 1.0625rem;
  --text-caption: 0.875rem;
  --text-fine: 0.75rem;

  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius-pill: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 17px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-section: 80px;

  --content-wide: 1440px;
  --content-reading: 980px;
  --nav-height: 48px;
}