/* =====================================================================
   Core Direction — Light theme layer + theme-toggle styling
   Dark is the default (brand) look and lives in each page's own CSS.
   Everything here only takes effect under html[data-theme="light"].
   ===================================================================== */

/* ---------- Theme toggle button (sun / moon) ---------- */
.cd-theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 auto;
  background:rgba(176,38,255,.10);
  color:#C3D93B;
  border:1.5px solid rgba(195,217,59,.45);
  border-radius:999px;cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease;
}
.cd-theme-toggle:hover{transform:translateY(-1px);border-color:#C3D93B;background:rgba(176,38,255,.18)}
.cd-theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cd-theme-toggle--float{position:fixed;top:14px;right:60px;z-index:1000;background:rgba(13,8,20,.92);backdrop-filter:blur(10px)}
[dir="rtl"] .cd-theme-toggle--float{right:auto;left:60px}
@media(max-width:600px){.cd-theme-toggle{width:34px;height:34px}.cd-theme-toggle svg{width:15px;height:15px}}

/* Light-mode look for BOTH toggles (they live on light chrome now) */
html[data-theme="light"] .cd-theme-toggle,
html[data-theme="light"] .cd-lang-toggle{
  background:rgba(105,15,173,.06);
  color:#690FAD;
  border-color:rgba(105,15,173,.35);
}
html[data-theme="light"] .cd-theme-toggle:hover,
html[data-theme="light"] .cd-lang-toggle:hover{
  border-color:#690FAD;background:rgba(105,15,173,.12);
}

/* ---------- Gradient nav CTA — always white text (both themes) ----------
   The guides' ".nav-links a{color:var(--muted)}" rule out-specifies
   ".btn-grad{color:#fff}", so the "Open the App" / "Download App" pill
   would inherit the muted colour. Force it white in light AND dark. */
nav .nav-cta,
nav a.btn-grad,
nav .navcta .btn.sm,
nav .navcta .btn{ color:#fff !important; }

/* ---------- Always-visible toggle group on the guides nav ----------
   Guides collapse their links behind a hamburger; keep the language +
   theme toggles out of that menu and visible in the bar at all sizes. */
.cd-nav-toggles{display:inline-flex;align-items:center;gap:8px}
nav.main .nav-logo{margin-inline-end:auto}      /* logo left, rest grouped right */
nav.main .cd-nav-toggles{margin-inline-start:18px}
@media(max-width:980px){
  nav.main .wrap{gap:10px}
  nav.main .cd-nav-toggles{margin-inline-start:0;margin-inline-end:10px}
}

/* =====================================================================
   LIGHT — shared design tokens (landing uses --ink/--ivory/--black/…,
   guides use --bg/--surface/--text/…). Setting both here is harmless.
   ===================================================================== */
html[data-theme="light"]{
  /* landing tokens */
  --ink:#1B1230;
  --muted:#5E5478;
  --ivory:#F1EAFB;   /* was #1A1129 — section bands / soft cards */
  --black:#EFE8FB;   /* was #06070E — the "difference" band */
  --bloom:#5E7D00;   /* pear used as text on light surfaces (readable) */
  /* guides tokens */
  --bg:#FBF9FE;
  --bg-2:#F2ECFB;
  --surface:#FFFFFF;
  --surface-2:#F5F0FC;
  --line:rgba(81,42,126,.14);
  --line-bright:rgba(81,42,126,.32);
  --text:#1B1230;
  --faint:#8A7EA6;
}

/* =====================================================================
   LIGHT — LANDING PAGE (index.html)
   ===================================================================== */
html[data-theme="light"] body{background:#FCFAFF !important;color:var(--ink)}

/* Ecosystem strip (inline-styled → needs a class hook + !important) */
html[data-theme="light"] .eco-strip{background:#F1EAFB !important;border-bottom-color:rgba(81,42,126,.14) !important}
html[data-theme="light"] .eco-strip a,
html[data-theme="light"] .eco-strip span{color:#5E5478 !important}
html[data-theme="light"] .eco-strip a:hover{color:#690FAD !important}

/* Nav */
html[data-theme="light"] nav{background:rgba(252,250,255,1) !important;border-bottom-color:rgba(81,42,126,.14)}
html[data-theme="light"] nav .links a{color:#47406A}
html[data-theme="light"] nav .links a:hover{color:#690FAD}

/* Cards / testimonials / feature tiles */
html[data-theme="light"] .card{background:#FFFFFF;border-color:rgba(81,42,126,.12);box-shadow:0 10px 30px rgba(81,42,126,.08)}
html[data-theme="light"] .tcard{background:#FFFFFF;border-color:rgba(81,42,126,.12);box-shadow:0 8px 26px rgba(81,42,126,.08)}
html[data-theme="light"] .tcard p{color:#463C66}
html[data-theme="light"] .tcard .avatar{border-color:rgba(81,42,126,.18)}
html[data-theme="light"] .feat .f{background:#F1EAFB}

/* "Difference" band + generic light-band text */
html[data-theme="light"] .truth{color:var(--ink)}

/* Copy colours that were tuned for dark */
html[data-theme="light"] .lead{color:#5E5478}
html[data-theme="light"] .eyebrow{color:#5E7D00}
html[data-theme="light"] .btn.ghost{color:#690FAD;border-color:var(--hero)}

/* Trust logo tiles keep their own light backgrounds; just soften edges */
html[data-theme="light"] .trust{border-top-color:rgba(81,42,126,.12);border-bottom-color:rgba(81,42,126,.12)}

/* Pricing panel STAYS the branded purple block — re-scope --bloom so the
   pear ticks / eyebrow inside it remain bright on the dark panel. */
html[data-theme="light"] .price{--bloom:#C3D93B}

/* Footer → light */
html[data-theme="light"] footer.cdfoot{background:#F1EAFB;color:#5E5478}
html[data-theme="light"] footer.cdfoot p{color:#5E5478}
html[data-theme="light"] footer.cdfoot h4{color:#1B1230}
html[data-theme="light"] footer.cdfoot a{color:#5E5478}
html[data-theme="light"] footer.cdfoot a:hover{color:#690FAD}
html[data-theme="light"] footer.cdfoot .foot-bot{border-top-color:rgba(81,42,126,.15);color:#8A7EA6}

/* Quiz funnel modal */
html[data-theme="light"] .quiz-mask{background:rgba(252,250,255,.97)}
html[data-theme="light"] .quiz-q{color:#1B1230}
html[data-theme="light"] .quiz-kicker{color:#5E7D00}
html[data-theme="light"] .quiz-bar{background:#E7DEF6}
html[data-theme="light"] .quiz-opt{background:#FFFFFF;border-color:rgba(81,42,126,.18);color:#3B2F55;box-shadow:0 3px 14px rgba(81,42,126,.06)}
html[data-theme="light"] .quiz-opt:hover{border-color:#B026FF}
html[data-theme="light"] .quiz-form input{border-color:rgba(81,42,126,.25);color:#1B1230}
html[data-theme="light"] .quiz-res li{border-bottom-color:rgba(81,42,126,.15);color:#463C66}
html[data-theme="light"] .quiz-res li b{color:#5E7D00}
html[data-theme="light"] .quiz-close,html[data-theme="light"] .quiz-back,html[data-theme="light"] .quiz-note{color:#6B5E86}

/* =====================================================================
   LIGHT — GUIDES (shared style.css + per-page literal accents)
   Most surfaces follow the token overrides above; these handle the
   hardcoded literals.
   ===================================================================== */
html[data-theme="light"] .eco-bar{background:#F1EAFB !important;border-bottom-color:rgba(81,42,126,.14)}
html[data-theme="light"] nav.main{background:rgba(252,250,255,.88) !important;border-bottom-color:rgba(81,42,126,.14)}
html[data-theme="light"] footer{background:#F1EAFB !important;border-top-color:rgba(81,42,126,.14)}

/* Big ambient glows would muddy a light page — fade them right down */
html[data-theme="light"] .glow{opacity:.05 !important}

/* Links & TOC accents were pale-purple/pear for a dark bg → darken */
html[data-theme="light"] .post-body a{color:#B0067A}
html[data-theme="light"] .side-toc a{color:#690FAD}
html[data-theme="light"] .side-toc a:hover,
html[data-theme="light"] .side-toc a.on{color:#E50780}
html[data-theme="light"] .side-toc a.on{border-left-color:#E50780}
html[data-theme="light"] .side-toc summary::before,
html[data-theme="light"] .toc-mobile>summary::before{color:#690FAD}
html[data-theme="light"] .side-toc .toc-label,
html[data-theme="light"] .pager .pager-label{color:#5E7D00}
html[data-theme="light"] .post-body a.btn-ghost{color:#690FAD;border-color:rgba(105,15,173,.35)}
html[data-theme="light"] .post-body a.btn-ghost:hover{border-color:#E50780;color:#690FAD}
html[data-theme="light"] .to-top{background:#FFFFFF;color:#690FAD;border-color:rgba(105,15,173,.30)}
html[data-theme="light"] .toc-mobile{background:#FFFFFF;border-color:rgba(81,42,126,.12)}
html[data-theme="light"] .card .metric-l{color:#6B5E86}
html[data-theme="light"] .nav-logo .holdings-tag{color:#690FAD;border-color:rgba(105,15,173,.35)}

/* =====================================================================
   LIGHT — cookie-consent banner (injected by moe.js)
   ===================================================================== */
html[data-theme="light"] #cd-consent .cdc-card{background:#FFFFFF;color:#1B1230;box-shadow:0 14px 40px rgba(81,42,126,.18);border:1px solid rgba(81,42,126,.12)}
html[data-theme="light"] #cd-consent .cdc-title{color:#1B1230}
html[data-theme="light"] #cd-consent .cdc-text{color:#5E5478}
html[data-theme="light"] #cd-consent .cdc-btn.cdc-ghost{color:#5E5478;border-color:rgba(81,42,126,.28)}