/* steunles.nl: het palet.
   Eén plek voor de kleuren, want de publieke site en het beheer tekenen
   dezelfde lessen. Stond dit twee keer, dan liep het uit elkaar en zag een
   tekening er in beheer anders uit dan bij een bezoeker. Dat is precies wat
   /beheer/tekeningen moet laten zien, dus daar mag geen verschil in zitten.

   Playful Pop. De accentkleur --brand is de volle roze uit het palet en is
   alleen voor vlakken; --ok is dezelfde tint donkerder en haalt het contrast
   voor tekst. Zie het kopje Kleuren in README.md. */

:root{
  --ink:#2e1a2a; --text:#3c2733; --muted:#7a5c6b; --bg:#fff9f0; --surface:#FFFFFF; --line:#f0e2d6;
  --brand:#ff5c8a;
  /* Atoomkleuren volgen de scheikunde en niet het palet: zuurstof rood,
     koolstof donker, waterstof wit, stikstof blauw. */
  --oxy:#F2542D; --carb:#2E2E38; --hyd:#FFFFFF; --hydline:#b9a3ad; --nit:#3E7BFA; --iron:#A4643C;
  --sulf:#E0B429; --chlo:#4DA167; --natr:#8E6BD6; --calc:#6B7B8C;
  --ok:#b62b52; --okbg:#ffeaf0; --warn:#a83a22; --warnbg:#fdeae4; --sun:#ffd21a; --sunbg:#fff4cf;
  /* Goed is groen en fout is rood: daar wijken we niet van af, ook niet
     voor het palet. Zonder dit leest een juist antwoord als een fout. */
  --goed:#1a6b43; --goedbg:#e6f6ed;
  --op-warn:#ffffff; --op-goed:#ffffff;
  /* Tekst op een goudvlak blijft altijd donker; goud op licht is onleesbaar. */
  --on-sun:#2e1a2a;
  /* Het kernvlak keert om in donkere modus, dus de nadrukkleur erin ook. */
  --kern-accent:#ffd21a;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#fff9f0; --text:#f2e3e8; --muted:#bd9eaa; --bg:#2a1620; --surface:#38202c; --line:#4b2f3d;
    --carb:#5A5A6A; --hyd:#EEF2FA; --hydline:#EEF2FA;
    --ok:#ff8aab; --okbg:#44202f; --warn:#ff9b7a; --warnbg:#45211a; --sunbg:#453b16;
    --goed:#7fe0a8; --goedbg:#1e3a2c;
    --op-warn:#2e1a2a; --op-goed:#2e1a2a;
    --kern-accent:#b62b52;
  }
}
:root[data-theme="dark"]{
  --ink:#fff9f0; --text:#f2e3e8; --muted:#bd9eaa; --bg:#2a1620; --surface:#38202c; --line:#4b2f3d;
  --carb:#5A5A6A; --hyd:#EEF2FA; --hydline:#EEF2FA;
  --ok:#ff8aab; --okbg:#44202f; --warn:#ff9b7a; --warnbg:#45211a; --sunbg:#453b16;
  --goed:#7fe0a8; --goedbg:#1e3a2c;
  --op-warn:#2e1a2a; --op-goed:#2e1a2a;
  --kern-accent:#b62b52;
}