:root {
  /* Palette — pulled from the home itself */
  --color-cream: #fbf4e6;
  --color-sand: #f1e4cc;
  --color-sand-deep: #e4cfab;
  --color-walnut: #3b2618;
  --color-walnut-soft: #6a4a35;
  --color-sage: #7f907a;
  --color-sage-deep: #556551;
  --color-sage-mist: #dfe5d6;
  --color-gold: #b8914a;
  --color-gold-light: #e2c88f;
  --color-clay: #b4552f;
  --color-clay-deep: #8f3f1f;
  --color-blush: #f2dcd3;
  --color-sky-top: #2f6fc4;
  --color-sky: #5292e1;

  /* Typography */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --text-base: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-small: 0.95rem;
  --text-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --text-h2: clamp(2.4rem, 1.6rem + 3.4vw, 4.75rem);
  --text-h3: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  --text-mega: clamp(4.5rem, 1rem + 17vw, 19rem);

  /* Spacing */
  --gutter: clamp(1rem, 0.5rem + 3vw, 3.5rem);
  --space-section: clamp(5rem, 3rem + 7vw, 11rem);
  --max-width: 1320px;

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-hero: 900ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Depth */
  --shadow-soft: 0 1px 2px rgb(59 38 24 / 0.08), 0 12px 40px -12px rgb(59 38 24 / 0.28);
  --shadow-lift: 0 2px 4px rgb(59 38 24 / 0.1), 0 30px 60px -20px rgb(59 38 24 / 0.4);
  --arch: 50% 50% 0.6rem 0.6rem / 36% 36% 0.6rem 0.6rem;
}