/* Well Cottage — design tokens. Single source of truth, linked by every page. */
:root {
  /* Palette — warm Cotswold stone, chalk, sage & clay (relaxed countryside luxury) */
  --paper:      #F6F2EA;  /* page background — warm chalk */
  --paper-2:    #EFE9DD;  /* alt section background */
  --stone:      #E4DCCC;  /* cards / borders */
  --stone-deep: #D3C7B2;
  --ink:        #2A2620;  /* primary text — warm charcoal */
  --ink-soft:   #4A443B;
  --muted:      #756C5C;  /* secondary text */
  --sage:       #6B7257;  /* primary accent — countryside green */
  --sage-deep:  #515740;
  --sage-tint:  #E8EAE0;
  --clay:       #B17F5A;  /* warm secondary accent */
  --clay-deep:  #8E6342;
  --white:      #FCFAF5;  /* true light — text over images, stays light in both themes */
  --surface:    #FCFAF5;  /* card / elevated surface */
  --band-bg:    #2A2620;  /* dark bands: footer, CTA */

  /* Typography */
  --font-display: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale */
  --fs-hero:   clamp(2.8rem, 7vw, 6rem);
  --fs-h1:     clamp(2.2rem, 5vw, 4rem);
  --fs-h2:     clamp(1.7rem, 3.4vw, 2.8rem);
  --fs-h3:     clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead:   clamp(1.1rem, 1.6vw, 1.35rem);
  --fs-body:   1.0625rem;
  --fs-small:  0.875rem;
  --fs-eyebrow: 0.78rem;

  /* Spacing & rhythm */
  --space-section: clamp(4.5rem, 9vw, 9rem);
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1280px;
  --maxw-text: 68ch;

  /* Form */
  --radius: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --border: 1px solid var(--stone-deep);
  --shadow-sm: 0 1px 3px rgba(42, 38, 32, 0.06), 0 6px 18px rgba(42, 38, 32, 0.06);
  --shadow-md: 0 4px 14px rgba(42, 38, 32, 0.08), 0 18px 50px rgba(42, 38, 32, 0.12);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;

  --header-h: 76px;
}

/* ---------- Dark theme: brown page + deep-green alt sections ---------- */
[data-theme="dark"] {
  --paper:      #26221C;  /* page background — deep brown (footer family) */
  --paper-2:    #2C3327;  /* alt section background — deep green */
  --surface:    #322D25;  /* cards — elevated brown */
  --stone:      #3B362D;  /* borders */
  --stone-deep: #4A443B;
  --ink:        #ECE5D7;  /* primary text — warm off-white */
  --ink-soft:   #CFC7B5;
  --muted:      #A99E8B;
  --sage:       #7C8765;  /* accent fills */
  --sage-deep:  #AAB78B;  /* links / accent text — lightened for dark */
  --sage-tint:  #3A4031;  /* avatar / chip background */
  --clay:       #C68E63;
  --clay-deep:  #D29C73;  /* eyebrows / secondary accent — lightened */
  --band-bg:    #1F1B16;  /* dark bands — deepest brown */
  --white:      #FCFAF5;  /* unchanged — text over images */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 6px 18px rgba(0,0,0,0.28);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.35), 0 18px 50px rgba(0,0,0,0.45);
}

@media (prefers-reduced-motion: no-preference) {
  body { transition: background-color 0.4s var(--ease), color 0.4s var(--ease); }
}