/* Lichte modus (22 oktober 2026). Dit bestand laadt als laatste. De kleuren zelf staan in tokens.css (:root[data-theme="light"]);
   hier staat wat zich niet met een kleurwissel laat oplossen: het logo, de wisselknop, de kleurovergang bij het wisselen en de
   lichte versie van onderdelen die op donker zijn gebouwd (balk, glas, openingen, voet). In de donkere modus verandert hier niets. */

/* Logo: twee beelden, het lichte met donkere letters en een gouden teken */
img.logo-licht { display: none !important; }
:root[data-theme="light"] img.logo-donker { display: none !important; }
:root[data-theme="light"] img.logo-licht { display: block !important; }
:root[data-theme="light"] img.flogo.logo-licht { display: inline !important; }

/* De wisselknop: zon in donker, maan in licht (Lucide-stijl, lijn 1,6) */
.theme-toggle { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--off); background: transparent; cursor: pointer; transition: border-color .3s ease, background-color .3s ease, color .3s ease; }
.theme-toggle:hover { border-color: var(--accent-line); background-color: rgb(var(--off-rgb) / 0.06); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 50%; }
.theme-toggle svg { width: 20px; height: 20px; display: block; }
.theme-toggle .ic-maan { display: none; }
:root[data-theme="light"] .theme-toggle .ic-zon { display: none; }
:root[data-theme="light"] .theme-toggle .ic-maan { display: block; }
/* Ryan 23 oktober: het zonnetje links naast Inloggen; dicht tegen Inloggen aan, zoals eerst aan de andere kant */
.menu .theme-toggle { margin-right: -12px; }
.sheet-acties { display: flex; align-items: center; gap: 4px; }
.sheet .theme-toggle { border-color: transparent; }

/* Het wisselen (Ryan 23 oktober): de hele pagina vloeit in 0,3 s als één beeld over (View Transitions in menu.js), zodat het verloop over de foto
   niet los van de rest verspringt. Geen overgangen per onderdeel meer. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: ease; }

/* Openingen: de foto vervaagt naar het lichte vlak (op de computer; op de telefoon doet het bestaande verloop dat al) */
@media (min-width: 821px) {
  :root[data-theme="light"] .hero-media:not(.bs-vis):not(.mn-hero-vis) { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 76%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 76%, transparent 100%); }
}

/* Gestapelde platen (home): wit op licht, een zachte schaduw boven de rand in plaats van een donkere gloed */
:root[data-theme="light"] body.home .stapkaart { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 -10px 28px -12px rgb(var(--ink-rgb) / 0.12); }

/* Keuzelijst in een formulier: het pijltje in groen, niet in goud */
:root[data-theme="light"] .form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231f5a26' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }

/* Contrast (gemeten): losse tekst op een band en in het app-blok */
:root[data-theme="light"] body.home .stapkaart .tab .punt { opacity: 1; }
@media (min-width: 1001px) { :root[data-theme="light"] body.home .app-scroll.app-blok .as-deel:not(.aan) { opacity: 0.52; } }
:root[data-theme="light"] body.home .as-ook, :root[data-theme="light"] body.home .as-deel p { color: var(--muted); }

/* Smalle computers (1000 tot 1120): de wisselknop erbij past nog binnen de balk als de tussenruimten krapper zijn */
@media (min-width: 1000px) and (max-width: 1120px) {
  .bar .menu { gap: 16px; }
  .bar .menu .theme-toggle { margin-right: -4px; }
}

/* Glas (palet A v2): wit 72% met blur 26 en verzadiging 1,6, een fijne rand van een halve pixel en een zachte zweefschaduw.
   De glazen tegels die een echt appscherm tonen (.gk-ui) blijven donker. */
:root[data-theme="light"] :is(.gk, .bw-gk):not(.gk-ui) {
  border-color: transparent;
  -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
  box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.9), 0 0 0 0.5px rgb(15 39 18 / 0.08), 0 8px 28px -6px rgb(15 39 18 / 0.16);
}
/* De zwevende balk is hetzelfde glas */
@media (min-width: 1000px) {
  :root[data-theme="light"] .bar.floating::before, :root[data-theme="light"] .bar.open:not(.floating)::before { background-color: rgb(255 255 255 / 0.72); border-color: transparent; -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.9), 0 0 0 0.5px rgb(15 39 18 / 0.08), 0 8px 28px -6px rgb(15 39 18 / 0.16); }
}

/* Sterren op glas boven een foto: iets dieper goud, anders zakt het contrast onder 3 : 1 (gemeten 2,5 op een warme foto, nu 3,5) */
:root[data-theme="light"] .bw-gk .stars { color: #94631f; }