/* De kleuren van deze uitvoering. Samen met js/merk.js het enige wat per klant
   verandert; de rest van de app noemt nergens nog een kleur bij naam.

   Zakelijk blauw als standaard, neutraal genoeg voor een bouwbedrijf, een
   praktijk of een manege. Vervang je --accent door een huiskleur, kijk dan na
   of witte tekst erop leesbaar blijft: de knoppen rekenen daarop. Een vuistregel
   is een verhouding van 4,5 op 1; de meeste kleuren die je van een klant krijgt
   moeten daarvoor een tint donkerder.

   Twee blokken hieronder: het lichte palet, en hetzelfde palet in het donker.
   Welke van de twee geldt, bepaalt js/thema.js — die zet data-thema op de
   pagina, naar de stand van de telefoon of naar wat de gebruiker koos. De
   namen zeggen wat een kleur doet, niet hoe ze eruitziet; daarom kan het
   donkere blok dezelfde lijst invullen zonder dat er een regel opmaak
   verandert. */

:root {
  /* Vertelt de browser in welke stand hij zijn eigen onderdelen tekent:
     keuzelijsten, datumkiezers, schuifbalken. */
  color-scheme: light;

  --accent: #2c5f9e;        /* knoppen, actieve tabbladen, de voortgangsbalk */
  --accent-diep: #1e4370;   /* een ingedrukte knop */
  --accent-tekst: #1e4370;  /* de accentkleur als tekst of icoon */
  --accent-zacht: #e8eef7;  /* de lichte vlek achter een icoon of een status */
  --op-accent: #ffffff;     /* tekst bovenop de accentkleur */

  /* Pauze krijgt met opzet een warme kleur: op het klokscherm moet je in een
     oogopslag zien of je aan het werk bent of niet. */
  --pauze: #c08a2e;
  --pauze-zacht: #f6ecd9;
  --pauze-diep: #7a5715;
  --op-pauze: #1d2229;  /* blijft donker, ook in het donkere palet */

  --grond: #f5f6f8;   /* de achtergrond van de hele app */
  --wit: #ffffff;     /* kaarten en vensters */
  --invoer: #ffffff;  /* invoervelden en keuzelijsten */
  --papier: #ffffff;  /* het rapportblad in het voorbeeld, blijft altijd wit */
  --inkt: #1d2229;    /* gewone tekst */
  --dim: #5b626d;     /* bijschriften en uitleg */
  --lijn: rgba(29, 34, 41, 0.10);

  --rood: #a4372f;                      /* verwijderen, en wat niet terug kan */
  --rood-rand: rgba(164, 55, 47, 0.35);
  --rood-vlak: rgba(164, 55, 47, 0.07);

  --tik: rgba(44, 95, 158, 0.06);   /* het vlekje onder een vinger */
  --vlak: rgba(29, 34, 41, 0.05);   /* een rustig vlak, zoals achter een balk */
  --focus: rgba(44, 95, 158, 0.35); /* de rand om het veld waarin je typt */

  --waas: rgba(29, 34, 41, 0.28);       /* achter een venster */
  --waas-diep: rgba(16, 19, 23, 0.94);  /* achter een foto op volle grootte */
  --foto-knop: rgba(29, 34, 41, 0.62);  /* het knopje op een foto */

  /* Matglas: de balk onderaan, de vensters en de installatiebalk. Het vlak is
     ruim doorzichtig en krijgt een blur mee in stijl.css. Maak het dekkender en
     het effect verdwijnt: in het licht verschilt de glaskleur nauwelijks van de
     achtergrond, dus je ziet alleen nog een grijs vlak. De glans is het lichte
     streepje bovenaan de rand, dat glas zijn dikte geeft. */
  --glas: rgba(255, 255, 255, 0.5);
  --glas-rand: rgba(255, 255, 255, 0.8);
  --glas-glans: rgba(255, 255, 255, 0.7);
  --glas-schaduw: 0 -8px 24px rgba(29, 34, 41, 0.07);

  --schaduw: 0 2px 10px rgba(29, 34, 41, 0.06);
  --schaduw-diep: 0 8px 30px rgba(29, 34, 41, 0.14);

  /* Het rustige verloop achter de app. De twee vlekken zijn dezelfde kleuren
     als hierboven, maar een gradient kan geen doorzichtigheid uit een andere
     kleur afleiden, dus staan ze hier nog eens uitgeschreven. */
  --gloed-warm: rgba(192, 138, 46, 0.14);
  --gloed-accent: rgba(44, 95, 158, 0.16);
  --verloop-midden: #f1f3f6;
  --verloop-onder: #eef1f5;

  /* Het maandrapport. Dat gaat als PDF naar de werkgever en wordt soms geprint,
     dus het staat altijd op wit papier — ook wanneer de app donker is. Daarom
     staan deze kleuren buiten het donkere blok. js/rapport.js leest ze hier op,
     zodat het document meekleurt met het merk in plaats van met vaste kleuren
     in de code. */
  --print-accent: #2c5f9e;
  --print-accent-zacht: #eef2f8;
  --print-band: #e8eef7;
  --print-vlak: #f7f8fa;
  --print-inkt: #1d2229;
  --print-dim: #5b626d;
}

:root[data-thema='donker'] {
  color-scheme: dark;

  /* Een tint dieper dan je op zwart zou kiezen: witte tekst erop moet 4,5 op 1
     halen, en bij een helderder blauw bleef dat op 4,1 steken. */
  --accent: #3572c4;
  --accent-diep: #2a5da2;
  --accent-tekst: #8ab8f2;  /* als tekst juist lichter, niet donkerder */
  --accent-zacht: #16263c;

  --pauze: #c08a2e;
  --pauze-zacht: #2a2214;
  --pauze-diep: #e3b063;

  --grond: #0a0b0d;
  --wit: #16181c;
  --invoer: #1b1e23;
  --inkt: #eef0f3;
  --dim: #9aa2ad;
  --lijn: rgba(255, 255, 255, 0.10);

  --rood: #e2675c;
  --rood-rand: rgba(226, 103, 92, 0.35);
  --rood-vlak: rgba(226, 103, 92, 0.10);

  --tik: rgba(255, 255, 255, 0.06);
  --vlak: rgba(255, 255, 255, 0.06);
  --focus: rgba(122, 168, 240, 0.45);

  --waas: rgba(0, 0, 0, 0.5);
  --waas-diep: rgba(0, 0, 0, 0.95);
  --foto-knop: rgba(0, 0, 0, 0.62);
  --glas: rgba(22, 25, 30, 0.58);
  --glas-rand: rgba(255, 255, 255, 0.10);
  --glas-glans: rgba(255, 255, 255, 0.07);
  --glas-schaduw: 0 -8px 24px rgba(0, 0, 0, 0.45);

  /* Een schaduw op bijna-zwart zie je niet; de randjes doen hier het werk. */
  --schaduw: 0 1px 2px rgba(0, 0, 0, 0.5);
  --schaduw-diep: 0 12px 40px rgba(0, 0, 0, 0.7);

  --gloed-warm: rgba(192, 138, 46, 0.05);
  --gloed-accent: rgba(61, 127, 209, 0.14);
  --verloop-midden: #0c0e12;
  --verloop-onder: #101319;
}