:root {
  --font-sans: "Outfit", sans-serif;
  --font-serif: "Fraunces", serif;
  --color-cream-50: #fcfaf5;
  --color-cream-100: #fbf8f2;
  --color-cream-200: #f8f2e7;
  --color-cream-300: #f5ecdc;
  --color-cream-400: #e5d6c2;
  --color-cream-500: #ccbda9;
  --color-cream-600: #b2a089;
  --color-brown-700: #6e6152;
  --color-brown-800: #453d32;
  --color-brown-900: #2f2820;
  --color-brown-950: #1e1916;
  --color-green-700: #154d3d;
  --color-green-800: #0e3329;
  --color-green-900: #0a2a21;
  --color-gold-500: #d6a866;
  --color-white: #ffffff;
  --bg: var(--color-cream-100);
  --surface: var(--color-cream-200);
  --surface-strong: linear-gradient(170deg, #fffdf8, #f7efdf);
  --text: var(--color-brown-950);
  --muted: var(--color-brown-700);
  --border: var(--color-cream-400);
  --accent: var(--color-brown-800);
  --accent-strong: var(--color-brown-900);
  --brand: var(--color-green-700);
  --brand-strong: var(--color-green-900);
  --highlight: var(--color-gold-500);
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.35rem;
  --space-5: 1.8rem;
  --space-6: 2.4rem;
  --space-7: 3.2rem;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 8px 18px rgba(92, 60, 20, 0.1);
  --shadow-md: 0 14px 30px rgba(31, 37, 26, 0.14);
  --shadow-lg: 0 22px 46px rgba(28, 40, 34, 0.22);
  --ring: 0 0 0 4px rgba(13, 90, 64, 0.2);
  --container: min(1120px, 92vw);
  --header-width: min(700px, calc(100vw - 1.5rem));
}