:root {
  --color-background: #f7f5f0;
  --color-surface: #eae5db;
  --color-text: #282720;
  --color-muted: #68665d;
  --color-border: #dcd7cd;
  --color-accent: #766b4f;
  --font-body: 'Inter', sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --text-body: clamp(1rem, .96rem + .2vw, 1.125rem);
  --text-small: .875rem;
  --text-h1: clamp(2.25rem, 1.4rem + 3.2vw, 4rem);
  --text-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-28: 112px;
  --container-width: 1200px;
  --gutter: 20px;
  --section-space: 64px;
  --header-size: 76px;
  --header-height: var(--header-size);
  --subnav-height: 65px;
  --radius: 3px;
  --motion: 180ms;
  --page-motion: 220ms;
  --ratio-product: 4 / 5;
  --ratio-hero: 1 / 1;
  --ratio-story: 4 / 3;
}
@media (min-width: 640px) { :root { --gutter: 32px; --section-space: 80px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; --section-space: 112px; --header-size: 88px; } }