/* phrona-dark.css — de donkere set voor Phrona. [GROTE_UI_20261031]

 * WAT DIT DOET
 * ============
 * Phrona's `index.html` heeft één `:root` met de lichte waarden en gebruikt
 * daarna op honderden plekken `var(--bg)`, `var(--surface)`, `var(--txt)`.
 * Dat is precies wat je wilt: dit bestand hoeft alleen die variabelen om te
 * zetten onder `html[data-mode="dark"]`, en elke pagina die nooit is aangeraakt
 * doet mee.
 *
 * WAT DIT NIET DOET
 * =================
 * De bestaande `:root` wordt NIET herschreven. Deze regels komen later in de
 * cascade en winnen daardoor, zonder de bron aan te raken. Wie `:root` zelf
 * aanpast, verliest bij de volgende patch zijn werk.
 *
 * DE REGEL: hier staat geen enkele hardcoded kleur buiten deze variabelen om.
 * Eén `#fff` in een donker blok is een wit vlak in iemands gezicht.
 */

/* ── De donkere waarden ──────────────────────────────────────────────── */
html[data-mode="dark"] {
  --bg:            #0f1115;
  --surface:       #171a20;
  --surface-2:     #1e222a;
  --surface-3:     #262b35;

  --line:          #2a2f39;
  --line-strong:   #4a5261;   /* zichtbaar als rand, anders dan in licht */

  --txt:           #e8eaee;
  --muted:         #98a0ad;
  --txt-inverse:   #0f1115;

  /* Het accent wordt LICHTER. Dezelfde #b1663c haalt op een donkere
     achtergrond de contrastnorm niet: op #171a20 is dat 2,9:1. */
  --accent:        #d98a5c;
  --accent-hover:  #e9a077;
  --accent-soft:   #2e2119;

  --ok:            #4fbf85;
  --ok-soft:       #12261b;
  --warn:          #e0aa4f;
  --warn-soft:     #2b2210;
  --err:           #e8776a;
  --err-soft:      #2c1512;
  --focus:         #d98a5c;

  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.45);
}

/* De merkkleuren blijven, maar iets opgetild zodat ze op donker leesbaar zijn. */
html[data-mode="dark"] {
  --pgroen:  #7f9a86;
  --olijf:   #a8ac92;
  --beige:   #d7c9b2;
  --terra:   #d98a5c;
}

/* ── Vlakken die hun eigen achtergrond zetten ────────────────────────── */
/* Deze selectors bestaan in index.html met een hardcoded lichte kleur of met
   een var die in donker niet klopt. Ze worden hier bijgestuurd. */
html[data-mode="dark"] body {
  background: var(--bg);
  color: var(--txt);
}
html[data-mode="dark"] header.topbar,
html[data-mode="dark"] aside.sidebar {
  background: var(--surface);
  border-color: var(--line);
}
html[data-mode="dark"] table.table tbody tr:hover {
  background: var(--surface-2);
}
html[data-mode="dark"] input,
html[data-mode="dark"] select,
html[data-mode="dark"] textarea {
  background: var(--surface-2);
  color: var(--txt);
  border-color: var(--line);
}
html[data-mode="dark"] .ph-switch .ph-knob {
  background: #e8eaee;   /* het knopje moet lichter zijn dan de track */
}
html[data-mode="dark"] .ph-switch .ph-track {
  background: var(--surface-3);
}

/* ── Het logo: het is WIT, dus het probleem zit in LICHT, niet in donker ──
 * GEMETEN, niet aangenomen: phrona-logo-horizontal.png (1392x237) heeft
 * 329.904 dekkende pixels met gemiddelde kleur (220,220,217) -- bijna wit.
 *
 * Gevolg:
 *   - in DONKER is het logo vanzelf goed (wit op #171a20). Inverteren zou het
 *     hier JUIST zwart-op-donker maken. Dus: geen filter in donker.
 *   - in LICHT is het wit op wit (#ffffff) en dus onzichtbaar. Dat is een
 *     bestaande fout die niets met dark mode te maken heeft, maar die je pas
 *     ziet als je kijkt. Donkerder maken lost beide op.
 *
 * Wie hier ooit een donker logo neerzet, moet deze regel omdraaien -- en dan
 * is de meting hierboven de reden om eerst te kijken welke kleur het bestand
 * werkelijk heeft.
 */
