/* Licht en donker voor het kantoorportaal.

   Volgt standaard de instelling van de computer of telefoon, dus 's avonds vanzelf donker
   als het toestel dat ook doet. Met de knop rechtsonder kun je het vastzetten op licht of
   donker (bewaard per browser); dat zet data-thema op <html>.

   Bewust een eigen bestand en niet in brand.css: dat laden ook de volgpagina voor klanten
   en de bezorgapp, en die zijn niet op een donkere achtergrond ingericht.

   De pagina's verwijzen naar deze namen met hun oude kleur als terugval, bijvoorbeeld
   var(--ink,#16211b). Laadt dit bestand een keer niet, dan ziet alles er gewoon uit zoals
   vroeger. Rood, groen en blauw hebben een losse "fill"-variant voor knoppen en badges met
   witte tekst: in het donker wordt de tekstkleur lichter, maar een knop met witte letters
   moet juist donker genoeg blijven. */

:root{
  color-scheme:light;
  /* Licht is koel blauwgrijs, passend bij het huisstijlblauw; dit was een groenige tint. */
  --ground:#f1f5f9; --panel:#ffffff; --panel-2:#f8fafc;
  --ink:#15212b; --muted:#5a6b78; --muted-2:#91a0ab;
  --line:#dde5ec; --line-soft:#ecf1f5; --line-strong:#c9d5de;
  --accent-fill:#12789f; --accent-text:#12789f; --accent-soft:#dcecf3; --accent-ink:#0a5470;
  --late-fill:#812523; --late:#812523; --late-soft:#f2dedd;
  --wait:#b9791f; --wait-soft:#f5e7cf;
  --ok-fill:#627D47; --ok:#627D47; --ok-soft:#e7f1eb;
  --geus-vlak:#f1f5f9;
}

/* Donker is neutraal grafiet, niet groen getint: dat oogde als een groene waas over alles.
   Groen blijft alleen waar het iets betekent (bezorgd).

   Dezelfde waarden twee keer: één keer voor "volg het toestel", één keer voor "vast op
   donker". CSS kan een mediaquery en een attribuut niet in één selector combineren. */
@media (prefers-color-scheme: dark){
  :root:not([data-thema="licht"]){
    color-scheme:dark;
    --ground:#121416; --panel:#1b1e22; --panel-2:#212429;
    --ink:#e7e9ec; --muted:#a4abb3; --muted-2:#808891;
    --line:#2e3238; --line-soft:#262a2f; --line-strong:#3c424a;
    --accent-fill:#1a82ab; --accent-text:#5cb8de; --accent-soft:#15313c; --accent-ink:#a8dcf0;
    --late-fill:#9c3530; --late:#f0968f; --late-soft:#3a1f1e;
    --wait:#e3b35f; --wait-soft:#372b18;
    --ok-fill:#58733f; --ok:#9fc47c; --ok-soft:#1e2b1c;
    --geus-vlak:#121416;
    /* de namen die het routeoverzicht zelf al gebruikte */
    --accent:#1a82ab; --accent2:#58733f;
    --pickup:#9dc2e6; --pickup-soft:#1c2a38;
  }
}
:root[data-thema="donker"]{
  color-scheme:dark;
  --ground:#121416; --panel:#1b1e22; --panel-2:#212429;
  --ink:#e7e9ec; --muted:#a4abb3; --muted-2:#808891;
  --line:#2e3238; --line-soft:#262a2f; --line-strong:#3c424a;
  --accent-fill:#1a82ab; --accent-text:#5cb8de; --accent-soft:#15313c; --accent-ink:#a8dcf0;
  --late-fill:#9c3530; --late:#f0968f; --late-soft:#3a1f1e;
  --wait:#e3b35f; --wait-soft:#372b18;
  --ok-fill:#58733f; --ok:#9fc47c; --ok-soft:#1e2b1c;
  --geus-vlak:#121416;
  --accent:#1a82ab; --accent2:#58733f;
  --pickup:#9dc2e6; --pickup-soft:#1c2a38;
}

/* Panelen: brand.css zet die vast op wit. */
.card,.stop,.daycard,.dag,.wrap>form{background-color:var(--panel)}

/* Het achtergrondpatroon (pootjes en botjes) is een lichte afbeelding. In het donker laten
   we hem met de donkere grondkleur vermenigvuldigen: dan blijft het patroon als donkere
   schaduw zichtbaar in plaats van als fel wit vlak. */
@media (prefers-color-scheme: dark){
  :root:not([data-thema="licht"]) body{background-color:var(--ground);background-blend-mode:multiply}
  :root:not([data-thema="licht"]) .leaflet-tile-pane{filter:brightness(.72) contrast(1.08) saturate(.85)}
  :root:not([data-thema="licht"]) img.logo, :root:not([data-thema="licht"]) .logo img, :root:not([data-thema="licht"]) #brandlogo{background:#fff;border-radius:8px;padding:3px}
}
:root[data-thema="donker"] body{background-color:var(--ground);background-blend-mode:multiply}
:root[data-thema="donker"] .leaflet-tile-pane{filter:brightness(.72) contrast(1.08) saturate(.85)}
:root[data-thema="donker"] img.logo, :root[data-thema="donker"] .logo img, :root[data-thema="donker"] #brandlogo{background:#fff;border-radius:8px;padding:3px}

/* De knop rechtsonder. */
#themaknop{position:fixed;right:14px;bottom:14px;z-index:2000;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);font-size:18px;line-height:1;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18);display:grid;place-items:center}
#themaknop:hover{border-color:var(--accent-text)}
@media print{#themaknop{display:none}}