/* Zonsom: de tokens van de huisstijl (zon.clardale.com).
   De site leest dit bestand zelf in, zodat site en huisstijl niet uit elkaar groeien.
   Licht is de basis (papier, het scherm in de zon); donker volgt de instelling van het toestel
   (prefers-color-scheme), en data-theme op <html> wint altijd.
   Contrast: maak-huisstijl.mjs leest dit bestand en stopt als een paar onder WCAG AA komt
   (tekst 4,5:1, vlakken en randen 3:1). Lettertypen: zie lettertype/lettertypen.css. */

:root {
  /* Kleuren: namen uit de brief, rollen erachter. */
  --zs-papier: #F6F0E4;   /* grond van de pagina: het papier op de keukentafel */
  --zs-blad: #FFFCF5;     /* kaart en antwoordvel, iets lichter dan het papier */
  --zs-vlak: #EFE6D2;     /* invulveld, advertentieplek, rustig blok */
  --zs-inkt: #2B2420;     /* tekst, knoppen, lijnen die iets zeggen */
  --zs-zacht: #5C4F45;    /* bijzaak (labels); nooit voor bron of tijd, die blijven inkt */
  --zs-rand: #85735F;     /* rand van invulvelden en knoppen (3:1, zodat je ziet waar je tikt) */
  --zs-haarkleur: #CDBFA6;     /* haarlijn en rekenregel: alleen decor, nooit onder tekst nodig */
  --zs-rood: #7A1F2B;     /* het merk, wat het kost, slecht, fout (rode inkt van de brief) */
  --zs-oprood: #FFFCF5;   /* tekst op een rood vlak */
  --zs-groen: #2F5D3A;    /* goed, nagekeken, wat je overhoudt */
  --zs-opgroen: #FFFCF5;  /* tekst op een groen vlak */
  --zs-oker: #7D5200;     /* onzeker: de bandbreedte tussen laag en hoog (tekst en streep) */
  --zs-okervlak: #F1DFB0; /* de vulling van de band (met arcering, nooit alleen kleur) */
  --zs-neutraal: #766859; /* grafiek: nu, met salderen, gewoon */
  --zs-opinkt: #FFFCF5;   /* tekst op een inktvlak (knop) */

  /* Grafieken: goed, slecht, gewoon en onzeker. Onzeker is altijd een band met arcering. */
  --zs-grafiek-goed: var(--zs-groen);
  --zs-grafiek-slecht: var(--zs-rood);
  --zs-grafiek-neutraal: var(--zs-neutraal);
  --zs-grafiek-onzeker: var(--zs-oker);
  --zs-band: repeating-linear-gradient(135deg, var(--zs-oker) 0 2px, var(--zs-okervlak) 2px 8px);
  --zs-korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Letters. Newsreader voor koppen, het grote getal en het oordeel; Source Sans 3 voor tekst. */
  --zs-kop: "Newsreader", Georgia, "Times New Roman", serif;
  --zs-tekst: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
  --zs-maat-1: 16px;   /* beeldrechten, labels op een knop */
  --zs-maat-2: 18px;   /* bron, tijd, bijzaak: nooit kleiner */
  --zs-maat-3: 20px;   /* lopende tekst (groot genoeg voor in de zon) */
  --zs-maat-4: 24px;   /* tussenkop */
  --zs-maat-5: 30px;   /* kop, het oordeel op de telefoon */
  --zs-maat-6: 40px;   /* paginakop, het oordeel op een breed scherm */
  --zs-maat-7: 56px;   /* grote kop op een breed scherm */
  --zs-maat-8: 88px;   /* het getal */
  --zs-maat-9: 120px;  /* het getal op een breed scherm */
  --zs-regel-tekst: 1.5;
  --zs-regel-kop: 1.15;
  --zs-regel-getal: 1;
  --zs-cijfers: lining-nums tabular-nums;   /* cijfers met vaste breedte, ook in koppen */

  /* Ruimte, in stappen van 4. */
  --zs-r-1: 4px;
  --zs-r-2: 8px;
  --zs-r-3: 12px;
  --zs-r-4: 16px;
  --zs-r-5: 24px;
  --zs-r-6: 32px;
  --zs-r-7: 48px;
  --zs-r-8: 64px;

  /* Vorm. Bijna rechte hoeken (papier), haarlijn en dikke lijn, een bovenrand van 6 in rood,
     de dubbele streep van een briefhoofd. Geen schaduwen, geen pillen. */
  --zs-hoek: 2px;
  --zs-haar: 1px;
  --zs-lijn: 2px;
  --zs-bovenrand: 6px;
  --zs-aanraak: 52px;        /* minimale hoogte van knop en invulveld */
  --zs-breedte-tekst: 36em;
  /* Breed scherm (vanaf 1100px): twee kolommen, links de invoer (vast), rechts het antwoord;
     de pagina vult tot --zs-breed-max. Geen telefoonkaart in het midden. */
  --zs-breed-vanaf: 1100px;  /* voor in @media; een variabele werkt daar niet */
  --zs-breed-max: 1360px;
  --zs-kolom-invoer: 400px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zs-papier: #1F1A17;
    --zs-blad: #2A2420;
    --zs-vlak: #332B25;
    --zs-inkt: #F3EADB;
    --zs-zacht: #C2B3A0;
    --zs-rand: #9A8A76;
    --zs-haarkleur: #4D4238;
    --zs-rood: #F2A9AE;
    --zs-oprood: #1F1A17;
    --zs-groen: #A4D4A8;
    --zs-opgroen: #1F1A17;
    --zs-oker: #E0B25A;
    --zs-okervlak: #4A3B1C;
    --zs-neutraal: #A89886;
    --zs-opinkt: #1F1A17;
    --zs-korrel: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --zs-papier: #1F1A17;
  --zs-blad: #2A2420;
  --zs-vlak: #332B25;
  --zs-inkt: #F3EADB;
  --zs-zacht: #C2B3A0;
  --zs-rand: #9A8A76;
  --zs-haarkleur: #4D4238;
  --zs-rood: #F2A9AE;
  --zs-oprood: #1F1A17;
  --zs-groen: #A4D4A8;
  --zs-opgroen: #1F1A17;
  --zs-oker: #E0B25A;
  --zs-okervlak: #4A3B1C;
  --zs-neutraal: #A89886;
  --zs-opinkt: #1F1A17;
  --zs-korrel: none;
  color-scheme: dark;
}