/* ════════════════════════════
   DESIGN TOKENS — default: Warm Earth
════════════════════════════ */
:root {
  /* ── Core palette ── */
  --color-bg:              #F2EDE8;
  --color-cream:           #F7F4EF;
  --color-warm:            #EAE3DB;
  --color-warm-deep:       #DED5CB;
  --color-brown-dark:      #7A6A62;
  --color-brown-mid:       #A0928A;
  --color-sage:            #C97A2E;   /* orange accent — name kept for compatibility */
  --color-border:          rgba(186,172,160,0.4);
  --color-glass-bg:        rgba(247,244,239,0.84);
  --color-glass-bg-strong: rgba(247,244,239,0.94);

  /* ── Accent as RGB tuple (for rgba() variants) ── */
  --accent-rgb:   201, 122, 46;
  --shadow-rgb:   62, 48, 40;

  /* ── CTA button ── */
  --color-cta-bg:    #C1683A;
  --color-cta-hover: #A8562C;

  /* ── Service page booking button ── */
  --color-btn-service:       #9E7060;
  --color-btn-service-hover: #7C5548;

  /* ── Section backgrounds (3 levels of opacity/tone) ── */
  --section-bg-a: rgba(255,255,255, 0.68);   /* stats, news, contact */
  --section-bg-b: rgba(234,227,219, 0.70);   /* services, clients, keywords */
  --section-bg-c: rgba(247,244,239, 0.70);   /* sisupuu */

  /* ── Nav / mobile backgrounds ── */
  --nav-bg:       rgba(247,244,239, 0.94);
  --mobile-bg:    rgba(251,247,243, 0.97);

  /* ── Deep text used inside cards ── */
  --color-text-deep: #4A3B33;
  --color-text-card: #6B5B52;

  /* ── Stat card warm background ── */
  --color-stat-warm: #F2EBE0;

  /* ── Hero / scroll cue accent ── */
  --color-hero-accent: #DDD0C3;

  /* ── Page background gradient stops ── */
  --gradient-edge:     #B3A7A0;
  --gradient-shoulder: #E8E0D9;
  --gradient-peak:     #F6F0EA;

  /* ── Radius / spacing ── */
  --radius-card: 4px;
  --nav-height:  88px;

  /* ── Fonts ── */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Montserrat', sans-serif;
}

/* ════════════════════════════
   RESET & BASE
════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  min-height: 100%;
  background: linear-gradient(to bottom,
    var(--gradient-edge)     0%,
    var(--gradient-shoulder) 26%,
    var(--gradient-peak)     50%,
    var(--gradient-shoulder) 74%,
    var(--gradient-edge)     100%
  );
  background-attachment: fixed;
}

body {
  background: transparent;
  font-family: var(--font-body);
  color: var(--color-brown-dark);
}

img { display: block; max-width: 100%; }
a   { text-decoration: none; }

/* ════════════════════════════
   SHARED PATTERNS
════════════════════════════ */
.eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-sage);
  font-weight: 700;
  margin-bottom: 1.7rem;   /* breathing room before the heading (site-wide) */
}

.section-heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--color-brown-dark);
}

.section-heading--light { color: var(--color-brown-dark); }

.frosted-card {
  background: var(--color-glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-card);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 2rem;
  border: 1.5px solid var(--color-brown-mid);
  border-radius: 2px;
  color: var(--color-brown-mid);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover {
  background: var(--color-brown-mid);
  color: var(--color-cream);
}

.btn--light {
  border-color: var(--color-brown-mid);
  color: var(--color-brown-dark);
}
.btn--light:hover {
  background: var(--color-brown-mid);
  border-color: var(--color-brown-mid);
  color: var(--color-cream);
}

.btn--filled {
  background: var(--color-brown-mid);
  color: var(--color-cream);
  border-color: var(--color-brown-mid);
}
.btn--filled:hover {
  background: var(--color-brown-dark);
  border-color: var(--color-brown-dark);
}

.btn--service {
  background: var(--color-btn-service);
  color: var(--color-cream);
  border-color: var(--color-btn-service);
}
.btn--service:hover {
  background: var(--color-btn-service-hover);
  border-color: var(--color-btn-service-hover);
  color: var(--color-cream);
}

/* ── Theme switcher widget ── */
.theme-switcher {
  position: fixed;
  bottom: 1.8rem;
  right: 1.8rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.55rem;
  border-radius: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.08);
}

