:root {
  /* Surfaces */
  --color-cream: #f7f3ec;
  --color-off-white: #faf8f4;
  --color-sand: #ebe3d6;
  --color-beige: #d9cdb8;
  --color-taupe: #c4b5a0;
  --color-warm-gray: #a89a8a;

  /* Text & accents */
  --color-ink: #1c1814;
  --color-brown: #3a2f26;
  --color-brown-soft: #5c4c3e;
  --color-muted: #7a6e62;
  --color-line: rgba(58, 47, 38, 0.12);
  --color-line-strong: rgba(58, 47, 38, 0.22);

  /* Product accents */
  --color-khaki: #6b705c;
  --color-olive: #5a6148;
  --color-black: #111111;
  --color-white: #ffffff;
  --color-star: #b8956a;

  /* Overlay */
  --overlay-soft: rgba(28, 24, 20, 0.28);
  --overlay-strong: rgba(28, 24, 20, 0.45);
  --glass: rgba(247, 243, 236, 0.82);

  /* Typography */
  --font-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-sans: "Outfit", "Helvetica Neue", Helvetica, sans-serif;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  --header-h: clamp(4.5rem, 8vw, 5.5rem);
  --announce-h: 2.1rem;
  --container: min(100% - 2rem, 90rem);
  --gutter: clamp(1rem, 2.8vw, 2.75rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.45s;
  --duration-slow: 0.7s;

  /* Shadows */
  --shadow-soft: 0 10px 40px rgba(28, 24, 20, 0.06);
  --shadow-drawer: -12px 0 40px rgba(28, 24, 20, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0.01ms;
    --duration-slow: 0.01ms;
  }
}