/* ============================================================
   POWERCRUMBS — DESIGN 2026 · LICHTE VARIANT
   Actief via html[data-theme="light"]. Geladen ná de paginastijlen,
   dus wint van inline <style> dankzij hogere specificiteit.

   Techniek: op elk voorheen-donker oppervlak herdefiniëren we de
   "op-donker"-tokens (--bone-text, --mute-dark, --line-dark*) naar hun
   lichte tegenhangers. Alle token-gedreven kinderen (eyebrow, lead,
   links, borders, ghost-knoppen, chips) kantelen daardoor vanzelf mee.
   ============================================================ */

html[data-theme="light"]{
  --surface-canvas:#FAF7F0;   /* warm hoofdcanvas (was ink-900) */
  --surface-deep:#FFFFFF;     /* crisp "instrument"-banden (was ink-950/800) */
  --surface-footer:#EFEADC;   /* warm-diepe footer-toon */
  --ember-300:#5B2CFF;        /* op licht is pale-ember onleesbaar → diep paars;
                                 binnen donkere scopes (hero/radar/datachip) weer pale gezet */
  --risk:#C2371A;             /* rood als tekst leesbaar op wit (vivid blijft in donkere scopes) */
}

/* ---------- 1. oppervlakken: tokens herrichten + basiskleur ---------- */
html[data-theme="light"] body,
html[data-theme="light"] .hero,
html[data-theme="light"] .phero,
html[data-theme="light"] .shero,
html[data-theme="light"] .voids,
html[data-theme="light"] .route,
html[data-theme="light"] .trail,
html[data-theme="light"] .statement,
html[data-theme="light"] .cta,
html[data-theme="light"] .scan,
html[data-theme="light"] .smp,
html[data-theme="light"] .scanwrap,
html[data-theme="light"] .panel,
html[data-theme="light"] .void,
html[data-theme="light"] .chain,
html[data-theme="light"] .lead-form,
html[data-theme="light"] .footer,
html[data-theme="light"] .menu{
  color:var(--ink-900);
  --bone-text:var(--ink-900);
  --mute-dark:var(--mute-light);
  --line-dark:var(--line-light);
  --line-dark-strong:var(--line-light-strong);
}