.theme-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), border-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.theme-dot:hover {
  transform: scale(1.25);
}
.theme-dot.active {
  border-color: rgba(255,255,255,0.9);
  box-shadow: 0 0 0 2px currentColor;
}

@media (max-width: 720px) {
  .theme-switcher {
    bottom: 1rem;
    right: 1rem;
    flex-direction: row;
    border-radius: 30px;
  }
}

/* Frame ornament */
.ornament-frame {
  position: relative;
  width: 100%;
  padding: 18px;
}
.ornament-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(140,123,117,0.6);
  border-radius: var(--radius-card);
  pointer-events: none;
}
.frame-corner {
  position: absolute;
  width: 80px;
  height: 80px;
  z-index: 3;
}
.frame-corner.tl { top: -1px; left: -1px; }
.frame-corner.tr { top: -1px; right: -1px; }
.frame-corner.bl { bottom: -1px; left: -1px; }
.frame-corner.br { bottom: -1px; right: -1px; }

/* Scroll reveal — the hidden start state ONLY applies when JS is confirmed
   active (<html class="js">). Without JS (crawlers, social scrapers, JS
   failures) the content stays visible instead of blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect the user's reduced-motion preference: show everything instantly. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .js .reveal,
  .js .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Responsive */
@media (max-width: 960px) {
  :root { --nav-height: auto; }
  .frame-corner { width: 60px; height: 60px; }
}
@media (max-width: 720px) {
  .frame-corner { width: 56px; height: 56px; }
}


/* ════════════════════════════════════════════════════════
   THEMES — 10 AI-generated palettes
   Applied via: <html data-theme="..."> etc.
   JS (themes.js) toggles the attribute and saves to
   localStorage so the choice persists across pages.
════════════════════════════════════════════════════════ */

/* ── 1. Terracotta & Sand ── */
[data-theme="terracotta"] {
  --color-sage:            #C0714A;
  --accent-rgb:            192, 113, 74;
  --color-brown-dark:      #4A4039;
  --color-btn-service:       #C0705A;
  --color-btn-service-hover: #9E5844;
  --color-brown-mid:       #6B6055;
  --color-bg:              #F4F0E9;
  --color-cream:           #FBF9F4;
  --color-warm:            #E8E1D6;
  --color-warm-deep:       #DDD3C4;
  --color-border:          rgba(221,211,196, 0.4);
  --color-glass-bg:        rgba(251,249,244, 0.84);
  --color-glass-bg-strong: rgba(251,249,244, 0.94);
  --color-cta-bg:          #C0714A;
  --color-cta-hover:       #A85C39;
  --shadow-rgb:            74, 64, 57;
  --section-bg-a:          rgba(255,255,255, 0.68);
  --section-bg-b:          rgba(232,225,214, 0.70);
  --section-bg-c:          rgba(244,240,233, 0.70);
  --nav-bg:                rgba(251,249,244, 0.94);
  --mobile-bg:             rgba(251,249,244, 0.97);
  --color-text-deep:       #4A4039;
  --color-text-card:       #6B6055;
  --color-stat-warm:       #E8E1D6;
  --color-hero-accent:     #C9C3BD;
  --gradient-edge:         #D8CFC2;
  --gradient-shoulder:     #ECE6DC;
  --gradient-peak:         #FBF9F4;
}

