/* =============================================================
   RADURA — licht thema
   Wordt geactiveerd met <html data-theme="light"> (schakelaar in
   de voet van de pagina). Het donkere thema blijft de standaard.
   Alleen de variabelen uit brandkit/brand.css worden herschreven,
   plus de plekken waar de pagina een vaste kleur gebruikt.
   Hero, citaatband en de blauwe vlakken blijven donker/blauw:
   daar staat tekst op een foto of op logoblauw.
   ============================================================= */

html[data-theme="light"]{
  --bg:#F6F7FB;
  --panel:#FFFFFF;
  --panel-2:#EBEEF6;
  --blue-lit:#3A3AF5;
  --blue-txt:#0000C4;
  --text:#0B0D14;
  --text-2:rgba(11,13,20,.78);
  --text-3:rgba(11,13,20,.62);
  --hair:rgba(11,13,20,.24);
  --hair-2:rgba(11,13,20,.11);
  --fout:#B3261E;
  color-scheme:light;
}

/* vlakken die donker of blauw blijven: eigen (lichte) tekstkleuren */
html[data-theme="light"] .home .hero,
html[data-theme="light"] .citaat,
html[data-theme="light"] .vlak.mid,
html[data-theme="light"] .home .top:not(.vast){
  --text:#FFFFFF;
  --text-2:rgba(255,255,255,.8);
  --text-3:rgba(255,255,255,.62);
  --hair:rgba(255,255,255,.18);
  --hair-2:rgba(255,255,255,.1);
  --blue-txt:#B4B8FF;
  --blue-lit:#6D6DFF;
  color:#FFFFFF;
}
html[data-theme="light"] .vlak.mid{--blue-txt:#FFFFFF}

/* kop */
html[data-theme="light"] .top.vast{background:rgba(246,247,251,.93)}
html[data-theme="light"] .nav a:hover,
html[data-theme="light"] .nav a[aria-current="true"]{color:var(--text)}
html[data-theme="light"] .taal button[aria-pressed="true"],
html[data-theme="light"] .taal button:hover{color:var(--text)}
html[data-theme="light"] .menu-toggle span{background:var(--text)}
html[data-theme="light"] .btn.ghost{color:var(--text)}
html[data-theme="light"] .btn.licht{background:var(--text);border-color:var(--text);color:#fff}
html[data-theme="light"] .btn.licht:hover{background:rgba(11,13,20,.86)}
@media (max-width:960px){
  html[data-theme="light"] .top.vast .nav{background:rgba(246,247,251,.98)}
  html[data-theme="light"] .home .top:not(.vast) .nav{background:rgba(11,13,20,.97)}
}

/* logo: blauw woordmerk op licht, het lichte woordmerk op foto/donker */
html[data-theme="light"] .brand img,
html[data-theme="light"] .foot img{content:url(logo-licht.png)}
html[data-theme="light"] .home .top:not(.vast) .brand img{content:url(logo-donker.png)}

/* zijbalk met sociale links */
html[data-theme="light"] .rail-links{background:rgba(246,247,251,.82)}
html[data-theme="light"] .rail-links a:hover{color:var(--text)}

/* hero */
html[data-theme="light"] .hero-link a:hover{color:#fff}

/* machinetabel */
html[data-theme="light"] .spook{-webkit-text-stroke-color:rgba(11,13,20,.08)}
html[data-theme="light"] td:first-child{color:var(--text)}
html[data-theme="light"] tbody tr:hover{background:rgba(0,0,231,.06)}

/* opdrachtgevers: logo's donker i.p.v. wit */
html[data-theme="light"] .client-item img{filter:grayscale(1) brightness(0);opacity:.62}
html[data-theme="light"] .client-item:hover{background:rgba(0,0,231,.06)}

/* over ons, contact */
html[data-theme="light"] .about{box-shadow:0 1px 0 rgba(11,13,20,.04),0 18px 50px -34px rgba(11,13,20,.3)}
html[data-theme="light"] .pull{color:var(--text)}
html[data-theme="light"] .veld input,
html[data-theme="light"] .veld textarea{color:var(--text);background:#fff}
html[data-theme="light"] .veld input:focus,
html[data-theme="light"] .veld textarea:focus{background:#fff}
html[data-theme="light"] .veld [aria-invalid="true"]{background:rgba(179,38,30,.07)}

/* voet */
html[data-theme="light"] .foot a:hover{color:var(--text)}

/* cookiemelding */
html[data-theme="light"] .cookie{background:rgba(255,255,255,.98);box-shadow:0 -12px 40px -24px rgba(11,13,20,.35)}
html[data-theme="light"] .cookie button{color:var(--text)}
html[data-theme="light"] .cookie button.ja{color:#fff}

/* ---------- thema-schakelaar (voet) ---------- */
.thema{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.thema .opties{display:inline-flex;border:1px solid var(--hair);border-radius:999px;padding:3px}
.thema button{appearance:none;background:none;border:0;border-radius:999px;font:inherit;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);cursor:pointer;padding:8px 14px;min-height:32px;transition:background var(--dur-snel) var(--in-uit),color var(--dur-snel) var(--in-uit)}
.thema button:hover{color:var(--text)}
.thema button[aria-pressed="true"]{background:var(--blue);color:#fff}