:root {
  --color-bg: #f4efe6;
  --color-bg-soft: #eae2d4;
  --color-mist: #d9d2c5;
  --color-stone: #a8a39a;
  --color-taupe: #87827a;
  --color-ink: #2b2724;
  --color-ink-soft: #4a4540;
  --color-wood: #7a4f2e;
  --color-wood-deep: #4e2f1a;
  --color-wood-light: #b8895a;
  --color-olive: #6b7a4e;
  --color-bg-deep: #1f1b17;
  --color-cream-soft: rgba(244, 239, 230, 0.85);

  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  --container-max: 1240px;
  --container-text: 680px;
  --container-product: 1120px;
  --gutter: 20px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --shadow-none: none;
  --shadow-sm: 0 1px 0 rgba(43, 39, 36, 0.06);
  --shadow-md: 0 8px 24px -16px rgba(43, 39, 36, 0.18);

  --border-hairline: 1px solid var(--color-mist);
  --border-strong: 1px solid var(--color-ink);

  --ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1);
  --ease-entrance: cubic-bezier(0.16, 0.84, 0.32, 1);
  --ease-exit: cubic-bezier(0.4, 0, 0.7, 0.5);
  --dur-quick: 160ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;
  --dur-curtain: 1200ms;

  --nav-height: 76px;
}

@media (min-width: 600px) {
  :root { --gutter: 32px; }
}
@media (min-width: 960px) {
  :root { --gutter: 48px; }
}
@media (max-width: 720px) {
  :root { --nav-height: 64px; }
}