/* ============================================================
   THEME SYSTEM
   Three palettes, switched by [data-theme] on <html>.
   Every color in the site references these variables via the
   Tailwind config (bg-bg, text-ink, bg-primary, etc.).
   ============================================================ */

:root,
[data-theme="earthy"] {
  --bg:        #F6F2EB;
  --surface:   #FFFFFF;
  --surface-2: #EFE8DC;
  --ink:       #2B2722;
  --muted:     #6F655A;
  --primary:   #7A8B6F;   /* sage */
  --primary-ink:#FFFFFF;
  --accent:    #C2724E;   /* terracotta */
  --line:      #E4DCCF;
  --hero-a:    #7A8B6F;
  --hero-b:    #C2724E;
}

[data-theme="airy"] {
  --bg:        #EDF5F5;
  --surface:   #FFFFFF;
  --surface-2: #E0EDEC;
  --ink:       #16343A;
  --muted:     #567479;
  --primary:   #3E9AA1;   /* teal */
  --primary-ink:#FFFFFF;
  --accent:    #E0A468;   /* warm amber */
  --line:      #D3E6E4;
  --hero-a:    #3E9AA1;
  --hero-b:    #7FC2BC;
}

/* Verde — airy lightness keyed to the logo's green leaf + gold;
   the logo's maroon appears only in the crest itself */
[data-theme="verde"] {
  --bg:        #F8F6F0;   /* warm ivory */
  --surface:   #FFFFFF;
  --surface-2: #EEEBDF;   /* soft parchment */
  --ink:       #252A20;   /* deep olive-charcoal */
  --muted:     #6C6F60;   /* sage grey */
  --primary:   #5A7C4E;   /* leaf green */
  --primary-ink:#FFFFFF;
  --accent:    #B99B37;   /* softened gold */
  --line:      #E5E1D2;
  --hero-a:    #5A7C4E;
  --hero-b:    #B99B37;
}

/* Heritage — pulled from the client's burgundy & gold logo */
[data-theme="heritage"] {
  --bg:        #FAF6EE;   /* warm cream */
  --surface:   #FFFFFF;
  --surface-2: #F1E8D6;   /* parchment */
  --ink:       #3B1417;   /* burgundy-black */
  --muted:     #7C655F;   /* warm rosewood grey */
  --primary:   #550000;   /* maroon (client-picked) */
  --primary-ink:#FFFFFF;
  --accent:    #C9A227;   /* logo gold */
  --line:      #E9DEC8;
  --hero-a:    #550000;
  --hero-b:    #C9A227;
}

[data-theme="muted"] {
  --bg:        #F4F1EB;
  --surface:   #FBFAF7;
  --surface-2: #EAE3D8;
  --ink:       #201E1A;
  --muted:     #726B60;
  --primary:   #8C6A4E;   /* warm mocha */
  --primary-ink:#FFFFFF;
  --accent:    #A88763;   /* taupe */
  --line:      #E3DBCE;
  --hero-a:    #8C6A4E;
  --hero-b:    #A88763;
}

/* ---- Base ---- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }

/* Applied here as well as by Tailwind, so the correct faces render on first
   paint instead of after the CDN script generates its CSS (visible on mobile). */
.font-serif { font-family: Lora, ui-serif, Georgia, serif; }
.font-sans  { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }

/* Smooth theme transitions */
body, .themed {
  transition: background-color .5s ease, color .5s ease, border-color .5s ease;
}

/* ---- Image frames ----
   Standard practice for all images: wrap every <img> in a div,
   apply sizing (width/aspect/rounding/shadow) to the div, and let
   the image fill it. object-position overrides go on the img. */
.img-frame { overflow: hidden; }
.img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Coloured image placeholders (swap for real photos) ---- */
.ph {
  position: relative;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--hero-a) 55%, white),
      color-mix(in srgb, var(--hero-b) 55%, white));
  border: 1.5px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  font: 500 0.78rem/1 'Inter', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 65%, transparent);
  background: color-mix(in srgb, white 55%, transparent);
  padding: .45rem .7rem;
  border-radius: 999px;
  backdrop-filter: blur(2px);
}

/* Coloured lorem — tint placeholder body copy so it's obviously not final */
.lorem { color: color-mix(in srgb, var(--muted) 88%, var(--accent)); }

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: none; }

/* ---- Theme switcher segmented control ---- */
.seg { background: var(--surface-2); border: 1px solid var(--line); }
.seg button { color: var(--muted); transition: all .25s ease; }
.seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ---- FAQ accordion ---- */
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
details[open] .faq-a { max-height: 400px; }
.faq summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { transition: transform .3s ease; }
.faq details[open] summary .chev { transform: rotate(180deg); }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  transition: transform .35s ease, box-shadow .35s ease, background-color .5s ease, border-color .5s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.35); }

/* Buttons */
.btn-primary {
  background: var(--primary);
  color: var(--primary-ink);
  transition: transform .2s ease, filter .2s ease, background-color .5s ease;
}
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-2px); }
.btn-ghost {
  border: 1px solid var(--line);
  color: var(--ink);
  transition: all .25s ease;
}
.btn-ghost:hover { background: var(--surface-2); }

/* Soft grain / gradient hero backdrop */
.hero-glow {
  background:
    radial-gradient(60% 55% at 78% 18%, color-mix(in srgb, var(--hero-b) 26%, transparent), transparent 70%),
    radial-gradient(55% 60% at 12% 30%, color-mix(in srgb, var(--hero-a) 26%, transparent), transparent 70%);
}