/* ── 2. Clay & Hemp ── */
[data-theme="clay"] {
  --color-sage:            #B25C3C;
  --accent-rgb:            178, 92, 60;
  --color-brown-dark:      #4B3F35;
  --color-btn-service:       #A06050;
  --color-btn-service-hover: #7E4838;
  --color-brown-mid:       #6E5F50;
  --color-bg:              #F2EBE2;
  --color-cream:           #FAF5ED;
  --color-warm:            #E6D9C8;
  --color-warm-deep:       #D9C9B4;
  --color-border:          rgba(217,201,180, 0.4);
  --color-glass-bg:        rgba(250,245,237, 0.84);
  --color-glass-bg-strong: rgba(250,245,237, 0.94);
  --color-cta-bg:          #B25C3C;
  --color-cta-hover:       #97492D;
  --shadow-rgb:            75, 63, 53;
  --section-bg-a:          rgba(255,255,255, 0.68);
  --section-bg-b:          rgba(230,217,200, 0.70);
  --section-bg-c:          rgba(242,235,226, 0.70);
  --nav-bg:                rgba(250,245,237, 0.94);
  --mobile-bg:             rgba(250,245,237, 0.97);
  --color-text-deep:       #4B3F35;
  --color-text-card:       #6E5F50;
  --color-stat-warm:       #E6D9C8;
  --color-hero-accent:     #CABFB4;
  --gradient-edge:         #D7C9B6;
  --gradient-shoulder:     #E8DDCE;
  --gradient-peak:         #FAF5ED;
}

/* ── 3. Sage & Greige ── */
[data-theme="sage-greige"] {
  --color-sage:            #879576;
  --accent-rgb:            135, 149, 118;
  --color-brown-dark:      #41453B;
  --color-btn-service:       #9C7E62;
  --color-btn-service-hover: #7A6048;
  --color-brown-mid:       #61655A;
  --color-bg:              #EFEEE7;
  --color-cream:           #F8F7F1;
  --color-warm:            #E1E0D4;
  --color-warm-deep:       #D3D2C2;
  --color-border:          rgba(211,210,194, 0.4);
  --color-glass-bg:        rgba(248,247,241, 0.84);
  --color-glass-bg-strong: rgba(248,247,241, 0.94);
  --color-cta-bg:          #879576;
  --color-cta-hover:       #6C7A5C;
  --shadow-rgb:            65, 69, 59;
  --section-bg-a:          rgba(255,255,255, 0.68);
  --section-bg-b:          rgba(225,224,212, 0.70);
  --section-bg-c:          rgba(239,238,231, 0.70);
  --nav-bg:                rgba(248,247,241, 0.94);
  --mobile-bg:             rgba(248,247,241, 0.97);
  --color-text-deep:       #41453B;
  --color-text-card:       #61655A;
  --color-stat-warm:       #E1E0D4;
  --color-hero-accent:     #C5C4BB;
  --gradient-edge:         #CFD0C2;
  --gradient-shoulder:     #E2E1D6;
  --gradient-peak:         #F8F7F1;
}

/* ── 4. Oat & Dusty Rose ── */
[data-theme="oat-rose"] {
  --color-sage:            #BE8884;
  --accent-rgb:            190, 136, 132;
  --color-brown-dark:      #4C403C;
  --color-btn-service:       #BE8E7E;
  --color-btn-service-hover: #9A6C5E;
  --color-brown-mid:       #6F5F59;
  --color-bg:              #F5EFEA;
  --color-cream:           #FBF6F2;
  --color-warm:            #ECDFD9;
  --color-warm-deep:       #E0CFC8;
  --color-border:          rgba(224,207,200, 0.4);
  --color-glass-bg:        rgba(251,246,242, 0.84);
  --color-glass-bg-strong: rgba(251,246,242, 0.94);
  --color-cta-bg:          #BE8884;
  --color-cta-hover:       #A36C68;
  --shadow-rgb:            76, 64, 60;
  --section-bg-a:          rgba(255,255,255, 0.68);
  --section-bg-b:          rgba(236,223,217, 0.70);
  --section-bg-c:          rgba(245,239,234, 0.70);
  --nav-bg:                rgba(251,246,242, 0.94);
  --mobile-bg:             rgba(251,246,242, 0.97);
  --color-text-deep:       #4C403C;
  --color-text-card:       #6F5F59;
  --color-stat-warm:       #ECDFD9;
  --color-hero-accent:     #CBC2BD;
  --gradient-edge:         #DDCCC5;
  --gradient-shoulder:     #EBDFD9;
  --gradient-peak:         #FBF6F2;
}

