/* ============================================================
 * Neerslag.info — de drie uiterlijken
 *
 * Eén DOM, één set componenten (css/style.css), drie waardensets. Dat is de
 * hele opzet: een variant kan niets kapotmaken, want er is geen knop die maar
 * in één variant bestaat.
 *
 *   Helder   licht en waterig, teal-blauw. Voor de eerste indruk.
 *   Weide    warm zand met gewasgroen, groter lettertype, hoog contrast.
 *            Voor buiten, op een telefoon, met de zon erop.
 *   Nacht    donkere leisteen met indigo. Voor wie hier de hele dag in kijkt;
 *            de kaart springt eruit in plaats van de zijbalk.
 *
 * Licht en donker
 * ---------------
 * Elke variant zet twee dingen: de lichte waarden rechtstreeks, en de donkere
 * als `--d-…`. Onderaan staat één paar blokken dat die `--d-…` doorzet zodra
 * het donkere thema geldt. Zo staat elke kleur precies één keer opgeschreven
 * en kan de donkere versie niet achterlopen op de lichte.
 *
 * `data-thema` op <html>: 'auto' (volgt het apparaat), 'licht' of 'donker'.
 * `data-skin`  op <html>: 'helder', 'weide' of 'nacht'.
 *
 * Nacht is één stand: die is al donker, en een "lichte Nacht" is geen variant
 * maar een tegenspraak. De lichte en de donkere waarden zijn er gelijk.
 * ============================================================ */

/* ============================================================
 * Gedeeld — vorm, diepte en beweging
 * Deze staan los van de kleur en gelden voor alle drie, tenzij een variant ze
 * hieronder anders zet.
 * ============================================================ */
:root{
  --r-s:8px; --r:11px; --r-l:16px;
  --vlot:.16s cubic-bezier(.4,0,.2,1);
  --sidebar-w:364px;
  --tekst:14px;

  --sh-1:0 1px 2px rgba(16,32,48,.06);
  --sh-2:0 2px 6px rgba(16,32,48,.08), 0 1px 2px rgba(16,32,48,.05);
  --sh-3:0 10px 30px rgba(16,32,48,.14), 0 2px 8px rgba(16,32,48,.08);
  --sh-4:0 24px 60px rgba(10,20,32,.28);
  --sh-zij:1px 0 0 rgba(16,32,48,.02), 4px 0 26px rgba(16,32,48,.07);

  --d-sh-1:0 1px 2px rgba(0,0,0,.4);
  --d-sh-2:0 2px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --d-sh-3:0 10px 30px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  --d-sh-4:0 24px 60px rgba(0,0,0,.7);
  --d-sh-zij:1px 0 0 rgba(0,0,0,.3), 4px 0 26px rgba(0,0,0,.35);

  --toast-bg:#1e2b39;
  --uit-kleur:#c2ccd6;
  --d-uit-kleur:#3d4a5a;
}

/* ============================================================
 * Helder — de standaard
 *
 * Teal-blauw in plaats van het gebruikelijke schermblauw. Dat is geen smaak
 * alleen: de radarbeelden en de modelvelden op de kaart zijn zélf blauw, en
 * een zijbalk in datzelfde blauw laat de kaart erin verdwijnen. Teal staat er
 * dichtbij genoeg om bij water te horen en ver genoeg om ervan los te komen.
 * ============================================================ */
