/* ─────────────────────────────────────────────────────────────────────────────
   MARKETING LIGHT THEME
   Public pages (landing / pricing / features / about) carry their own inline
   <style> dark design and do NOT load the design-system tokens. This sheet is
   linked AFTER each page's inline styles and only adds `:root[data-theme="light"]`
   overrides — attribute selectors win on specificity, so the dark rules stay the
   default and light simply layers on top. Brand accents (green/gold/gradients)
   are kept; only dark surfaces + light/grey text flip so no content is lost.
   ───────────────────────────────────────────────────────────────────────────── */

:root[data-theme="light"] { color-scheme: light; }

/* ── Base ── */
:root[data-theme="light"] body { background: #f5f6f8; color: #16161f; }

/* ── Nav ── */
:root[data-theme="light"] nav { background: rgba(255,255,255,0.9); border-bottom: 1px solid rgba(0,0,0,0.08); }
:root[data-theme="light"] .nav-brand { color: #16161f; }
:root[data-theme="light"] .nav-brand span { color: #a87900; }
:root[data-theme="light"] .btn-outline { border: 1px solid rgba(0,0,0,0.2); color: #44464f; }
:root[data-theme="light"] .nav-toggle { color: #44464f; border-color: rgba(0,0,0,0.2); }

/* ── Hero ── */
:root[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse at 20% 60%, rgba(0,106,78,0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(244,42,65,0.07) 0%, transparent 55%),
    #f5f6f8;
}
:root[data-theme="light"] .hero h1 { color: #16161f; }
:root[data-theme="light"] .hero-sub { color: #44464f; }
:root[data-theme="light"] .hero-badge { background: rgba(0,106,78,0.10); border-color: rgba(0,106,78,0.35); color: #006a4e; }
:root[data-theme="light"] .btn-hero-secondary { border: 1px solid rgba(0,0,0,0.2); color: #44464f; }
:root[data-theme="light"] .btn-hero-secondary:hover { border-color: rgba(0,0,0,0.45); color: #16161f; }
:root[data-theme="light"] .hero-cta-note { color: #6b6e78; }
:root[data-theme="light"] .hero-stat .num { color: #a87900; }
:root[data-theme="light"] .hero-stat .lbl { color: #6b6e78; }

/* ── Proof bar ── */
:root[data-theme="light"] .proof-bar { background: rgba(0,106,78,0.06); color: #44464f; }
:root[data-theme="light"] .proof-bar strong { color: #16161f; }

/* ── Section commons ── */
:root[data-theme="light"] .section-title { color: #16161f; }
:root[data-theme="light"] .section-sub { color: #44464f; }

/* ── Tinted section bands ── */
:root[data-theme="light"] .features,
:root[data-theme="light"] .use-cases,
:root[data-theme="light"] .pricing { background: #eef0f4; }
:root[data-theme="light"] .app-section { background: #eef0f4; }

/* ── Cards (features / use-cases / why / pricing) ── */
:root[data-theme="light"] .feat-card,
:root[data-theme="light"] .use-case-tile,
:root[data-theme="light"] .why-col,
:root[data-theme="light"] .price-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
}
:root[data-theme="light"] .feat-card h3,
:root[data-theme="light"] .use-case-tile h3,
:root[data-theme="light"] .why-col h3,
:root[data-theme="light"] .step h3 { color: #16161f; }
:root[data-theme="light"] .feat-card p,
:root[data-theme="light"] .step p,
:root[data-theme="light"] .section-sub { color: #44464f; }
:root[data-theme="light"] .use-case-tile p { color: #6b6e78; }

/* ── Why grid ── */
:root[data-theme="light"] .why-col.highlight { background: linear-gradient(160deg, #e8f5ef, #ffffff); }
:root[data-theme="light"] .why-col.highlight .why-col-label { color: #006a4e; }
:root[data-theme="light"] .why-col:not(.highlight) .why-col-label { color: #6b6e78; }
:root[data-theme="light"] .why-list li { color: #44464f; border-bottom-color: rgba(0,0,0,0.06); }
:root[data-theme="light"] .why-list li::before { color: #006a4e; }
:root[data-theme="light"] .why-col:not(.highlight) .why-list li { color: #6b6e78; }
:root[data-theme="light"] .why-col:not(.highlight) .why-list li::before { color: #c4c4cc; }

/* ── Pricing ── */
:root[data-theme="light"] .pricing-note,
:root[data-theme="light"] .price-usd,
:root[data-theme="light"] .price-period { color: #6b6e78; }
:root[data-theme="light"] .price-card.popular { background: linear-gradient(160deg, #fffaf0, #ffffff); }
:root[data-theme="light"] .price-tier { color: #44464f; }
:root[data-theme="light"] .price-amount { color: #16161f; }
:root[data-theme="light"] .price-amount span { color: #6b6e78; }
:root[data-theme="light"] .price-features li { color: #44464f; border-bottom-color: rgba(0,0,0,0.06); }
:root[data-theme="light"] .price-features li::before { color: #006a4e; }
:root[data-theme="light"] .price-features li.miss { color: #6b6e78; }
:root[data-theme="light"] .price-features li.miss::before { color: #c4c4cc; }
:root[data-theme="light"] .btn-price-outline { border: 1px solid rgba(0,0,0,0.2); color: #44464f; }

/* ── Footer CTA + footer ── */
:root[data-theme="light"] .footer-cta { background: linear-gradient(135deg, rgba(0,106,78,0.10), rgba(244,42,65,0.06)); }
:root[data-theme="light"] .footer-cta h2 { color: #16161f; }
:root[data-theme="light"] .footer-cta p { color: #44464f; }
:root[data-theme="light"] .footer-cta .proof-link { color: #006a4e; border-bottom-color: rgba(0,106,78,0.4); }
:root[data-theme="light"] footer { background: #e4e7ec; border-top: 1px solid rgba(0,0,0,0.06); }
:root[data-theme="light"] .footer-brand .brand-name { color: #16161f; }
:root[data-theme="light"] .footer-brand .brand-name span { color: #a87900; }
:root[data-theme="light"] .footer-brand p { color: #6b6e78; }
:root[data-theme="light"] .footer-brand a,
:root[data-theme="light"] .footer-col a { color: #44464f; }
:root[data-theme="light"] .footer-brand a:hover,
:root[data-theme="light"] .footer-col a:hover { color: #16161f; }
:root[data-theme="light"] .footer-col h4 { color: #6b6e78; }
:root[data-theme="light"] .footer-bottom { border-top: 1px solid rgba(0,0,0,0.06); color: #6b6e78; }
:root[data-theme="light"] .footer-bottom a { color: #6b6e78; }
:root[data-theme="light"] .footer-bottom a:hover { color: #16161f; }

/* ── Theme toggle button (added to the marketing nav) ── */
.nav-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: #ccc;
  width: 38px; height: 38px; border-radius: 8px;
  cursor: pointer; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-toggle:hover { opacity: 0.85; }

/* ── Page-specific dark containers (pricing / features / about) ──────────────
   These set an explicit dark background; on light their inherited text would go
   dark-on-dark, so flip the surface + light/grey text. Brand accents kept. */
:root[data-theme="light"] .nav-hamburger span { background: #44464f; }

/* Full-screen mobile menu */
:root[data-theme="light"] .mobile-nav { background: #f5f6f8; }
:root[data-theme="light"] .mobile-nav a { color: #16161f; }
:root[data-theme="light"] .mobile-nav-overlay { background: rgba(245,246,248,0.98); }
:root[data-theme="light"] .mobile-nav-overlay a { color: #16161f; border-color: rgba(0,0,0,0.1); }
:root[data-theme="light"] .mobile-nav-overlay a:hover { background: rgba(0,0,0,0.05); }

/* Pricing: billing toggle, comparison category rows, FAQ */
:root[data-theme="light"] .toggle-btn { background: #e4e7ec; border-color: rgba(0,0,0,0.12); }
:root[data-theme="light"] .toggle-btn button { color: #44464f; }
:root[data-theme="light"] .cat-row td { background: #e4e7ec; color: #a87900; }
:root[data-theme="light"] .faq-item { background: #ffffff; border-color: rgba(0,0,0,0.08); }
:root[data-theme="light"] .faq-item p { color: #44464f; }

/* About: pull-quote + proof card */
:root[data-theme="light"] .quote { background: #ffffff; color: #44464f; }
:root[data-theme="light"] .proof { background: #ffffff; border-color: rgba(0,0,0,0.08); }
:root[data-theme="light"] .proof a { color: #006a4e; }

/* Theme toggle row inside the mobile hamburger menu */
.mobile-theme-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 700;
  padding: 12px 28px; border-radius: 12px;
  background: transparent; border: 1px solid rgba(255,255,255,0.15);
  color: #e8e8f0; cursor: pointer; width: 260px; justify-content: center;
}
.mobile-theme-btn:hover { background: rgba(255,255,255,0.06); }
:root[data-theme="light"] .mobile-theme-btn { color: #16161f; border-color: rgba(0,0,0,0.12); }
:root[data-theme="light"] .mobile-theme-btn:hover { background: rgba(0,0,0,0.05); }

/* Close (✕) button inside the full-screen mobile menu (pricing/features/about) */
.mobile-nav-close {
  position: absolute; top: 16px; right: 20px;
  background: none; border: none; cursor: pointer;
  font-size: 30px; line-height: 1; color: #e8e8f0; padding: 6px;
}
:root[data-theme="light"] .mobile-nav-close { color: #16161f; }