/* Theme system with CSS variables.
   - 'original' theme uses the site's native CSS (no data-theme attribute).
   - Other themes set variables on :root[data-theme="..."].
*/
:root{
  
  

  --bg:#ffffff;
  --surface:#ffffff;
  --surface-alt:#f7f7f7;
  --text:#111827;
  --muted:#6b7280;
  --heading:#0f172a;
  --primary:#2563eb;
  --secondary:#9333ea;
  --accent:#f59e0b;
  --card-border:#e5e7eb;
  --button-text:#ffffff;
}

/* === THEMES from your swatches === */

/* Pink–Magenta */
:root[data-theme="pink"]{
  --bg:#fff7fb;
  --surface:#ffffff;
  --surface-alt:#ffeaf8;
  --text:#3a0036;
  --muted:#7a2e6e;
  --heading:#2b0226;
  --primary:#ff2bd4;
  --secondary:#ff65a3;
  --accent:#ff85d8;
  --card-border:#fbd3f3;
  --button-text:#ffffff;
}

/* Skin Pastels */
:root[data-theme="skin"]{
  --bg:#fff8f3;
  --surface:#ffffff;
  --surface-alt:#f4e5da;
  --text:#3f2a22;
  --muted:#7c5c4f;
  --heading:#2f211b;
  --primary:#c58a6b;
  --secondary:#e2b49a;
  --accent:#b06d4f;
  --card-border:#f1dfd6;
  --button-text:#ffffff;
}

/* Classic Blue */
:root[data-theme="classic-blue"]{
  --bg:#f4fbfd;
  --surface:#ffffff;
  --surface-alt:#e9f4f7;
  --text:#0b2530;
  --muted:#395b66;
  --heading:#0b1c26;
  --primary:#3b82a0;
  --secondary:#5ba6b3;
  --accent:#80c3cf;
  --card-border:#d5ecef;
  --button-text:#ffffff;
}

/* Black–Emerald */
:root[data-theme="emerald"]{
  --bg:#061311;
  --surface:#0b1f1c;
  --surface-alt:#0f2c26;
  --text:#e6fffa;
  --muted:#9ad1c7;
  --heading:#d2fff8;
  --primary:#0d5d47;
  --secondary:#2f8f76;
  --accent:#32b18f;
  --card-border:#114238;
  --button-text:#e6fffa;
}

/* Blue Angels */
:root[data-theme="angels"]{
  --bg:#f5f8ff;
  --surface:#ffffff;
  --surface-alt:#edf3ff;
  --text:#0a1a3a;
  --muted:#425b88;
  --heading:#07112a;
  --primary:#315399;
  --secondary:#5aa5ee;
  --accent:#9fc4ff;
  --card-border:#dbe6ff;
  --button-text:#ffffff;
}

/* === Global application (kept compact; uses !important to win over existing CSS) === */
 }
 }

/* sections / surfaces */
:root[data-theme] .section, 
:root[data-theme] .hero, 
:root[data-theme] .feature,
:root[data-theme] .article-card,
:root[data-theme] .card, 
:root[data-theme] .panel, 
:root[data-theme] .box{
  background:var(--surface) !important; 
  border-color:var(--card-border) !important; 
  color:var(--text) !important;
}
:root[data-theme] .section.alt, 
:root[data-theme] .strip, 
:root[data-theme] .bg-alt{ background:var(--surface-alt) !important; }

/* header/menu stays transparent but inherits text color */
header, .navbar, .site-header, .topbar{ background:transparent !important; box-shadow:none !important; border:none !important; color:var(--text) !important; }
:root[data-theme] header a, 
:root[data-theme] .navbar a{ color:var(--text) !important; }

/* links & buttons */
:root[data-theme] a{ color:var(--primary) !important; }
:root[data-theme] .btn, 
:root[data-theme] .button, 
:root[data-theme] button, 
:root[data-theme] .cta{
  background:var(--primary) !important; 
  color:var(--button-text) !important; 
  border:1px solid var(--primary) !important; 
}
:root[data-theme] .btn.secondary, 
:root[data-theme] .button.secondary{ 
  background:var(--secondary) !important; border-color:var(--secondary) !important;
}
:root[data-theme] .btn-outline, 
:root[data-theme] .button-outline{
  background:transparent !important; 
  color:var(--primary) !important; 
  border-color:var(--primary) !important;
}
:root[data-theme] .badge, .tag{ background:var(--accent) !important; color:#000 !important; }

/* switcher UI */
.theme-switcher{ position:fixed; right:14px; bottom:14px; z-index:9999; background:transparent; border:none; padding:0; }
.theme-switcher .tray{
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--card-border);
  padding:6px 10px; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.theme-switcher .swatch{
  width:22px; height:22px; border-radius:50%; border:2px solid rgba(0,0,0,.15);
  cursor:pointer; display:inline-block;
}
.theme-switcher .swatch.active{ box-shadow:0 0 0 3px rgba(0,0,0,.15) inset, 0 0 0 2px var(--primary); }
/* === Unified Button System (matches newsletter button look) === */
:root{
  --btn-radius: 28px;
  --btn-shadow: 0 6px 18px rgba(0,0,0,.12);
  --btn-hover: 0.97;
}

:root[data-theme] a.button,
:root[data-theme] .button,
:root[data-theme] .btn,
:root[data-theme] .cta,
:root[data-theme] button,
:root[data-theme] input[type="submit"],
:root[data-theme] input[type="button"]{
  background: var(--primary) !important;
  color: var(--button-text) !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--btn-radius) !important;
  padding: 12px 22px !important;
  box-shadow: var(--btn-shadow) !important;
  display: inline-flex; align-items:center; justify-content:center;
  text-decoration: none !important;
}