/* ── 5. Linen & Ochre ── */
[data-theme="linen-ochre"] {
  --color-sage:            #C19A4C;
  --accent-rgb:            193, 154, 76;
  --color-brown-dark:      #4A4234;
  --color-btn-service:       #C09A5C;
  --color-btn-service-hover: #9A7840;
  --color-brown-mid:       #6C6250;
  --color-bg:              #F4F0E6;
  --color-cream:           #FBF8EF;
  --color-warm:            #E9E0CC;
  --color-warm-deep:       #DCD0B5;
  --color-border:          rgba(220,208,181, 0.4);
  --color-glass-bg:        rgba(251,248,239, 0.84);
  --color-glass-bg-strong: rgba(251,248,239, 0.94);
  --color-cta-bg:          #C19A4C;
  --color-cta-hover:       #A37F34;
  --shadow-rgb:            74, 66, 52;
  --section-bg-a:          rgba(255,255,255, 0.68);
  --section-bg-b:          rgba(233,224,204, 0.70);
  --section-bg-c:          rgba(244,240,230, 0.70);
  --nav-bg:                rgba(251,248,239, 0.94);
  --mobile-bg:             rgba(251,248,239, 0.97);
  --color-text-deep:       #4A4234;
  --color-text-card:       #6C6250;
  --color-stat-warm:       #E9E0CC;
  --color-hero-accent:     #C8C2B5;
  --gradient-edge:         #D9CFB8;
  --gradient-shoulder:     #EAE2D0;
  --gradient-peak:         #FBF8EF;
}

/* ── 6. Stone & Muted Teal ── */
[data-theme="stone-teal"] {
  --color-sage:            #5E8D87;
  --accent-rgb:            94, 141, 135;
  --color-brown-dark:      #3C443F;
  --color-btn-service:       #A07268;
  --color-btn-service-hover: #7E5650;
  --color-brown-mid:       #5C645F;
  --color-bg:              #EEEFEC;
  --color-cream:           #F7F8F4;
  --color-warm:            #E0E3DE;
  --color-warm-deep:       #D0D5CF;
  --color-border:          rgba(208,213,207, 0.4);
  --color-glass-bg:        rgba(247,248,244, 0.84);
  --color-glass-bg-strong: rgba(247,248,244, 0.94);
  --color-cta-bg:          #5E8D87;
  --color-cta-hover:       #46716C;
  --shadow-rgb:            60, 68, 63;
  --section-bg-a:          rgba(255,255,255, 0.68);
  --section-bg-b:          rgba(224,227,222, 0.70);
  --section-bg-c:          rgba(238,239,236, 0.70);
  --nav-bg:                rgba(247,248,244, 0.94);
  --mobile-bg:             rgba(247,248,244, 0.97);
  --color-text-deep:       #3C443F;
  --color-text-card:       #5C645F;
  --color-stat-warm:       #E0E3DE;
  --color-hero-accent:     #C2C5C1;
  --gradient-edge:         #C8CFC9;
  --gradient-shoulder:     #DFE3DF;
  --gradient-peak:         #F7F8F4;
}

