/* ==========================================================================
   Scarlet's Cottage & Tea Garden — UI Option 04
   Design system tokens. Maroon is the accent everywhere — headings, eyebrow
   labels, links, icon accents, the stat number, and dark surfaces (header
   once scrolled/solid, footer, mobile nav overlay, page banners). Gold is
   deliberately restricted to a single element: the outline secondary button
   (.btn-outline-gold, e.g. "View Our Rooms"). No green.
   ========================================================================== */

:root {
  /* Core palette */
  --maroon-deep: #8B0000;      /* the accent color everywhere: headings, links, icons, dark surfaces */
  --maroon-darker: #5c0000;    /* hover / shadow depth on maroon */
  --gold-accent: #9C7A1C;      /* reserved for .btn-outline-gold only — do not use elsewhere */
  --gold-accent-dark: #7C6116; /* unused now that gold is restricted to one button (kept for reference) */
  --cream: #FAF8F5;            /* page background */
  --cream-deep: #F3EACD;       /* alternate section background */
  --ink: #333333;              /* body copy */
  --ink-soft: #5b5b5b;         /* secondary copy */
  --white: #ffffff;
  --line: rgba(139, 0, 0, 0.15);

  /* Typography */
  --font-heading: "Playfair Display", serif;
  --font-body: "Merriweather", serif;
  --font-ui: "Lato", sans-serif;

  /* Layout */
  --page-max: 1400px;
  --container-pad: 40px;
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: 200ms var(--ease);
  --t-medium: 450ms var(--ease);
  --t-slow: 800ms var(--ease);
}

@media (max-width: 640px) {
  :root {
    --container-pad: 20px;
  }
}