/* base.css: existing styles; responsive and motion rules stay with their owner. */

:root {
  --font-serif: "Cormorant Garamond", serif;
  --font-sans: "Inter", sans-serif;
  --color-ivory: #f4e9db;
  --color-champagne: #e6c6a2;
  --color-ink: #35231d;
  --color-accent: #d9b084;
  --color-dark: #211612;
  --color-muted: rgb(244 233 219 / 78%);
  --color-surface-warm: #d7c6b3;
  --color-surface-soft: #e2d2c0;
  --color-transition-dark: #37231d;
  --color-espresso: #251713;
  --color-closing: #2b1915;
  --color-card-wine: #522723;
  --color-card-copper: #814530;
  --section-transition-size: clamp(56px, 6vw, 80px);
  --header-height: 92px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
  margin: 0;
  background-color: var(--color-dark);
  color: var(--color-ivory);
  font-family: var(--font-sans);
}

@media (max-width: 767px) {
  :root {
    --header-height: 76px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}