/* ── 7. Almond & Plum ── */
[data-theme="almond-plum"] {
  --color-sage:            #8C6B7E;
  --accent-rgb:            140, 107, 126;
  --color-brown-dark:      #463E42;
  --color-btn-service:       #B07872;
  --color-btn-service-hover: #8C5E58;
  --color-brown-mid:       #685D63;
  --color-bg:              #F2EEE9;
  --color-cream:           #FAF6F1;
  --color-warm:            #E6DDD7;
  --color-warm-deep:       #DACEC8;
  --color-border:          rgba(218,206,200, 0.4);
  --color-glass-bg:        rgba(250,246,241, 0.84);
  --color-glass-bg-strong: rgba(250,246,241, 0.94);
  --color-cta-bg:          #8C6B7E;
  --color-cta-hover:       #6F5163;
  --shadow-rgb:            70, 62, 66;
  --section-bg-a:          rgba(255,255,255, 0.68);
  --section-bg-b:          rgba(230,221,215, 0.70);
  --section-bg-c:          rgba(242,238,233, 0.70);
  --nav-bg:                rgba(250,246,241, 0.94);
  --mobile-bg:             rgba(250,246,241, 0.97);
  --color-text-deep:       #463E42;
  --color-text-card:       #685D63;
  --color-stat-warm:       #E6DDD7;
  --color-hero-accent:     #C7C0C0;
  --gradient-edge:         #D5CACB;
  --gradient-shoulder:     #E5DDD8;
  --gradient-peak:         #FAF6F1;
}

/* ── 8. Camel & Warm Grey ── */
[data-theme="camel-grey"] {
  --color-sage:            #B08C5A;
  --accent-rgb:            176, 140, 90;
  --color-brown-dark:      #463E33;
  --color-btn-service:       #B08C60;
  --color-btn-service-hover: #8E6C42;
  --color-brown-mid:       #685E4F;
  --color-bg:              #F1ECE4;
  --color-cream:           #F9F4EC;
  --color-warm:            #E4DACA;
  --color-warm-deep:       #D7CAB4;
  --color-border:          rgba(215,202,180, 0.4);
  --color-glass-bg:        rgba(249,244,236, 0.84);
  --color-glass-bg-strong: rgba(249,244,236, 0.94);
  --color-cta-bg:          #B08C5A;
  --color-cta-hover:       #927140;
  --shadow-rgb:            70, 62, 51;
  --section-bg-a:          rgba(255,255,255, 0.68);
  --section-bg-b:          rgba(228,218,202, 0.70);
  --section-bg-c:          rgba(241,236,228, 0.70);
  --nav-bg:                rgba(249,244,236, 0.94);
  --mobile-bg:             rgba(249,244,236, 0.97);
  --color-text-deep:       #463E33;
  --color-text-card:       #685E4F;
  --color-stat-warm:       #E4DACA;
  --color-hero-accent:     #C8C0B3;
  --gradient-edge:         #D6CAB6;
  --gradient-shoulder:     #E5DBCC;
  --gradient-peak:         #F9F4EC;
}

/* ── 9. Ivory & Soft Blue ── */
[data-theme="ivory-blue"] {
  --color-sage:            #6E88A0;
  --accent-rgb:            110, 136, 160;
  --color-brown-dark:      #3C4148;
  --color-btn-service:       #A08070;
  --color-btn-service-hover: #7E6058;
  --color-brown-mid:       #5C636B;
  --color-bg:              #F2F2F0;
  --color-cream:           #FBFBF9;
  --color-warm:            #E7E8E6;
  --color-warm-deep:       #DADCDB;
  --color-border:          rgba(218,220,219, 0.4);
  --color-glass-bg:        rgba(251,251,249, 0.84);
  --color-glass-bg-strong: rgba(251,251,249, 0.94);
  --color-cta-bg:          #6E88A0;
  --color-cta-hover:       #536E86;
  --shadow-rgb:            60, 65, 72;
  --section-bg-a:          rgba(255,255,255, 0.68);
  --section-bg-b:          rgba(231,232,230, 0.70);
  --section-bg-c:          rgba(242,242,240, 0.70);
  --nav-bg:                rgba(251,251,249, 0.94);
  --mobile-bg:             rgba(251,251,249, 0.97);
  --color-text-deep:       #3C4148;
  --color-text-card:       #5C636B;
  --color-stat-warm:       #E7E8E6;
  --color-hero-accent:     #C6C9CB;
  --gradient-edge:         #D6DADC;
  --gradient-shoulder:     #E9EAEA;
  --gradient-peak:         #FBFBF9;
}

