/* thema.css — licht en donker voor het hele portaal.
   Alle kleuren in de pagina's lopen via deze variabelen. De lichte waarden zijn
   precies die van vroeger; de donkere gelden alleen op het scherm, dus printen en
   de boekhoudmap blijven altijd licht.
   Donker volgt de instelling van het toestel (’s avonds automatisch als de telefoon
   dat doet). Via het menu kun je hem vastzetten: <html data-thema="licht|donker">.
   Wordt na mobiel.css ingeladen. */

:root {
  --paper: #FAFAF7; --card: #fff; --vlak: #F4F3EE; --ink: #1B2430; --soft: #5B6470; --soft2: #8A9098;
  --line: #E4E2DA;
  --groen: #1E6B4F; --groenz: #E5F0EB;
  --rood: #B3442E; --roodz: #F7E8E4; --roodzh: #F7E0DA; --roodrand: #EBC9BE;
  --amber: #B07D2B; --amberz: #F6EEDD; --amberd: #8A6D1B;
  --geelz: #FCF4D2; --geelzh: #F8EDBE; --geelpil: #F4E6B0; --geelrand: #E7D596;
  --blauw: #2C5C8F; --blauwz: #E7EDF4; --blauwrand: #C9D6E6; --blauwd: #3A536B;
  --paars: #574C9A; --paarsz: #E9E6F4; --paarsrand: #CFC8E6;
  --beigez: #F6F2E9;
}

/* ---------- Donker: automatisch 's avonds (toestel), of vastgezet in het menu ---------- */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    color-scheme: dark;
    --paper: #121417; --card: #1B1F24; --vlak: #242A31; --ink: #E6E8EB; --soft: #A1A9B3; --soft2: #7E8792;
    --line: #2F363E;
    --groen: #34946C; --groenz: #19312A;
    --rood: #E06A52; --roodz: #3A2320; --roodzh: #4A2A26; --roodrand: #6A3A32;
    --amber: #D9A441; --amberz: #352C1B; --amberd: #E2BC5E;
    --geelz: #302A16; --geelzh: #3D351B; --geelpil: #4A401C; --geelrand: #5C5125;
    --blauw: #6EA3DB; --blauwz: #1C2A3A; --blauwrand: #2E4560; --blauwd: #9DB8D6;
    --paars: #B3A8F0; --paarsz: #2A2640; --paarsrand: #463F6B;
    --beigez: #26231D;
  }
  :root:not([data-thema="licht"]) input,
  :root:not([data-thema="licht"]) select,
  :root:not([data-thema="licht"]) textarea { background-color: var(--card); color: var(--ink); border-color: var(--line); }
  :root:not([data-thema="licht"]) ::placeholder { color: var(--soft2); }
  :root:not([data-thema="licht"]) ::file-selector-button { background-color: var(--vlak); color: var(--ink); border-color: var(--line); }
  /* Het logo is donkerrood: op een donkere achtergrond valt het weg */
  :root:not([data-thema="licht"]) img.logo { background: #fff; border-radius: 10px; padding: 4px 10px; }
}
@media screen {
  :root[data-thema="donker"] {
    color-scheme: dark;
    --paper: #121417; --card: #1B1F24; --vlak: #242A31; --ink: #E6E8EB; --soft: #A1A9B3; --soft2: #7E8792;
    --line: #2F363E;
    --groen: #34946C; --groenz: #19312A;
    --rood: #E06A52; --roodz: #3A2320; --roodzh: #4A2A26; --roodrand: #6A3A32;
    --amber: #D9A441; --amberz: #352C1B; --amberd: #E2BC5E;
    --geelz: #302A16; --geelzh: #3D351B; --geelpil: #4A401C; --geelrand: #5C5125;
    --blauw: #6EA3DB; --blauwz: #1C2A3A; --blauwrand: #2E4560; --blauwd: #9DB8D6;
    --paars: #B3A8F0; --paarsz: #2A2640; --paarsrand: #463F6B;
    --beigez: #26231D;
  }
  :root[data-thema="donker"] input,
  :root[data-thema="donker"] select,
  :root[data-thema="donker"] textarea { background-color: var(--card); color: var(--ink); border-color: var(--line); }
  :root[data-thema="donker"] ::placeholder { color: var(--soft2); }
  :root[data-thema="donker"] ::file-selector-button { background-color: var(--vlak); color: var(--ink); border-color: var(--line); }
  :root[data-thema="donker"] img.logo { background: #fff; border-radius: 10px; padding: 4px 10px; }
  :root[data-thema="licht"] { color-scheme: light; }
}