/* ==========================================================================
   Home Sweet LLC - color themes
   Staff choose a theme in Admin → Site settings; the <html> tag gets
   data-theme="classic|navy|evergreen". Every theme only overrides CSS
   variables, so layout and spacing are identical.
   ========================================================================== */

/* ---------- Shared defaults (Classic Sky Blue) ---------- */
:root {
  --tint-color: #eef4fb;              /* soft background behind photos/placeholders */
  --highlight-color: var(--accent-color); /* hero "Our Happiness", title underline */
}

/* ---------- Midnight Navy & Gold ---------- */
html[data-theme="navy"] {
  --background-color: #ffffff;
  --default-color: #22272e;
  --heading-color: #14233a;
  --accent-color: #234a7d;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;
  --nav-color: #22272e;
  --nav-hover-color: #234a7d;
  --nav-dropdown-hover-color: #234a7d;
  --tint-color: #e9eef5;
  --highlight-color: #b88c4a;
}
html[data-theme="navy"] .light-background { --background-color: #f4f6fa; --surface-color: #ffffff; }
html[data-theme="navy"] .dark-background {
  --background-color: #14233a;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #24395a;
  --contrast-color: #ffffff;
  --accent-color: #c9a46a;
}

/* ---------- Evergreen & Brass ---------- */
html[data-theme="evergreen"] {
  --background-color: #ffffff;
  --default-color: #222826;
  --heading-color: #18352e;
  --accent-color: #1f6b57;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;
  --nav-color: #222826;
  --nav-hover-color: #1f6b57;
  --nav-dropdown-hover-color: #1f6b57;
  --tint-color: #e8f0ec;
  --highlight-color: #a87d3f;
}
html[data-theme="evergreen"] .light-background { --background-color: #f3f7f5; --surface-color: #ffffff; }
html[data-theme="evergreen"] .dark-background {
  --background-color: #17382f;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #24503f;
  --contrast-color: #ffffff;
  --accent-color: #c7a26a;
}

/* ---------- Details shared by the darker themes ---------- */
.hero .hero-content h1 .accent-text { color: var(--highlight-color); }
.section-title h2:after { background: var(--highlight-color); }

/* The four "How it works" cards use playful pastels in Classic; the darker
   themes give them one calm tint so the page feels more refined. */
html[data-theme="navy"] .features-cards .feature-box,
html[data-theme="evergreen"] .features-cards .feature-box { background-color: var(--tint-color); }
html[data-theme="navy"] .features-cards .feature-box i,
html[data-theme="evergreen"] .features-cards .feature-box i { color: var(--accent-color); }

/* On the dark call-to-action band, the darker themes use a filled gold/brass button. */
html[data-theme="navy"] .dark-background .cta-btn,
html[data-theme="evergreen"] .dark-background .cta-btn {
  background: var(--accent-color); border-color: var(--accent-color); color: var(--background-color);
}
html[data-theme="navy"] .dark-background .cta-btn:hover,
html[data-theme="evergreen"] .dark-background .cta-btn:hover {
  background: transparent; color: #ffffff; border-color: var(--accent-color);
}