/*
 * Licht of donker, voor de schermen van de achterkant: de klantpagina's onder
 * /account/, de werkbank en het beheerportaal.
 *
 * Elke pagina heeft zijn eigen <style> met dezelfde namen voor de kleuren
 * (--paper, --ink, --petrol, ...). Dit bestand zet ALLEEN die namen om; het raakt
 * geen opmaak. De selectors hieronder wegen zwaarder dan het :root van een
 * pagina, dus de volgorde in de kop maakt niet uit.
 *
 * Wanneer donker: het toestel staat donker en de bezoeker koos niet zelf licht,
 * of hij koos zelf donker. De keuze staat in de browser onder dezelfde naam als
 * op de site (bs-thema), dus wie op de site donker koos, ziet ook zijn
 * klantpagina donker. Zie thema.js.
 *
 * Alleen op het scherm: een afgedrukte pagina blijft licht.
 */

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#12161A; --card:#1E2429; --ink:#F1EFE9; --ink2:#C9CED3; --muted:#9DA3A9;
    --rule:#2F383F; --hair:#262E35; --petrol:#5FD6A0; --petrol2:#8BE3BC; --pale:#12403D;
    --signal:#3CC48A; --pass:#7FE0B4; --passbg:#10402C; --let:#E0C07A; --letbg:#3A2F12;
    --fout:#F0907E; --foutbg:#4A1D15; --onpetrol:#07211F;
    color-scheme: dark;
  }
}
@media screen {
  :root[data-theme="dark"] {
    --paper:#12161A; --card:#1E2429; --ink:#F1EFE9; --ink2:#C9CED3; --muted:#9DA3A9;
    --rule:#2F383F; --hair:#262E35; --petrol:#5FD6A0; --petrol2:#8BE3BC; --pale:#12403D;
    --signal:#3CC48A; --pass:#7FE0B4; --passbg:#10402C; --let:#E0C07A; --letbg:#3A2F12;
    --fout:#F0907E; --foutbg:#4A1D15; --onpetrol:#07211F;
    color-scheme: dark;
  }
}

/* De knop, in de kop naast het merk. Hij toont waar hij naartoe gaat: een maan
   op licht, een zon op donker - zoals de taalknop op de site de ANDERE taal
   toont. margin-left:auto zet hem rechts, naast wat er verder rechts staat. */
.thema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 30px; padding: 0; margin: 0 0 0 auto;
  background: none; border: 1px solid var(--rule); border-radius: 3px;
  color: var(--muted); cursor: pointer; flex: none;
}
.thema:hover { border-color: var(--petrol); color: var(--petrol); background: none; }
.thema:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.thema svg { width: 16px; height: 16px; }
.thema .zon { display: none; }
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .thema .maan { display: none; }
  :root:not([data-theme="light"]) .thema .zon { display: block; }
}
:root[data-theme="dark"] .thema .maan { display: none; }
:root[data-theme="dark"] .thema .zon { display: block; }
@media print { .thema { display: none; } }