/* ── 10. Honey & Wheat ── light yellow ── */
[data-theme="honey-wheat"] {
  --color-sage:            #BFA84A;
  --accent-rgb:            191, 168, 74;
  --color-brown-dark:      #4A4232;
  --color-btn-service:       #B09050;
  --color-btn-service-hover: #8E7038;
  --color-brown-mid:       #6E6248;
  --color-bg:              #F7F4E3;
  --color-cream:           #FDFCF0;
  --color-warm:            #EEE9D2;
  --color-warm-deep:       #E4DCC0;
  --color-border:          rgba(228,220,192, 0.4);
  --color-glass-bg:        rgba(253,252,240, 0.84);
  --color-glass-bg-strong: rgba(253,252,240, 0.94);
  --color-cta-bg:          #BFA84A;
  --color-cta-hover:       #A08C32;
  --shadow-rgb:            74, 66, 50;
  --section-bg-a:          rgba(255,255,255, 0.68);
  --section-bg-b:          rgba(238,233,210, 0.70);
  --section-bg-c:          rgba(247,244,227, 0.70);
  --nav-bg:                rgba(253,252,240, 0.94);
  --mobile-bg:             rgba(253,252,240, 0.97);
  --color-text-deep:       #4A4232;
  --color-text-card:       #6E6248;
  --color-stat-warm:       #EEE9D2;
  --color-hero-accent:     #CEC8A8;
  --gradient-edge:         #DDD8B0;
  --gradient-shoulder:     #EDE8CC;
  --gradient-peak:         #FDFCF0;
}

/* ── placeholder — keep selector but no longer used ── */
[data-theme="nordic"] {
  --color-sage:            #4A7C9E;
  --accent-rgb:            74, 124, 158;
  --color-brown-dark:      #3A4A5C;
  --color-brown-mid:       #7A8E9E;
  --color-bg:              #EEF2F5;
  --color-cream:           #F4F7F9;
  --color-warm:            #E2E8EC;
  --color-warm-deep:       #D4DCE2;
  --color-border:          rgba(160,175,185, 0.4);
  --color-glass-bg:        rgba(240,245,248, 0.84);
  --color-glass-bg-strong: rgba(240,245,248, 0.94);
  --color-cta-bg:          #2B6EA8;
  --color-cta-hover:       #1E5280;
  --shadow-rgb:            48, 60, 74;
  --section-bg-a:          rgba(255,255,255, 0.72);
  --section-bg-b:          rgba(216,228,238, 0.70);
  --section-bg-c:          rgba(232,240,246, 0.70);
  --nav-bg:                rgba(240,245,248, 0.94);
  --mobile-bg:             rgba(244,248,251, 0.97);
  --color-text-deep:       #2C3A4A;
  --color-text-card:       #4A5E70;
  --color-stat-warm:       #DCE8F0;
  --color-hero-accent:     #B8C8D5;
  --gradient-edge:         #9EB3C2;
  --gradient-shoulder:     #D4DCE4;
  --gradient-peak:         #EEF2F6;
}

