/* ============================================================
   Mozaiik — dark theme layer + theme toggle control
   Applied via html[data-theme="dark"]; light is the default.
   Dark values measured from the production platform
   (app.dev.mozaiik.euristiq.dev): near-black neutral ground,
   near-white ink, teal lifted to #7CC4BB for text on dark.
   ============================================================ */

/* ── Toggle button (both themes) ── */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:100px;border:1px solid rgba(25,34,45,.14);background:transparent;cursor:pointer;padding:0;transition:border-color .3s,background .3s,transform .3s;color:#4a5568}
.theme-toggle:hover{border-color:#53A49A;color:#53A49A;transform:translateY(-1px)}
.theme-toggle svg{width:16px;height:16px;display:block}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
html[data-theme="dark"] .theme-toggle{border-color:rgba(255,255,255,.22);color:#aeb6c2}
html[data-theme="dark"] .theme-toggle:hover{border-color:#7CC4BB;color:#7CC4BB}
html[data-theme="dark"] .theme-toggle .icon-sun{display:block}
html[data-theme="dark"] .theme-toggle .icon-moon{display:none}

/* ── Core variable flips ── */
html[data-theme="dark"]{
  color-scheme:dark;
  --white:#171717;--cream:#171717;--cream-dark:#1c1c1c;--warm-white:#171717;
  --text-dark:#f2f4f6;--text-mid:#a6a9ad;--text-light:#7d8084;
  --border:rgba(255,255,255,.12);
  --slate-pale:#2e4a46;
}

/* ── Base ── */
html[data-theme="dark"] body{background:#171717;color:var(--text-dark)}
html[data-theme="dark"] ::selection{background:rgba(124,196,187,.22);color:#f2f4f6}

/* ── Nav ── */
html[data-theme="dark"] nav{background:rgba(22,22,22,.92);border-bottom:none}
html[data-theme="dark"] nav.scrolled{background:rgba(22,22,22,.96);box-shadow:0 2px 20px rgba(0,0,0,.4)}
html[data-theme="dark"] .nav-links a{color:#e8ecf2}
html[data-theme="dark"] .nav-links a:hover{color:#7CC4BB}
html[data-theme="dark"] .nav-logo-text{color:#fff}
html[data-theme="dark"] .nav-links{background:transparent}

/* Mobile nav dropdown panels (white in light mode) */
@media (max-width:900px){
  html[data-theme="dark"] .nav-links{background:rgba(22,22,22,.98)}
}

/* ── Shared sections: heroes, CTA bands, prose grounds ── */
html[data-theme="dark"] .hero,
html[data-theme="dark"] .article-hero,
html[data-theme="dark"] .blog-hero,
html[data-theme="dark"] .faq-hero,
html[data-theme="dark"] .manifesto-hero,
html[data-theme="dark"] .pricing-hero,
html[data-theme="dark"] .contact-page,
html[data-theme="dark"] .features,
html[data-theme="dark"] .blog-section,
html[data-theme="dark"] .faq-content,
html[data-theme="dark"] .manifesto-content,
html[data-theme="dark"] .manifesto-section,
html[data-theme="dark"] .how-we-price,
html[data-theme="dark"] .newsletter-section,
html[data-theme="dark"] .pilot-proof{background:#171717;border-top-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .pilot-proof-label{color:#7CC4BB}
html[data-theme="dark"] .cta-section,
html[data-theme="dark"] .faq-cta{background:#171717}

/* ── Cards / raised surfaces ── */
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .contact-form,
html[data-theme="dark"] .pull-stat,
html[data-theme="dark"] .comp-new{background:#1f1f1f;border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .manifesto-label{background:#1f1f1f;border-color:rgba(255,255,255,.12)}

/* Homepage hero product mock */
html[data-theme="dark"] .hero-shot-main,
html[data-theme="dark"] .hero-shot-float{background:#1f1f1f;border-color:rgba(255,255,255,.1);box-shadow:0 30px 80px rgba(0,0,0,.5)}
html[data-theme="dark"] .s-title.light{background:transparent}

/* ── Forms (contact + newsletter) ── */
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .newsletter-form input[type="email"]{background:#1f1f1f;border-color:rgba(255,255,255,.14);color:#f2f4f6}
html[data-theme="dark"] .form-group input:focus,
html[data-theme="dark"] .form-group textarea:focus{border-color:#7CC4BB}
html[data-theme="dark"] .form-group input:focus+label,
html[data-theme="dark"] .form-group textarea:focus+label,
html[data-theme="dark"] .form-group input:not(:placeholder-shown)+label,
html[data-theme="dark"] .form-group textarea:not(:placeholder-shown)+label{background:#1f1f1f;color:#aeb6c2}

/* ── var(--white)-as-TEXT collateral: these sit on dark surfaces in
   both themes, so the dark var flip turned them near-black ── */
html[data-theme="dark"] .footer-col h4{color:#f2f4f6}
html[data-theme="dark"] .cookie-decline:hover{color:#f2f4f6}

/* ── Cookie banner ── */
html[data-theme="dark"] .cookie-banner{background:#1f1f1f;border-color:rgba(255,255,255,.12);color:#e8ecf2}
html[data-theme="dark"] .cookie-accept:hover{background:#53A49A;color:#fff}

/* ── Logo: wordmark letters use currentColor; the "ai" group lifts
   from #52a49a to the platform's dark-mode teal so it stays vivid
   against #171717 instead of going muddy ── */
html[data-theme="dark"] .nav-logo{color:#f2f4f6}
html[data-theme="dark"] .nav-logo-svg{color:#f2f4f6}
html[data-theme="dark"] .nav-logo-svg g[fill="#52a49a"],
html[data-theme="dark"] .nav-logo svg g[fill="#52a49a"]{fill:#7CC4BB}
html[data-theme="dark"] footer svg g[fill="#52a49a"]{fill:#7CC4BB}

/* ── Buttons ── */
html[data-theme="dark"] .btn-ghost{color:#f2f4f6;border-color:rgba(255,255,255,.28)}
html[data-theme="dark"] .btn-ghost:hover{border-color:#7CC4BB;color:#7CC4BB}

/* ── Pop: dark-mode luminance (platform-style glow) ── */
html[data-theme="dark"] .hero h1 em{color:#7CC4BB;text-shadow:0 0 44px rgba(124,196,187,.4)}
html[data-theme="dark"] .pilot-proof-label{color:#7CC4BB;text-shadow:0 0 24px rgba(124,196,187,.35)}
html[data-theme="dark"] .page-eyebrow{color:#7CC4BB}
html[data-theme="dark"] .particle{filter:brightness(1.6) saturate(1.15)}

/* ── Accent text lift: teal reads brighter on dark ── */
html[data-theme="dark"] .hero h1 .accent,
html[data-theme="dark"] h1 .accent,
html[data-theme="dark"] .logo-ai{color:#7CC4BB}

/* ── Manifesto: pastel bands + layer diagram (hardcoded light) ── */
html[data-theme="dark"] .stat-section,
html[data-theme="dark"] .manifesto-finale{background:#1a1a1a}
html[data-theme="dark"] .layer-top{background:#1f1f1f;border-color:rgba(124,196,187,.18)}
html[data-theme="dark"] .layer-mid{background:#1e2422;border-color:rgba(124,196,187,.45);box-shadow:0 0 30px rgba(83,164,154,.18),0 8px 32px rgba(0,0,0,.3)}
html[data-theme="dark"] .layer-bottom{background:#1f1f1f;border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .layer-bottom .layer-badge{color:#aeb6c2;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .layer-top .layer-badge{color:#7CC4BB}

/* ── Navy-as-text usages (invisible on dark without this) ── */
html[data-theme="dark"] .manifesto-hero h1,
html[data-theme="dark"] .comp-new .comp-card-title,
html[data-theme="dark"] .finale-values{color:#f2f4f6}
html[data-theme="dark"] .comp-header .s-title em,
html[data-theme="dark"] .faq-cta h2 em,
html[data-theme="dark"] .how-header h2 em,
html[data-theme="dark"] .manifesto-section h2 em{color:#c7ccd4}
html[data-theme="dark"] .features .label,
html[data-theme="dark"] .ai-intel .label,
html[data-theme="dark"] .mozaiik-label,
html[data-theme="dark"] .ai-coming-badge{color:#7CC4BB}
html[data-theme="dark"] .consent-label a{color:#7CC4BB}
html[data-theme="dark"] .consent-note a:hover{color:#7CC4BB}
html[data-theme="dark"] .consent-label input[type="checkbox"]{accent-color:#53A49A}
html[data-theme="dark"] .form-success svg{color:#7CC4BB}

/* ── Hairline borders that used ink-alpha (invisible on dark) ── */
html[data-theme="dark"] [style*="rgba(25,34,45"]{border-color:rgba(255,255,255,.1)}

/* ── Images/screenshots: soften pure-white product shots on dark ── */
html[data-theme="dark"] .hero img,
html[data-theme="dark"] .features img{filter:brightness(.92)}

/* Trusted-by strip */
html[data-theme="dark"] .ipw-logo .ipw-w{fill:#f2f4f6}

/* Platform-style depth: faint grid on dark hero + CTA */
html[data-theme="dark"] .hero,
html[data-theme="dark"] .cta-section{background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:72px 72px}

/* ============================================================
   CANONICAL PRIMARY BUTTON — one rule for every primary button.
   Light: #171717 pill, white text. Dark: #f2f4f6 pill, dark text.
   Hover (both): teal #53A49A, white text. New buttons: add the
   class here, never write per-button dark rules again.
   ============================================================ */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .nav-cta,
html[data-theme="dark"] .page-cta,
html[data-theme="dark"] .thank-you-btn,
html[data-theme="dark"] .btn-glow,
html[data-theme="dark"] .newsletter-form button,
html[data-theme="dark"] .form-submit button{background:#f2f4f6;border-color:#f2f4f6;color:#171717!important}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .nav-cta:hover,
html[data-theme="dark"] .page-cta:hover,
html[data-theme="dark"] .thank-you-btn:hover,
html[data-theme="dark"] .btn-glow:hover,
html[data-theme="dark"] .newsletter-form button:hover,
html[data-theme="dark"] .form-submit button:hover{background:#53A49A!important;border-color:#53A49A!important;color:#fff!important;box-shadow:0 8px 32px rgba(83,164,154,.35)}