/* ---------- 2. achtergronden ---------- */
html[data-theme="light"] body{background:var(--surface-canvas)}
html[data-theme="light"] .hero,
html[data-theme="light"] .phero,
html[data-theme="light"] .shero{background:var(--surface-canvas)}
html[data-theme="light"] .voids,
html[data-theme="light"] .route,
html[data-theme="light"] .trail,
html[data-theme="light"] .statement,
html[data-theme="light"] .cta,
html[data-theme="light"] .scan,
html[data-theme="light"] .smp{background:var(--surface-deep)}
html[data-theme="light"] .scanwrap{background:var(--surface-canvas)}
/* kaarten/instrumenten: van donkere gradient naar crisp wit met hairline */
html[data-theme="light"] .panel,
html[data-theme="light"] .void,
html[data-theme="light"] .chain,
html[data-theme="light"] .lead-form{
  background:var(--surface-deep);
  border-color:var(--line-light);
  box-shadow:0 1px 0 rgba(11,15,26,.04);
}
html[data-theme="light"] .void{background:linear-gradient(180deg,#fff,#FBF9F3)}

/* ---------- 3. footer (warm-diep, ink-tekst, paarse merkdetails) ---------- */
html[data-theme="light"] .footer{background:var(--surface-footer)}
html[data-theme="light"] .footer__word{color:var(--ink-900)}
html[data-theme="light"] .footer__word span{color:var(--flare-500)}
html[data-theme="light"] .footer__legal{border-top:0;color:var(--mute-light)}
html[data-theme="light"] .vtrail__foot .note{color:var(--mute-light)}

/* ---------- 4. accent altijd diep-paars op licht (niet de pale variant) ---------- */
html[data-theme="light"] .acc{color:var(--flare-500)}

/* ---------- 5. navigatie: donker-op-licht ---------- */
html[data-theme="light"] .nav .brand{color:var(--ink-900)}
html[data-theme="light"] .nav__links a{color:var(--mute-light)}
html[data-theme="light"] .nav__links a:hover,
html[data-theme="light"] .nav__links a.is-active{color:var(--ink-900)}
html[data-theme="light"] .nav.is-solid{background:rgba(250,247,240,.85);border-color:var(--line-light)}
html[data-theme="light"] .burger span{background:var(--ink-900)}
/* CTA-knop in nav: donkere pil met lichte tekst voor contrast */
html[data-theme="light"] .nav__cta{background:var(--ink-900);color:var(--bone-text)}
html[data-theme="light"] .nav__cta:hover{background:var(--flare-500);color:#fff}
/* kennisartikel-nav is al licht — laat met rust, maar borg consistentie */
html[data-theme="light"] .nav.is-solid{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}

/* ---------- 6. mobiel menu: licht ---------- */
html[data-theme="light"] .menu{background:var(--surface-canvas)}
html[data-theme="light"] .menu a{color:var(--ink-900)}
html[data-theme="light"] .menu .menu__cta{color:var(--flare-500)}
html[data-theme="light"] html.menu-open .burger span{background:var(--ink-900)}

/* ---------- 7. ghost-knoppen: ink-rand op licht ---------- */
html[data-theme="light"] .btn-ghost{border-color:var(--line-light-strong);color:var(--ink-900)}
html[data-theme="light"] .btn-ghost:hover{border-color:var(--ink-900)}

/* ---------- 8. signatuur-accent behouden: radar blijft donker ----------
   De Energy-Radar-kaart blijft bewust navy — één donker "instrument"-vlak
   als merkanker binnen de lichte pagina. Tekst/▼ blijven dus licht. */
html[data-theme="light"] .radar{
  --bone-text:#F4F1E9; --mute-dark:rgba(244,241,233,.60);
  --line-dark:rgba(244,241,233,.10); --ember-300:#B7A4FF;
  color:var(--bone-text);
}
html[data-theme="light"] .radar .acc{color:var(--ember-300)}

/* ---------- 9. grain wat subtieler op licht ---------- */
html[data-theme="light"] .grain::after{opacity:.03}

/* ---------- 9b. paginaspecifieke donkere kaarten/instrumenten → licht ----------
   Card-achtige vlakken: wit met hairline + tokens herrichten zodat inhoud kantelt. */
html[data-theme="light"] .rstep,
html[data-theme="light"] .route__trail,
html[data-theme="light"] .scanbar,
html[data-theme="light"] .fgroup,
html[data-theme="light"] .sit,
html[data-theme="light"] .vtrail,
html[data-theme="light"] .gids,
html[data-theme="light"] .rt,
html[data-theme="light"] .ticker{
  --bone-text:var(--ink-900);
  --mute-dark:var(--mute-light);
  --line-dark:var(--line-light);
  --line-dark-strong:var(--line-light-strong);
  color:var(--ink-900);
}
html[data-theme="light"] .rstep,
html[data-theme="light"] .fgroup,
html[data-theme="light"] .sit{background:#fff;border-color:var(--line-light)}
html[data-theme="light"] .route__trail{background:linear-gradient(180deg,#fff,#FBF9F3);border-color:var(--line-light)}
html[data-theme="light"] .scanbar{background:#fff;border-color:var(--line-light-strong)}
html[data-theme="light"] .vtrail{background:var(--surface-deep)}
html[data-theme="light"] .gids{background:var(--surface-footer)}
html[data-theme="light"] .rt{background:#fff;border-color:var(--line-light)}
/* hero-ticker: lichte glas-balk i.p.v. donkere */
html[data-theme="light"] .ticker{background:rgba(250,247,240,.6);border-color:var(--line-light)}
html[data-theme="light"] .ticker__item{border-color:var(--line-light)}
/* scan: textarea placeholder + focus, donkere toggle → licht */
html[data-theme="light"] .sit::placeholder{color:rgba(11,15,26,.4)}
html[data-theme="light"] .mode__box{background:#fff;border-color:var(--line-light-strong)}
html[data-theme="light"] .mode__box button{color:var(--mute-light)}
html[data-theme="light"] .mode__box button.is-sel{background:var(--flare-500);color:#fff}
/* bewijsvoering: data-chip blijft een donker accent op de lichte stap-rij */
html[data-theme="light"] .step__data{--bone-text:#F4F1E9;--mute-dark:rgba(244,241,233,.6);--ember-300:#B7A4FF}
html[data-theme="light"] .scen button{color:var(--mute-light)}

/* ---------- 10. de schakelaar ---------- */
.theme-switch{position:fixed;right:16px;bottom:16px;z-index:150;display:inline-flex;align-items:center;gap:4px;
  background:rgba(7,10,18,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(244,241,233,.18);border-radius:999px;padding:5px}
html[data-theme="light"] .theme-switch{background:rgba(255,255,255,.9);border-color:rgba(11,15,26,.14);box-shadow:0 6px 24px rgba(11,15,26,.10)}
.theme-switch>span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,233,.62);padding:0 8px 0 12px}
html[data-theme="light"] .theme-switch>span{color:rgba(11,15,26,.62)}
.theme-switch button{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,233,.75);padding:7px 12px;border-radius:999px;cursor:pointer;border:0;background:none;display:inline-flex;align-items:center;gap:6px}
html[data-theme="light"] .theme-switch button{color:rgba(11,15,26,.68)}
.theme-switch button i{width:9px;height:9px;border-radius:50%;flex:none;border:1px solid currentColor}
.theme-switch button[data-t="dark"] i{background:#0B0F1A}
.theme-switch button[data-t="light"] i{background:#FAF7F0}
.theme-switch button.is-sel{background:#5B2CFF;color:#fff}
.theme-switch button.is-sel i{border-color:rgba(255,255,255,.6)}
@media print{.theme-switch{display:none}}
/* Mobiel: compacte schakelaar zonder label, zodat hij de onderste hero-knop niet afdekt (usertest ronde 1). */
@media(max-width:560px){.theme-switch{right:10px;bottom:10px;gap:2px}.theme-switch>span{display:none}.theme-switch button{padding:7px 10px;font-size:9.5px}}

/* ---------- 11. HERO-IMAGES: cinematografisch in BEIDE thema's ---------- */
html[data-theme="light"] .hero,
html[data-theme="light"] .phero,
html[data-theme="light"] .shero{
  background:var(--ink-900); color:#F4F1E9;
  --bone-text:#F4F1E9; --mute-dark:rgba(244,241,233,.6);
  --line-dark:rgba(244,241,233,.10); --line-dark-strong:rgba(244,241,233,.18);
  --ember-300:#B7A4FF;
}
html[data-theme="light"] .hero .acc,
html[data-theme="light"] .phero .acc,
html[data-theme="light"] .shero .acc{color:var(--ember-300)}
html[data-theme="light"] .hero .btn-ghost,
html[data-theme="light"] .phero .btn-ghost,
html[data-theme="light"] .shero .btn-ghost{border-color:rgba(244,241,233,.20);color:#F4F1E9}
html[data-theme="light"] .hero .btn-ghost:hover,
html[data-theme="light"] .phero .btn-ghost:hover,
html[data-theme="light"] .shero .btn-ghost:hover{border-color:#F4F1E9}
/* nav transparant (over de donkere hero) → lichte tekst, ook in licht thema */
html[data-theme="light"] .nav:not(.is-solid) .brand{color:#F4F1E9}
html[data-theme="light"] .nav:not(.is-solid) .nav__links a{color:rgba(244,241,233,.72)}
html[data-theme="light"] .nav:not(.is-solid) .nav__links a:hover{color:#F4F1E9}
html[data-theme="light"] .nav:not(.is-solid) .burger span{background:#F4F1E9}
html[data-theme="light"] .nav:not(.is-solid) .nav__cta{background:#F4F1E9;color:#0B0F1A}
/* ticker zit op de donkere hero → donker glas in beide thema's */
html[data-theme="light"] .ticker{background:rgba(7,10,18,.5);--bone-text:#F4F1E9;--mute-dark:rgba(244,241,233,.6);--line-dark:rgba(244,241,233,.10)}
html[data-theme="light"] .ticker__item{border-color:rgba(244,241,233,.10)}

/* ---------- 12. CONTRAST-FIXES lichte modus ---------- */
/* leesbaar groen als TEKST op licht (dots iets donkerder, prima) */
html[data-theme="light"]{--ok:#1B7D4D}
/* Proof Trail-nodes: donkere kaart → lichte kaart met ink-tekst */
html[data-theme="light"] .node{background:#fff;border-color:var(--line-light);color:var(--ink-900);
  --bone-text:var(--ink-900);--mute-dark:var(--mute-light);--line-dark:var(--line-light)}
html[data-theme="light"] .node:hover{background:#fff;border-color:var(--flare-500)}
html[data-theme="light"] .node__no{color:var(--flare-500)}
/* ember-accentlabels op lichte kaarten → diep paars (pale ember is onleesbaar op wit) */
html[data-theme="light"] .rstep__no,
html[data-theme="light"] .cnode h4{color:var(--flare-500)}
/* inline ember-gekleurde tekstlinks → diep paars in licht thema */
html[data-theme="light"] .tlink[style*="ember-300"]{color:var(--flare-500)}
/* schakelaar: geselecteerde knop houdt witte tekst (specificiteit-fix) */
html[data-theme="light"] .theme-switch button.is-sel{color:#fff}

/* ---------- 13. donkere accent-scopes in licht thema: juiste tokens erbinnen ----------
   Deze vlakken blijven bewust donker (hero/radar/step-chips/ticker). Daarbinnen moet
   groen vivid blijven (donker groen zou onleesbaar zijn op navy) en ember pale. */
html[data-theme="light"] .hero,
html[data-theme="light"] .phero,
html[data-theme="light"] .shero,
html[data-theme="light"] .radar,
html[data-theme="light"] .step__data,
html[data-theme="light"] .step__dot,
html[data-theme="light"] .ticker{
  --ember-300:#B7A4FF;
  --ok:#3FBF7F;
  --risk:#E0512F;
}
/* succes-ring (groen-op-wit): leesbaar groen i.p.v. vivid */
html[data-theme="light"] .ring{border-color:#1B7D4D;color:#1B7D4D}
/* foutmelding-rood leesbaar op wit (komt alleen bij validatiefout in beeld) */
html[data-theme="light"] .lf-error{color:#C2371A}
/* geselecteerde filterpil (kenniscentrum): donkere pil houdt lichte tekst */
html[data-theme="light"] .filters button.is-sel{color:#F4F1E9}

/* ---------- 14. RICHTING B — lichte-thema-varianten (Bouwplan blok A1) ----------
   .zuil-kaart, .keten-kaart en .foto-band-bijschriften staan altijd óp fotografie
   (donkere overlay, thema-onafhankelijk — zie sectie 13 hierboven); alleen .glass,
   .cta-rij en .pill-nav krijgen hier een echte lichte variant. */
html[data-theme="light"] .glass{background:rgba(11,15,26,.05);border-color:rgba(11,15,26,.12)}
/* .glass op een donkere fotokaart (zuil-kaart/keten-kaart) blijft het donkere glaseffect */
html[data-theme="light"] .zuil-kaart .glass,
html[data-theme="light"] .keten-kaart .glass{background:var(--glass-bg);border-color:var(--glass-border)}
html[data-theme="light"] .cta-rij__secundair{color:var(--mute-light)}
html[data-theme="light"] .cta-rij__secundair:hover{color:var(--ink-900)}
html[data-theme="light"] .pill-nav a{color:var(--mute-light)}
html[data-theme="light"] .pill-nav a:hover,
html[data-theme="light"] .pill-nav a.is-active{color:var(--ink-900);background:rgba(11,15,26,.06)}
html[data-theme="light"] .pill-nav a.is-cta{background:var(--ink-900);color:var(--bone-text)}
html[data-theme="light"] .pill-nav a.is-cta:hover{background:var(--accent);color:#fff}
/* .ellen: op licht een witte kaart met lichte hairline; knop-rand volgt de ghost-knop */
html[data-theme="light"] .ellen{background:var(--surface-deep);border-color:var(--line-light)}
html[data-theme="light"] .ellen__foto{border-color:var(--line-light-strong)}
html[data-theme="light"] .ellen .btn-ghost{border-color:var(--line-light-strong);color:var(--ink-900)}
html[data-theme="light"] .ellen .btn-ghost:hover{border-color:var(--ink-900)}
html[data-theme="light"] .ellen .btn[aria-disabled="true"]:hover{border-color:var(--line-light-strong)}
html[data-theme="light"] .footer__col .ellen--voet{background:none;border:0}

/* ---------- 15. RICHTING B — paginalayouts (Bouwplan blok B) ----------
   .keten-split__media, .glass-kaart__img en .keten-kaart liggen op fotografie en blijven donker;
   de glaspanelen ernaast volgen .glass (licht). Accent-soft is te bleek op licht → diep paars. */
html[data-theme="light"] .keten-split__panel,
html[data-theme="light"] .glass-kaart,
html[data-theme="light"] .glass-rij,
html[data-theme="light"] .komkijken__panel,
html[data-theme="light"] .bezoek__aanmelden,
html[data-theme="light"] .tekst-blok{
  --bone-text:var(--ink-900);
  --mute-dark:var(--mute-light);
  --line-dark:var(--line-light);
  --line-dark-strong:var(--line-light-strong);
  --accent-soft:var(--flare-500);
  color:var(--ink-900);
}
html[data-theme="light"] .keten-kaart__body .tlink{color:var(--accent-soft)}
html[data-theme="light"] .spec-tabel th{color:var(--mute-light)}
html[data-theme="light"] .spec-tabel td{color:var(--ink-900)}
html[data-theme="light"] .spec-tabel th,
html[data-theme="light"] .spec-tabel td{border-color:var(--line-light)}
html[data-theme="light"] .lf-field input,
html[data-theme="light"] .lf-field textarea{background:#fff;border-color:var(--line-light-strong)}
html[data-theme="light"] .lf-consent a{color:var(--flare-500)}
html[data-theme="light"] .sectie--diep{background:var(--surface-deep)}
html[data-theme="light"] .footer__about p a{text-decoration-color:var(--flare-500)}

/* ---------- 14. donkere vulling op licht: tekst altijd licht ----------
   In het lichte thema wordt --bone-text ink-900 (donker). Elk element dat
   --bone-text als VULLING gebruikt met donkere tekst (ink-950) verliest zijn
   tekst: geselecteerde keuzeknoppen in scan/prijsindicator/businesscase,
   de nav-CTA en de pill-nav-CTA. Hier krijgt de tekst de lichte bone-tint. */
html[data-theme="light"] .opt.is-sel{color:#F4F1E9}
html[data-theme="light"] .nav__cta{color:#F4F1E9}
html[data-theme="light"] .pill-nav a.is-cta{color:#F4F1E9}

/* 15. Onderregel onder de CTA-rij: op donker rgba(bone,.4), in het lichte thema onleesbaar. */
html[data-theme="light"] .cta .sub{color:var(--mute-light)}
html[data-theme="light"] .ellen__uitweg a:hover{color:var(--ink-900)}