/* ── 2. Forest Moss ── deep greens, moss accent ── */
[data-theme="forest"] {
  --color-sage:            #5C8B5E;
  --accent-rgb:            92, 139, 94;
  --color-brown-dark:      #2E3D2F;
  --color-brown-mid:       #7A8C7B;
  --color-bg:              #EEF1EC;
  --color-cream:           #F4F6F2;
  --color-warm:            #E4E9E1;
  --color-warm-deep:       #D6DDD3;
  --color-border:          rgba(152,170,152, 0.4);
  --color-glass-bg:        rgba(240,244,238, 0.84);
  --color-glass-bg-strong: rgba(240,244,238, 0.94);
  --color-cta-bg:          #3A7A3C;
  --color-cta-hover:       #2A5E2C;
  --shadow-rgb:            46, 61, 47;
  --section-bg-a:          rgba(255,255,255, 0.72);
  --section-bg-b:          rgba(214,228,214, 0.70);
  --section-bg-c:          rgba(232,240,230, 0.70);
  --nav-bg:                rgba(240,244,238, 0.94);
  --mobile-bg:             rgba(244,248,242, 0.97);
  --color-text-deep:       #1E2E1F;
  --color-text-card:       #4A5E4B;
  --color-stat-warm:       #D8E8D8;
  --color-hero-accent:     #B4CAB5;
  --gradient-edge:         #9EB09F;
  --gradient-shoulder:     #D0DCD0;
  --gradient-peak:         #E8EEE7;
}

/* ── 3. Dusty Rose ── warm rose, terracotta accent ── */
[data-theme="rose"] {
  --color-sage:            #B8685A;
  --accent-rgb:            184, 104, 90;
  --color-brown-dark:      #6B4C48;
  --color-brown-mid:       #A08278;
  --color-bg:              #F5EFED;
  --color-cream:           #FAF6F4;
  --color-warm:            #EEE5E2;
  --color-warm-deep:       #E4D8D4;
  --color-border:          rgba(186,156,150, 0.4);
  --color-glass-bg:        rgba(250,246,244, 0.84);
  --color-glass-bg-strong: rgba(250,246,244, 0.94);
  --color-cta-bg:          #A8574A;
  --color-cta-hover:       #8C4238;
  --shadow-rgb:            74, 52, 48;
  --section-bg-a:          rgba(255,255,255, 0.72);
  --section-bg-b:          rgba(236,220,216, 0.70);
  --section-bg-c:          rgba(248,240,238, 0.70);
  --nav-bg:                rgba(250,246,244, 0.94);
  --mobile-bg:             rgba(253,249,247, 0.97);
  --color-text-deep:       #4A2E2A;
  --color-text-card:       #6B4A46;
  --color-stat-warm:       #EEE0DA;
  --color-hero-accent:     #D8C0BA;
  --gradient-edge:         #C4A8A2;
  --gradient-shoulder:     #E4D0CA;
  --gradient-peak:         #F5EBE8;
}

/* ── 4. Midnight Gold ── dark background, gold accent ── */
[data-theme="midnight"] {
  --color-sage:            #C9A84C;
  --accent-rgb:            201, 168, 76;
  --color-brown-dark:      #EAE0D5;
  --color-brown-mid:       #B0A898;
  --color-bg:              #1E1A18;
  --color-cream:           #2A2420;
  --color-warm:            #241E1C;
  --color-warm-deep:       #1A1614;
  --color-border:          rgba(80,72,64, 0.6);
  --color-glass-bg:        rgba(36,30,26, 0.90);
  --color-glass-bg-strong: rgba(36,30,26, 0.96);
  --color-cta-bg:          #B8962A;
  --color-cta-hover:       #9A7E20;
  --shadow-rgb:            0, 0, 0;
  --section-bg-a:          rgba(42,36,30, 0.92);
  --section-bg-b:          rgba(32,26,22, 0.92);
  --section-bg-c:          rgba(38,32,28, 0.92);
  --nav-bg:                rgba(20,16,14, 0.97);
  --mobile-bg:             rgba(20,16,14, 0.99);
  --color-text-deep:       #F0E8DC;
  --color-text-card:       #C8BEB2;
  --color-stat-warm:       #2E2820;
  --color-hero-accent:     #8A7E6E;
  --gradient-edge:         #0E0C0A;
  --gradient-shoulder:     #1C1814;
  --gradient-peak:         #262018;
}