/* ============================================================
   Remarx — twee weergaven: helder (standaard) en donker.
   Helder is de basis in site.css; hieronder alleen de donkere tokens.
   Zelfde typografie en merkkleur, andere ondergrond — geen tweede identiteit.

   Drie toestanden:
   - geen keuze gemaakt  -> systeemvoorkeur bepaalt (prefers-color-scheme)
   - html[data-thema="donker"] -> altijd donker
   - html[data-thema="helder"] -> altijd helder, ook bij een donker systeem
   ============================================================ */

/* De donkere tokens, als mixin-achtig blok op beide manieren toegepast. */
@media (prefers-color-scheme: dark) {
  html:not([data-thema="helder"]) {
    --paper:#0A1020; --card:#111A2E; --ink:#F2F5FA; --ink2:#C3CCDA; --muted:#8792A6;
    --rule:#1F2A42; --rule2:#2C3A57; --sand:#0E1628;
    --blue:#4D8DFF; --blue-soft:#14264A; --navy:#06101F; --navy-text:#fff; --em:#7FB0FF;
    --green:#3DD598; --green-soft:#103524; --amber-soft:#3A2A0E; --amber:#F1B65A;
    --white:#111A2E;
    color-scheme:dark;
  }
}
html[data-thema="donker"] {
  --paper:#0A1020; --card:#111A2E; --ink:#F2F5FA; --ink2:#C3CCDA; --muted:#8792A6;
  --rule:#1F2A42; --rule2:#2C3A57; --sand:#0E1628;
  --blue:#4D8DFF; --blue-soft:#14264A; --navy:#06101F; --navy-text:#fff; --em:#7FB0FF;
  --green:#3DD598; --green-soft:#103524; --amber-soft:#3A2A0E; --amber:#F1B65A;
  --white:#111A2E;
  color-scheme:dark;
}

/* ---- componenten die niet volledig op tokens draaien ---- */
@media (prefers-color-scheme: dark) {
  /* Geen kleurfilter: dat verschuift het merkblauw. We wisselen naar het witte logo. */
  html:not([data-thema="helder"]) .logo img,
  html:not([data-thema="helder"]) .fgrid img { content:url(remarx-logo-small.png) }
  html:not([data-thema="helder"]) header { background:rgba(10,16,32,.85) }
  html:not([data-thema="helder"]) .mobile { background:var(--paper) }
  html:not([data-thema="helder"]) .btn-dark { background:var(--blue);color:#fff }
  html:not([data-thema="helder"]) .btn-dark:hover { background:#6FA2FF }
  html:not([data-thema="helder"]) .btn-white { background:#fff;color:#0A1020 }
  html:not([data-thema="helder"]) .photo img { filter:brightness(.92) }
  html:not([data-thema="helder"]) .ck-box { background:#111A2E;color:#F2F5FA;border-color:#2C3A57 }
  html:not([data-thema="helder"]) .ck-box p,
  html:not([data-thema="helder"]) .ck-opt span,
  html:not([data-thema="helder"]) .ck-opt small { color:#C3CCDA }
  html:not([data-thema="helder"]) .ck-box p a,
  html:not([data-thema="helder"]) .ck-btn { color:#F2F5FA;border-color:#F2F5FA;background:transparent }
  html:not([data-thema="helder"]) .ck-btn.p { background:#4D8DFF;border-color:#4D8DFF;color:#fff }
  html:not([data-thema="helder"]) .ck-sw[disabled] { background:#1E8E5A }
  html:not([data-thema="helder"]) .trail { background:#111A2E;border-color:#2C3A57;color:#F2F5FA }
}
html[data-thema="donker"] .logo img,
html[data-thema="donker"] .fgrid img { content:url(remarx-logo-small.png) }
html[data-thema="donker"] header { background:rgba(10,16,32,.85) }
html[data-thema="donker"] .mobile { background:var(--paper) }
html[data-thema="donker"] .btn-dark { background:var(--blue);color:#fff }
html[data-thema="donker"] .btn-dark:hover { background:#6FA2FF }
html[data-thema="donker"] .btn-white { background:#fff;color:#0A1020 }
html[data-thema="donker"] .photo img { filter:brightness(.92) }
html[data-thema="donker"] .ck-box { background:#111A2E;color:#F2F5FA;border-color:#2C3A57 }
html[data-thema="donker"] .ck-box p,
html[data-thema="donker"] .ck-opt span,
html[data-thema="donker"] .ck-opt small { color:#C3CCDA }
html[data-thema="donker"] .ck-box p a,
html[data-thema="donker"] .ck-btn { color:#F2F5FA;border-color:#F2F5FA;background:transparent }
html[data-thema="donker"] .ck-btn.p { background:#4D8DFF;border-color:#4D8DFF;color:#fff }
html[data-thema="donker"] .ck-sw[disabled] { background:#1E8E5A }
html[data-thema="donker"] .trail { background:#111A2E;border-color:#2C3A57;color:#F2F5FA }

/* ---- de schakelaar in de navigatie ---- */
.thema-knop{
  width:38px;height:38px;border:1px solid var(--rule2);border-radius:8px;background:none;
  cursor:pointer;display:grid;place-items:center;color:var(--ink2);flex-shrink:0;transition:.2s;padding:0
}
.thema-knop:hover{border-color:var(--blue);color:var(--blue)}
.thema-knop:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.thema-knop svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.thema-knop .zon{display:none}
.thema-knop .maan{display:block}
html[data-thema="donker"] .thema-knop .zon{display:block}
html[data-thema="donker"] .thema-knop .maan{display:none}
@media (prefers-color-scheme: dark){
  html:not([data-thema="helder"]) .thema-knop .zon{display:block}
  html:not([data-thema="helder"]) .thema-knop .maan{display:none}
}
@media (max-width:900px){ .thema-knop{width:34px;height:34px} }