/* ── Het logo: een PNG MET WITTE ACHTERGROND, geen transparantie ────────
 * GEMETEN: phrona-logo-horizontal.png (1392x237) heeft 329.904 dekkende
 * pixels -- dat is ELKE pixel. Er zit geen alpha in. De achtergrond is wit,
 * de letters zijn donker.
 *
 * Dat maakt dit een ander probleem dan "welke kleur heeft het logo":
 *   - in LICHT is een wit vlak op een witte topbar onzichtbaar als vlak, en
 *     de donkere letters zijn leesbaar. `multiply` laat wit wegvallen zodat
 *     er geen grijze plaat ontstaat als iemand ooit een filter toevoegt.
 *   - in DONKER is dat witte vlak een fel blok in een donkere balk.
 *     `invert(1)` maakt het vlak zwart (valt weg tegen #171a20) en de
 *     letters wit (leesbaar).
 *
 * GEEN brightness(): dat maakte in mijn eerste poging de witte achtergrond
 * grijs (255 * 0.25 = 64) -- een grijze plaat om het logo heen.
 */
html:not([data-mode="dark"]) header.topbar .brand img {
  mix-blend-mode: multiply;
}
html[data-mode="dark"] header.topbar .brand img {
  /* invert(1) maakt van de witte plaat zwart en van de donkere letters wit.
     Daarna valt dat zwart weg met screen -- anders zie je een zwarte plaat
     op een donkergrijze balk, en dat leest als een vlek. */
  filter: invert(1);
  mix-blend-mode: screen;
}
@media (prefers-color-scheme: dark) {
  html[data-mode="system"] header.topbar .brand img {
    filter: invert(1);
    mix-blend-mode: screen;
  }
}

/* ── De vier paletten: alleen het accent, niet de oppervlakken ───────── */
html[data-mode="dark"][data-palette="forest"] {
  --accent:       #5fb3a1;
  --accent-hover: #7cc7b6;
  --accent-soft:  #12251f;
  --focus:        #5fb3a1;
}
html[data-mode="dark"][data-palette="rose"] {
  --accent:       #d98aa6;
  --accent-hover: #e9a6bd;
  --accent-soft:  #2a1720;
  --focus:        #d98aa6;
}
html[data-mode="dark"][data-palette="ocean"] {
  --accent:       #6ba6d9;
  --accent-hover: #8bbde9;
  --accent-soft:  #14222e;
  --focus:        #6ba6d9;
}

/* ── "Systeem": de browser beslist, niet de server ───────────────────── */
/* Dit is de betere oplossing dan een JS-resolutie: de CSS kent de uitkomst
   al bij de eerste paint, dus geen flits van licht naar donker. */
@media (prefers-color-scheme: dark) {
  html[data-mode="system"] {
    --bg:            #0f1115;
    --surface:       #171a20;
    --surface-2:     #1e222a;
    --surface-3:     #262b35;
    --line:          #2a2f39;
    --line-strong:   #4a5261;
    --txt:           #e8eaee;
    --muted:         #98a0ad;
    --txt-inverse:   #0f1115;
    --accent:        #d98a5c;
    --accent-hover:  #e9a077;
    --accent-soft:   #2e2119;
    --ok:            #4fbf85;
    --ok-soft:       #12261b;
    --warn:          #e0aa4f;
    --warn-soft:     #2b2210;
    --err:           #e8776a;
    --err-soft:      #2c1512;
    --focus:         #d98a5c;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.45);
  }
  html[data-mode="system"] body { background: var(--bg); color: var(--txt); }
  html[data-mode="system"] header.topbar,
  html[data-mode="system"] aside.sidebar {
    background: var(--surface); border-color: var(--line);
  }
  html[data-mode="system"] input,
  html[data-mode="system"] select,
  html[data-mode="system"] textarea {
    background: var(--surface-2); color: var(--txt); border-color: var(--line);
  }

}