/* ============================================================
   STELNEX — Shared theme (light mode overrides + toggle button)
   Dark is the default (each page's own :root). Light kicks in when
   <html data-theme="light">. Loaded after each page's inline <style>.
   ============================================================ */

/* ---------- Theme toggle button (both modes) ---------- */
.theme-toggle{
  width:40px;height:40px;border-radius:8px;flex-shrink:0;
  background:transparent;border:1px solid var(--border-strong,#303030);
  color:var(--text,#fff);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s,color .2s,transform .2s;
  margin-left:4px;
}
.theme-toggle:hover{border-color:var(--pink,#ff2d87);color:var(--pink,#ff2d87);transform:translateY(-1px)}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
.theme-toggle .i-moon{display:block}
html[data-theme="light"] .theme-toggle .i-sun{display:block}
html[data-theme="light"] .theme-toggle .i-moon{display:none}

/* ============================================================
   LIGHT MODE
   ============================================================ */
html[data-theme="light"]{
  --bg:#ffffff;
  --bg-soft:#f4f5f8;
  --panel:#ffffff;
  --panel-2:#f1f2f5;
  --border:#e6e7ec;
  --border-strong:#d6d8e0;
  --bs:#d6d8e0;
  --text:#0e1016;
  --muted:#5a5c68;
  --blue:#0e1016;          /* homepage aliased blue→white; in light it's ink */
  --blue-dark:#2a2c34;
  /* pink accents unchanged */
}
html[data-theme="light"] body{background:#ffffff;color:#0e1016}

/* nav + header bars */
html[data-theme="light"] nav{background:rgba(255,255,255,.82)!important;border-bottom:1px solid var(--border)}
html[data-theme="light"] .filterbar{background:rgba(255,255,255,.9)!important;border-color:var(--border)}
html[data-theme="light"] .nav-links a{color:#5a5c68}
html[data-theme="light"] .nav-links a:hover,html[data-theme="light"] .nav-links a.active{color:#0e1016}
html[data-theme="light"] .logo-mark{border-color:var(--border)}
html[data-theme="light"] .mobile-toggle{color:#0e1016}
html[data-theme="light"] .nav-links.open{background:rgba(255,255,255,.98)!important}

/* footers (various dark hexes) */
html[data-theme="light"] footer{background:#f4f5f8!important;color:#5a5c68;border-top:1px solid var(--border)}
html[data-theme="light"] footer .logo-text small,
html[data-theme="light"] footer .disclaimer{color:#7a7c88}

/* sections that hardcode a near-black background inline or via class */
html[data-theme="light"] [style*="background:#080808"],
html[data-theme="light"] [style*="background:#070707"],
html[data-theme="light"] [style*="background:#050505"],
html[data-theme="light"] .trust,
html[data-theme="light"] .stat-strip{background:#f4f5f8!important}
html[data-theme="light"] .trust{border-color:var(--border)}

/* generic light text remaps (these hardcode grays on dark) */
html[data-theme="light"] .hero p,
html[data-theme="light"] .hero p.lead,
html[data-theme="light"] .head-left p,html[data-theme="light"] .head-right p,html[data-theme="light"] .head-center p,
html[data-theme="light"] .section-head p,
html[data-theme="light"] .sec-head p,
html[data-theme="light"] .feature-block p,
html[data-theme="light"] .svc p,
html[data-theme="light"] .card p,
html[data-theme="light"] .det-info p,
html[data-theme="light"] .desc .body,
html[data-theme="light"] .pricing-note,
html[data-theme="light"] .updated,
html[data-theme="light"] .t-hero p,
html[data-theme="light"] .blog-hero p{color:#44464f}

/* marquee logos + faint labels */
html[data-theme="light"] .marquee-track svg{fill:#9a9ca6}
html[data-theme="light"] .trust-label,
html[data-theme="light"] .slide-label,
html[data-theme="light"] .stat-label{color:#7a7c88}

/* cards / panels that reference vars already flip; fix hardcoded card insides */
html[data-theme="light"] .card .media,
html[data-theme="light"] .gphoto .imgwrap,
html[data-theme="light"] .project-media,
html[data-theme="light"] .feature-visual{background:#f1f2f5}
html[data-theme="light"] .card h3 a,html[data-theme="light"] .card h3{color:#0e1016}
html[data-theme="light"] .price-badge{background:#fff;color:#0e1016;border-color:var(--border-strong)}

/* buttons: ghost gets dark text + border in light */
html[data-theme="light"] .btn-ghost{color:#0e1016;border-color:var(--border-strong)}
html[data-theme="light"] .btn-ghost:hover{background:#0e1016;color:#fff;border-color:#0e1016}

/* keep code/terminal/dark UI mockups DARK even in light mode (looks intentional) */
html[data-theme="light"] .terminal,
html[data-theme="light"] .code-mock,
html[data-theme="light"] .mock-window,
html[data-theme="light"] .det-media,
html[data-theme="light"] .rack,
html[data-theme="light"] .map-frame{background:#0c0e14!important}

/* shop hero gradient text stays vivid; ensure headings are ink */
html[data-theme="light"] h1,html[data-theme="light"] h2,html[data-theme="light"] h3,html[data-theme="light"] h4{color:#0e1016}
html[data-theme="light"] .serif{color:inherit}

/* inputs */
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea,
html[data-theme="light"] .searchbar input{background:#fff;border-color:var(--border-strong);color:#0e1016}

/* FAQ + misc panels */
html[data-theme="light"] .faq details{background:#fff}
html[data-theme="light"] .faq .ans{color:#44464f}
html[data-theme="light"] .pstep:hover,html[data-theme="light"] .service-card:hover,
html[data-theme="light"] .svc:hover,html[data-theme="light"] .stat-card:hover,
html[data-theme="light"] .price-card:hover,html[data-theme="light"] .test-card:hover{background:#f4f5f8}

/* pink CTA boxes keep white text (no change needed) — just make sure diagonal stays */

/* ---- light-mode bug fixes ---- */
/* stat numbers were white (invisible on white) */
html[data-theme="light"] .stat-card .big{color:#0e1016}
html[data-theme="light"] .stat-num{color:#0e1016}
html[data-theme="light"] .stat-num.pink-text{color:var(--pink)}

/* torn-paper edges: in light mode the teeth must match the light bg, not stay near-black */
html[data-theme="light"] .torn-top::before,
html[data-theme="light"] .torn-bottom::after{background-color:#f4f5f8 !important}

/* keep the decorative diagonal streaks subtle on white */
html[data-theme="light"] .diag-lines{opacity:.4}
html[data-theme="light"] .diag.d1,
html[data-theme="light"] .diag.d3{background:linear-gradient(90deg,transparent,rgba(0,0,0,.10) 50%,transparent)}

/* terminal/impact numbers inside dark panels stay light */
html[data-theme="light"] .terminal .tb,html[data-theme="light"] .mono.tb{color:#7ea0ff}

/* ---- more light-mode text fixes (white-on-white) ---- */
/* pricing */
html[data-theme="light"] .price{color:#0e1016}
html[data-theme="light"] .price-features li{color:#3a3a44}
html[data-theme="light"] .price-card.featured{background:#fff !important}
html[data-theme="light"] .pricing-included{background:#fff5fa !important}
html[data-theme="light"] .pi-items b{color:#0e1016}
html[data-theme="light"] .pi-items span{color:#44464f}
/* testimonials */
html[data-theme="light"] .test-quote{color:#33343c}
html[data-theme="light"] .test-name{color:#0e1016}
/* footer headings */
html[data-theme="light"] .foot-col h5{color:#0e1016}
html[data-theme="light"] .foot-about p{color:#5a5c68}
/* faq emphasis + inline white highlights inside body copy */
html[data-theme="light"] .faq .ans strong{color:#0e1016}
html[data-theme="light"] strong[style*="#fff"]{color:#0e1016 !important}
/* article reading text */
html[data-theme="light"] .content{color:#33343c}
html[data-theme="light"] .lead{color:#1c1d24}
html[data-theme="light"] .art-title,html[data-theme="light"] .content h2,
html[data-theme="light"] .content h3,html[data-theme="light"] .content h4{color:#0e1016}
/* shop card title + item headings */
html[data-theme="light"] .card h3 a,html[data-theme="light"] .det-info h1,
html[data-theme="light"] .rcard h4{color:#0e1016}
/* generic: muted body paragraphs that hardcode pale grey */
html[data-theme="light"] .net-copy>p,html[data-theme="light"] .terminal-side p{color:#44464f}

.stx-cookie{position:fixed;left:20px;right:20px;bottom:20px;z-index:2000;display:flex;align-items:center;gap:14px;max-width:720px;margin:auto;background:#111;border:1px solid #303030;color:#fff;padding:14px 16px;border-radius:8px;box-shadow:0 14px 40px rgba(0,0,0,.35);font-family:'Inter Tight',system-ui,sans-serif;font-size:13px}
.stx-cookie span{flex:1;color:#d0d0d0}.stx-cookie button{border:0;background:#ff2d87;color:#fff;border-radius:6px;padding:9px 14px;font-weight:700;cursor:pointer}.stx-cookie a{color:#ff2d87;text-decoration:none;font-weight:700}
html[data-theme="light"] .stx-cookie{background:#fff;color:#0e1016;border-color:#d6d8e0}.stx-cookie span{line-height:1.4}
@media(max-width:620px){.stx-cookie{flex-direction:column;align-items:flex-start}.stx-cookie button{width:100%}}