:root,
html[data-skin=helder]{
  --bg:#eaf0f3; --panel:#ffffff; --vlak:#f3f7f9; --vlak-2:#e6eef1;
  --ink:#12222a; --muted:#5f7683; --line:#dde7ea; --line-zacht:#eaf1f3;

  --brand:#0e7c86; --brand-d:#0a626b; --brand-dd:#074a51;
  --brand-zacht:#e0f3f5; --brand-rand:#a6dbe0;

  --danger:#c0392b; --danger-zacht:#fbecea;
  --ok:#2e7d32; --ok-d:#1f5e23; --ok-zacht:#e7f4e8;
  --waarschuw:#c2610a; --waarschuw-d:#9a4c05; --waarschuw-zacht:#fdf0e0;

  --ring:0 0 0 3px rgba(14,124,134,.26);
  --kop-verloop:linear-gradient(135deg,#18a3b0 0%,#0e7c86 44%,#0a5f74 100%);
  --kop-ink:#ffffff;
  --knop-verloop:linear-gradient(180deg,#11929c,#0e7c86);
  --zoek-bg:rgba(255,255,255,.97); --zoek-ink:#12222a; --zoek-mut:#7d8f99;
  --attr-bg:rgba(255,255,255,.84); --attr-ink:#465a66;

  /* Donkere tegenhanger: niet het lichte thema omgekeerd. Puur zwart naast een
     kaart vol lichte tegels snijdt, en een teal dat op wit rustig is wordt op
     donker schreeuwerig — vandaar zachter en met een grijs dat naar blauw
     trekt, zodat het bij de kaart hoort. */
  --d-bg:#0c161a; --d-panel:#14212a; --d-vlak:#1a2933; --d-vlak-2:#213340;
  --d-ink:#e4eef1; --d-muted:#90a7b1; --d-line:#283a45; --d-line-zacht:#20313a;

  --d-brand:#3fb3bf; --d-brand-d:#6bcbd5; --d-brand-dd:#9adfe6;
  --d-brand-zacht:#12313a; --d-brand-rand:#2b5a66;

  --d-danger:#ef7266; --d-danger-zacht:#37201d;
  --d-ok:#5cbf62; --d-ok-d:#8ad48e; --d-ok-zacht:#16301a;
  --d-waarschuw:#eb9440; --d-waarschuw-d:#f2b072; --d-waarschuw-zacht:#33220f;

  --d-ring:0 0 0 3px rgba(63,179,191,.32);
  --d-kop-verloop:linear-gradient(135deg,#12545e 0%,#0e3f4c 48%,#0b2f3c 100%);
  --d-kop-ink:#eafbfd;
  --d-knop-verloop:linear-gradient(180deg,#17707a,#125a63);
  --d-zoek-bg:rgba(20,33,42,.94); --d-zoek-ink:#e4eef1; --d-zoek-mut:#8399a3;
  --d-attr-bg:rgba(12,22,26,.82); --d-attr-ink:#90a7b1;
}

/* ============================================================
 * Weide — voor buiten
 *
 * Voor wie op het erf, in de kraan of aan de slootkant kijkt. Drie dingen zijn
 * daar anders dan achter een bureau:
 *
 *   1. De zon staat op het scherm. Dus meer contrast en geen lichtgrijze tekst
 *      op wit — de hints zijn hier donkerder dan in Helder.
 *   2. Je kijkt met één oog, met handschoenen. Dus een grotere letter (15 px)
 *      en strakkere, minder ronde vormen: die lezen sneller.
 *   3. Het gaat over grond en gewas. Zand en gewasgroen zeggen dat, blauw zegt
 *      "computerprogramma".
 * ============================================================ */
html[data-skin=weide]{
  --tekst:15px;
  --r-s:6px; --r:9px; --r-l:13px;
  --sidebar-w:376px;

  --bg:#efe9dc; --panel:#fffdf8; --vlak:#f7f2e8; --vlak-2:#ece4d3;
  --ink:#241d12; --muted:#6b5c44; --line:#ded2ba; --line-zacht:#ece3d2;

  --brand:#4a7c2f; --brand-d:#3a6224; --brand-dd:#2a4a19;
  --brand-zacht:#e9f2df; --brand-rand:#b4cf9c;

  --danger:#a8321f; --danger-zacht:#f8e6e2;
  --ok:#3a6224; --ok-d:#2a4a19; --ok-zacht:#e6f0da;
  --waarschuw:#a85c07; --waarschuw-d:#8a4a04; --waarschuw-zacht:#fbeed8;

  --ring:0 0 0 3px rgba(74,124,47,.28);
  --kop-verloop:linear-gradient(135deg,#6ea44a 0%,#4a7c2f 46%,#33591f 100%);
  --kop-ink:#ffffff;
  --knop-verloop:linear-gradient(180deg,#57902f,#42702a);
  --zoek-bg:#fffdf8; --zoek-ink:#241d12; --zoek-mut:#8a7a60;
  --attr-bg:rgba(255,253,248,.86); --attr-ink:#5a4c38;

  /* Schaduwen warmer: een grijze schaduw op zand ziet er vuil uit. */
  --sh-1:0 1px 2px rgba(60,45,20,.08);
  --sh-2:0 2px 6px rgba(60,45,20,.10), 0 1px 2px rgba(60,45,20,.06);
  --sh-3:0 10px 28px rgba(60,45,20,.16), 0 2px 8px rgba(60,45,20,.09);
  --sh-4:0 24px 60px rgba(40,30,14,.3);
  --sh-zij:1px 0 0 rgba(60,45,20,.03), 4px 0 26px rgba(60,45,20,.09);

  /* Donker: geen zand meer (zand in het donker wordt modder) maar een warm
     bruingrijs, met hetzelfde gewasgroen opgehelderd. */
  --d-bg:#16130e; --d-panel:#1e1a13; --d-vlak:#26211a; --d-vlak-2:#302a20;
  --d-ink:#f0e9dc; --d-muted:#a2937c; --d-line:#38301f; --d-line-zacht:#2b2519;

  --d-brand:#8dc063; --d-brand-d:#a6d17f; --d-brand-dd:#c1e0a3;
  --d-brand-zacht:#232e18; --d-brand-rand:#465c30;

  --d-danger:#e8765f; --d-danger-zacht:#33201b;
  --d-ok:#8dc063; --d-ok-d:#a6d17f; --d-ok-zacht:#212c17;
  --d-waarschuw:#e0993c; --d-waarschuw-d:#eeb264; --d-waarschuw-zacht:#33260f;

  --d-ring:0 0 0 3px rgba(141,192,99,.3);
  --d-kop-verloop:linear-gradient(135deg,#3d5f27 0%,#2c481c 48%,#213716 100%);
  --d-kop-ink:#f2f8e9;
  --d-knop-verloop:linear-gradient(180deg,#4e7c30,#3c6125);
  --d-zoek-bg:rgba(30,26,19,.94); --d-zoek-ink:#f0e9dc; --d-zoek-mut:#9a8b74;
  --d-attr-bg:rgba(22,19,14,.84); --d-attr-ink:#a2937c;
}

/* In Weide is een hint geen lichtgrijze terzijde maar gewone tekst: buiten in
   de zon is lichtgrijs op wit domweg niet te lezen. */
html[data-skin=weide] .hint,
html[data-skin=weide] .lijst .sub{color:#5a4c36}
html[data-skin=weide] .panel h2{color:var(--brand-dd);letter-spacing:.5px}
/* Vlakke knoppen: een glimmend verloop op een zandkleurig vlak leest als vuil. */
html[data-skin=weide] .btn.primary{background:var(--brand);border-color:var(--brand-dd)}
html[data-skin=weide] .btn{font-weight:650}

/* ============================================================
 * Nacht — voor de hele dag
 *
 * Bedoeld voor het scherm dat de hele dag openstaat. De zijbalk trekt zich
 * terug en de kaart is het lichtste vlak in beeld: dat is waar je naar kijkt,
 * en op een donkere ondergrond springen een radarbeeld en een neerslagveld er
 * veel harder uit dan op wit.
 *
 * Eén stand: donker. De lichte en de donkere waarden zijn hier gelijk, zodat
 * het apparaat er niet halverwege een licht thema van maakt.
 * ============================================================ */
html[data-skin=nacht]{
  --bg:#080d16; --panel:#111a29; --vlak:#182233; --vlak-2:#1f2b3f;
  --ink:#e7eefa; --muted:#8ba0bd; --line:#25344b; --line-zacht:#1d2a3d;

  --brand:#5b8def; --brand-d:#82abf5; --brand-dd:#aecbfa;
  --brand-zacht:#162542; --brand-rand:#2f4a75;

  --danger:#f0736f; --danger-zacht:#331c20;
  --ok:#4fc07a; --ok-d:#7fd49d; --ok-zacht:#122b1e;
  --waarschuw:#eda13f; --waarschuw-d:#f4bc71; --waarschuw-zacht:#2f2413;

  --ring:0 0 0 3px rgba(91,141,239,.35);
  --kop-verloop:linear-gradient(135deg,#2b4a80 0%,#1c3260 50%,#152548 100%);
  --kop-ink:#eaf1ff;
  --knop-verloop:linear-gradient(180deg,#3f74d8,#2f5cb4);
  --zoek-bg:rgba(17,26,41,.95); --zoek-ink:#e7eefa; --zoek-mut:#7f93b0;
  --attr-bg:rgba(8,13,22,.84); --attr-ink:#8ba0bd;

  --sh-1:var(--d-sh-1); --sh-2:var(--d-sh-2); --sh-3:var(--d-sh-3);
  --sh-4:var(--d-sh-4); --sh-zij:var(--d-sh-zij);
  --uit-kleur:#33415a;

  /* Dezelfde waarden nog eens als donkere set: Nacht kent maar één stand. */
  --d-bg:#080d16; --d-panel:#111a29; --d-vlak:#182233; --d-vlak-2:#1f2b3f;
  --d-ink:#e7eefa; --d-muted:#8ba0bd; --d-line:#25344b; --d-line-zacht:#1d2a3d;
  --d-brand:#5b8def; --d-brand-d:#82abf5; --d-brand-dd:#aecbfa;
  --d-brand-zacht:#162542; --d-brand-rand:#2f4a75;
  --d-danger:#f0736f; --d-danger-zacht:#331c20;
  --d-ok:#4fc07a; --d-ok-d:#7fd49d; --d-ok-zacht:#122b1e;
  --d-waarschuw:#eda13f; --d-waarschuw-d:#f4bc71; --d-waarschuw-zacht:#2f2413;
  --d-ring:0 0 0 3px rgba(91,141,239,.35);
  --d-kop-verloop:linear-gradient(135deg,#2b4a80 0%,#1c3260 50%,#152548 100%);
  --d-kop-ink:#eaf1ff;
  --d-knop-verloop:linear-gradient(180deg,#3f74d8,#2f5cb4);
  --d-zoek-bg:rgba(17,26,41,.95); --d-zoek-ink:#e7eefa; --d-zoek-mut:#7f93b0;
  --d-attr-bg:rgba(8,13,22,.84); --d-attr-ink:#8ba0bd;
}

/* De kaart is in Nacht het onderwerp: geen rand eromheen, en de zijbalk laat
   hem los in plaats van hem in te lijsten. */
html[data-skin=nacht] #sidebar{border-right-color:#1a2536}
html[data-skin=nacht] .leaflet-container{background:#0b1220}

/* ============================================================
 * Donker doorzetten
 *
 * Twee blokken, en meer zijn er niet nodig: alle kleuren staan hierboven al
 * één keer opgeschreven, deze zetten alleen de `--d-…`-set door. Vergeet een
 * variant een donkere waarde, dan valt dát op — de lichte blijft dan staan —
 * en niet pas als iemand met een donker apparaat langskomt.
 * ============================================================ */
@media (prefers-color-scheme:dark){
  html:not([data-thema=licht]){
    --bg:var(--d-bg); --panel:var(--d-panel); --vlak:var(--d-vlak); --vlak-2:var(--d-vlak-2);
    --ink:var(--d-ink); --muted:var(--d-muted); --line:var(--d-line); --line-zacht:var(--d-line-zacht);
    --brand:var(--d-brand); --brand-d:var(--d-brand-d); --brand-dd:var(--d-brand-dd);
    --brand-zacht:var(--d-brand-zacht); --brand-rand:var(--d-brand-rand);
    --danger:var(--d-danger); --danger-zacht:var(--d-danger-zacht);
    --ok:var(--d-ok); --ok-d:var(--d-ok-d); --ok-zacht:var(--d-ok-zacht);
    --waarschuw:var(--d-waarschuw); --waarschuw-d:var(--d-waarschuw-d);
    --waarschuw-zacht:var(--d-waarschuw-zacht);
    --ring:var(--d-ring);
    --kop-verloop:var(--d-kop-verloop); --kop-ink:var(--d-kop-ink);
    --knop-verloop:var(--d-knop-verloop);
    --zoek-bg:var(--d-zoek-bg); --zoek-ink:var(--d-zoek-ink); --zoek-mut:var(--d-zoek-mut);
    --attr-bg:var(--d-attr-bg); --attr-ink:var(--d-attr-ink);
    --sh-1:var(--d-sh-1); --sh-2:var(--d-sh-2); --sh-3:var(--d-sh-3); --sh-4:var(--d-sh-4);
    --sh-zij:var(--d-sh-zij); --uit-kleur:var(--d-uit-kleur);
  }
}
html[data-thema=donker]{
  --bg:var(--d-bg); --panel:var(--d-panel); --vlak:var(--d-vlak); --vlak-2:var(--d-vlak-2);
  --ink:var(--d-ink); --muted:var(--d-muted); --line:var(--d-line); --line-zacht:var(--d-line-zacht);
  --brand:var(--d-brand); --brand-d:var(--d-brand-d); --brand-dd:var(--d-brand-dd);
  --brand-zacht:var(--d-brand-zacht); --brand-rand:var(--d-brand-rand);
  --danger:var(--d-danger); --danger-zacht:var(--d-danger-zacht);
  --ok:var(--d-ok); --ok-d:var(--d-ok-d); --ok-zacht:var(--d-ok-zacht);
  --waarschuw:var(--d-waarschuw); --waarschuw-d:var(--d-waarschuw-d);
  --waarschuw-zacht:var(--d-waarschuw-zacht);
  --ring:var(--d-ring);
  --kop-verloop:var(--d-kop-verloop); --kop-ink:var(--d-kop-ink);
  --knop-verloop:var(--d-knop-verloop);
  --zoek-bg:var(--d-zoek-bg); --zoek-ink:var(--d-zoek-ink); --zoek-mut:var(--d-zoek-mut);
  --attr-bg:var(--d-attr-bg); --attr-ink:var(--d-attr-ink);
  --sh-1:var(--d-sh-1); --sh-2:var(--d-sh-2); --sh-3:var(--d-sh-3); --sh-4:var(--d-sh-4);
  --sh-zij:var(--d-sh-zij); --uit-kleur:var(--d-uit-kleur);
}

/* ============================================================
 * De meetkleuren van de grafiek
 *
 * Die horen níet bij een variant: het zijn geen huisstijlkleuren maar een
 * schaal, nagerekend op kleurenblindheid en op contrast. Ze veranderen alleen
 * mee met licht en donker, want hetzelfde blauw dat op wit klopt verdwijnt op
 * een donker vlak.
 * ============================================================ */
@media (prefers-color-scheme:dark){
  html:not([data-thema=licht]) .viz{--telt:#5a9ee8;--buiten:#8d9aa8;--band:rgba(90,158,232,.14);
    --raster:#2a3644;--as:#63748a;--inkt:#e6edf4;--inkt-2:#93a4b5}
}
html[data-thema=donker] .viz,
html[data-skin=nacht] .viz{--telt:#5a9ee8;--buiten:#8d9aa8;--band:rgba(90,158,232,.14);
  --raster:#2a3644;--as:#63748a;--inkt:#e6edf4;--inkt-2:#93a4b5}