/* ==========================================================================
   Bilalify — theme overrides: dark (default) | blue | light
   Loaded after main CSS. The active theme is set on <html data-theme="...">
   by a no-flash inline script in <head> (reads localStorage 'bilalify_theme').
   Dark theme = main.css :root defaults; only blue/light are overridden here.
   ========================================================================== */

/* ---------- Light theme: warm white + lime ---------- */
html[data-theme="light"] {
  --bg: #FAFAF4;
  --bg-2: #F1F2E8;
  --bg-soft: #EBEDDD;
  --panel: #FFFFFF;
  --ink: #141609;
  --ink-2: #5B6046;
  --ink-3: #93987C;
  --line: rgba(20, 22, 9, 0.13);
  --line-soft: rgba(20, 22, 9, 0.08);
  --accent: #C9F31D;
  --accent-ink: #141609;
  --accent-text: #5E8A1E;
  --accent-dim: rgba(140, 180, 20, 0.10);
  --accent-line: rgba(140, 180, 20, 0.42);
  --success: #1D8127;
  --success-bg: rgba(29, 129, 39, 0.08);
  --amber: #9A6700;
  --amber-bg: rgba(154, 103, 0, 0.08);
  --red: #D70015;
  --red-bg: rgba(215, 0, 21, 0.07);
  --info: #0066CC;
  --info-bg: rgba(0, 102, 204, 0.08);
}

/* ---------- Blue theme: soft blue-white + #1668DC ---------- */
html[data-theme="blue"] {
  --bg: #F3F6FB;
  --bg-2: #E9EFF7;
  --bg-soft: #E3EAF3;
  --panel: #FFFFFF;
  --ink: #0B1526;
  --ink-2: #4A5B76;
  --ink-3: #8494AB;
  --line: rgba(11, 21, 38, 0.13);
  --line-soft: rgba(11, 21, 38, 0.08);
  --accent: #1668DC;
  --accent-ink: #FFFFFF;
  --accent-text: #1668DC;
  --accent-dim: rgba(22, 104, 220, 0.08);
  --accent-line: rgba(22, 104, 220, 0.38);
  --success: #1D8127;
  --success-bg: rgba(29, 129, 39, 0.08);
  --amber: #9A6700;
  --amber-bg: rgba(154, 103, 0, 0.08);
  --red: #D70015;
  --red-bg: rgba(215, 0, 21, 0.07);
  --info: #1668DC;
  --info-bg: rgba(22, 104, 220, 0.08);
}

/* ---------- Light/blue: header + mobile nav (hardcoded dark in main.css) ---------- */
html[data-theme="light"] .site-header,
html[data-theme="blue"] .site-header { background: rgba(255, 255, 255, 0.72); }
html[data-theme="light"] .site-header.scrolled,
html[data-theme="blue"] .site-header.scrolled { background: rgba(255, 255, 255, 0.92); }
html[data-theme="light"] .site-header:has(.nav-toggle[aria-expanded="true"]) .site-nav,
html[data-theme="blue"] .site-header:has(.nav-toggle[aria-expanded="true"]) .site-nav {
  background: rgba(255, 255, 255, 0.98);
}

/* ---------- Light theme: readable accent text on light surfaces ----------
   Bright lime (#C9F31D) is unreadable as text on white, so light-surface
   accent text uses the darker --accent-text. Dark-surface spots (footer,
   preloader, admin, cta-band) intentionally keep the bright --accent. */
html[data-theme="light"] a,
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .accent,
html[data-theme="light"] .text-link,
html[data-theme="light"] .card-link,
html[data-theme="light"] .site-nav a.active,
html[data-theme="light"] .hero h1 .accent,
html[data-theme="light"] .hero-stats dt,
html[data-theme="light"] .service-card .service-icon,
html[data-theme="light"] .quote-card blockquote::before,
html[data-theme="light"] .price-featured .price,
html[data-theme="light"] .check-list li svg,
html[data-theme="light"] .faq[open] summary::after,
html[data-theme="light"] .service-row-icon,
html[data-theme="light"] .rich-text li::marker,
html[data-theme="light"] .rich-text a,
html[data-theme="light"] a.tag-link,
html[data-theme="light"] .contact-lines dd a,
html[data-theme="light"] .btn-secondary:hover {
  color: var(--accent-text);
}

/* ---------- Light/blue: hero art tuned for light backgrounds ---------- */
html[data-theme="light"] .hero,
html[data-theme="blue"] .hero {
  background:
    radial-gradient(52% 42% at 82% 30%, var(--accent-dim), transparent 70%),
    var(--bg);
}
html[data-theme="light"] .hero::before,
html[data-theme="blue"] .hero::before {
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
}
html[data-theme="light"] .hero::after {
  background: radial-gradient(circle at 38% 36%, #f4ffb8 0 2%, var(--accent) 3% 10%, #a8d93a 28%, #f2f7da 52%, transparent 68%);
  opacity: 0.65;
}
html[data-theme="blue"] .hero::after {
  background: radial-gradient(circle at 38% 36%, #d8e9ff 0 2%, var(--accent) 3% 10%, #9cc2f2 28%, #e9f2fd 52%, transparent 68%);
  opacity: 0.65;
}

/* ---------- Light/blue: hardcoded dark leftovers ---------- */
html[data-theme="light"] .btn-primary:hover { background: #aed41a; color: var(--accent-ink); }
html[data-theme="blue"] .btn-primary:hover { background: #0f5cc4; color: #fff; }
html[data-theme="light"] .btn-danger:hover,
html[data-theme="blue"] .btn-danger:hover { color: #fff; }
/* cta-band button sits on a dark band in every theme; blue theme's
   --accent-ink is white, so pin the button to dark explicitly */
html[data-theme="blue"] .cta-band .btn-primary { background: #0B1526; color: #fff; }
html[data-theme="blue"] .cta-band .btn-primary:hover { background: #16263f; color: #fff; }

/* ==========================================================================
   Theme switch UI (ported from the PHP build)
   ========================================================================== */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--bg-soft);
}
.theme-switch button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: 700 12px/1 var(--font);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.theme-switch button:hover { color: var(--ink); }
.theme-switch button .tsw {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.theme-switch button[data-theme-set="dark"] .tsw { background: #0A0A0B; box-shadow: 0 0 0 2px #D2FF00; }
.theme-switch button[data-theme-set="blue"] .tsw { background: #1668DC; }
.theme-switch button[data-theme-set="light"] .tsw { background: #C9F31D; }
.theme-switch button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}
.theme-switch .tsw-lbl { display: none; }
@media (min-width: 1100px) {
  .theme-switch .tsw-lbl { display: inline; }
}