/* De kleuren van deze uitvoering: manege Aequilibrium. Samen met js/merk.js
   het enige wat per klant verandert; de rest van de app noemt nergens nog een
   kleur bij naam. De opbouw is die van Werkuren (css/merk.css daar), met het
   groen, crème en zand van de manege en DM Serif Display voor de koppen.

   Het groen is een tint dieper dan het oorspronkelijke #4e8b3a: witte tekst
   op de knoppen moet 4,5 op 1 halen, en #4e8b3a bleef op 4,1 steken. Het
   maandrapport houdt het oorspronkelijke groen (--print-accent): daar staat
   het groen achter donkere tekst, niet onder witte.

   Twee blokken: het lichte palet, en hetzelfde palet in het donker. Welke
   geldt, bepaalt js/thema.js. */

@font-face {
  font-family: 'DM Serif Display';
  src: url('../fonts/DMSerifDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* De letter van de koppen; de rest van de app blijft Figtree. */
  --letter-kop: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --gewicht-kop: 400;

  --accent: #467e34;
  --accent-diep: #3a6a2a;
  --accent-tekst: #3a6a2a;
  --accent-zacht: #e9f1e2;
  --op-accent: #ffffff;

  --pauze: #c9a66b;
  --pauze-zacht: #f0e6d2;
  --pauze-diep: #8a6d33;
  --op-pauze: #3d2f14;

  --grond: #f7f5ef;
  --wit: #fffefb;
  --invoer: #fffefb;
  --papier: #ffffff;
  --inkt: #232821;
  --dim: #5d6357;
  --lijn: rgba(35, 40, 33, 0.10);

  --rood: #a4372f;
  --rood-rand: rgba(164, 55, 47, 0.35);
  --rood-vlak: rgba(164, 55, 47, 0.07);

  --tik: rgba(78, 139, 58, 0.06);
  --vlak: rgba(35, 40, 33, 0.05);
  --focus: rgba(78, 139, 58, 0.35);

  --waas: rgba(35, 40, 33, 0.28);
  --waas-diep: rgba(18, 21, 16, 0.94);
  --foto-knop: rgba(35, 40, 33, 0.62);

  --glas: rgba(255, 254, 251, 0.5);
  --glas-rand: rgba(255, 255, 255, 0.8);
  --glas-glans: rgba(255, 255, 255, 0.7);
  --glas-schaduw: 0 -8px 24px rgba(35, 40, 33, 0.07);

  --schaduw: 0 2px 10px rgba(35, 40, 33, 0.06);
  --schaduw-diep: 0 8px 30px rgba(35, 40, 33, 0.14);

  --gloed-warm: rgba(201, 166, 107, 0.13);
  --gloed-accent: rgba(78, 139, 58, 0.10);
  --verloop-midden: #f2f3ec;
  --verloop-onder: #f4f1e8;

  /* Het maandrapport: altijd op wit papier, ook als de app donker is. */
  --print-accent: #4e8b3a;
  --print-accent-zacht: #eef4ea;
  --print-band: #e9f1e2;
  --print-vlak: #f8f7f2;
  --print-inkt: #232821;
  --print-dim: #5d6357;
}

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

  /* Wit op dit groen haalt 5,2 op 1; als tekst wordt het groen juist lichter. */
  --accent: #3f7a2e;
  --accent-diep: #33662a;
  --accent-tekst: #9fce86;
  --accent-zacht: #1a2616;

  --pauze: #c9a66b;
  --pauze-zacht: #2a2317;
  --pauze-diep: #e0c28d;

  --grond: #0c0e0b;
  --wit: #171a15;
  --invoer: #1c2019;
  --inkt: #eef0ea;
  --dim: #a3a99b;
  --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(143, 196, 116, 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(23, 26, 21, 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);

  --schaduw: 0 1px 2px rgba(0, 0, 0, 0.5);
  --schaduw-diep: 0 12px 40px rgba(0, 0, 0, 0.7);

  --gloed-warm: rgba(201, 166, 107, 0.06);
  --gloed-accent: rgba(78, 139, 58, 0.14);
  --verloop-midden: #0e110c;
  --verloop-onder: #121510;
}