:root[data-theme] a.button.secondary,
:root[data-theme] .button.secondary,
:root[data-theme] .btn.secondary{
  background: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: var(--button-text) !important;
}

:root[data-theme] a.button:hover,
:root[data-theme] .button:hover,
:root[data-theme] .btn:hover,
:root[data-theme] .cta:hover,
:root[data-theme] button:hover,
:root[data-theme] input[type="submit"]:hover,
:root[data-theme] input[type="button"]:hover{
  filter: brightness(var(--btn-hover)) !important;
}

:root[data-theme] .btn-outline,
:root[data-theme] .button-outline{
  background: transparent !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  box-shadow: none !important;
}

/* === Remove original dark-mode toggle button in header === */
#themeToggle{ display:none !important; }

/* === Override site's button classes when a custom theme is active === */
:root[data-theme] .btn-primary{
  background: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  color: var(--button-text) !important;
  border-radius: var(--btn-radius, 28px) !important;
  box-shadow: var(--btn-shadow, 0 6px 18px rgba(0,0,0,.12)) !important;
}
:root[data-theme] .btn-secondary{
  background: var(--secondary) !important;
  border: 1px solid var(--secondary) !important;
  color: var(--button-text) !important;
  border-radius: var(--btn-radius, 28px) !important;
  box-shadow: var(--btn-shadow, 0 6px 18px rgba(0,0,0,.12)) !important;
}

/* newsletter button (header) should also follow theme */
:root[data-theme] a.bg-primary{
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--button-text) !important;
}

/* link-primary color */
:root[data-theme] .link-primary{ color: var(--primary) !important; }

/* === Remove mobile menu buttons site-wide === */
#menuBtn, #closeMenu { display: none !important; }


}

/* === Keep original site fonts across all themes === */
:root[data-theme] body,
:root[data-theme] p,
:root[data-theme] a,
:root[data-theme] .nav-link,
:root[data-theme] .section-title,
:root[data-theme] .card-article .title,
:root[data-theme] .card-box-title,
:root[data-theme] .btn,
:root[data-theme] .button,
:root[data-theme] .cta,
:root[data-theme] button,
:root[data-theme] input,
:root[data-theme] textarea,
:root[data-theme] select,
:root[data-theme] h1,
:root[data-theme] h2,
:root[data-theme] h3,
:root[data-theme] h4,
:root[data-theme] h5,
:root[data-theme] h6,
:root[data-theme] .heading,
:root[data-theme] .badge,
:root[data-theme] .tag{
  font-family: inherit !important;
}

/* === Ensure backgrounds change with theme even with Tailwind utilities === */
:root[data-theme] body,
:root[data-theme] .bg-background-light,
:root[data-theme] .bg-white,
:root[data-theme] .bg-gray-50{
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

:root[data-theme] .surface,
:root[data-theme] .card,
:root[data-theme] .panel,
:root[data-theme] .box,
:root[data-theme] .card-article,
:root[data-theme] .card-box{
  background-color: var(--surface) !important;
  border-color: var(--card-border) !important;
}

/* Alternate strips */
:root[data-theme] .bg-alt,
:root[data-theme] .section.alt{
  background-color: var(--surface-alt) !important;
}

/* Nav links should always be visible */
:root[data-theme] header a,
:root[data-theme] .nav-link,
:root[data-theme] nav a{
  color: var(--text) !important;
}

/* Fix for Emerald (dark) theme: give header slight translucent background to avoid vanishing over content */
:root[data-theme="emerald"] header{
  background: rgba(6,19,17,0.35) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* === v29: Keep cards transparent across all themes (match Original look) === */

/* === v30: Article cards stay white across all themes === */
:root[data-theme] .card-article{
  background-color: #ffffff !important;
}

/* === v31: Only the cards inside the Strength section remain transparent in all themes === */
:root[data-theme] .section-strength .card-plain{
  background-color: transparent !important;
  box-shadow: none !important;
}


/* === New Theme: Lavender (pastel purples) === */
:root[data-theme="lavender"]{
  --bg:#F4EEFB;
  --surface:#FFFFFF;
  --surface-alt:#EEE6F7;
  --text:#2F2740;
  --muted:#6E5A8A;
  --heading:#2A2240;
  --primary:#A073C4;   /* main button/link */
  --secondary:#C39BDD; /* secondary buttons */
  --accent:#D7B6EA;    /* badges/accents */
  --card-border:#E6D8F3;
  --button-text:#ffffff;
}

/* === v33: Make "text-primary" and +/- symbols follow theme primary color === */
:root[data-theme] .text-primary{ color: var(--primary) !important; }

/* Strength section symbols (+ / -) */
:root[data-theme] .section-strength .title-one-line .symbol{
  color: var(--primary) !important;
}

/* === v34: Strength section paragraph color follows theme === */
:root[data-theme] .section-strength .content{
  color: var(--text) !important;
}

/* === v35: Ensure gray text utilities follow theme text color === */
:root[data-theme] .text-gray-700,
:root[data-theme] .text-gray-600,
:root[data-theme] .text-gray-500,
:root[data-theme] .dark\:text-gray-300,
:root[data-theme] .dark\:text-gray-400{
  color: var(--text) !important;
}