/*
  MandarAIn - css/tokens.css (site v5, bouwronde 1: herontwerp van de
  homepage, Route Statisch)

  Enige bron van de ontwerpwaarden, in twee lagen:
  1. basiswaarden met Nederlandse namen. De kleuren bestaan in twee sets:
     licht op :root en donker onder prefers-color-scheme: dark;
  2. rollen die naar de basiswaarden verwijzen. De rollen zijn in beide
     sets gelijk.
  site.css gebruikt alleen var(--...) en bevat geen losse kleurwaarden.

  v5: dezelfde huisstijl (kleuren, Atkinson Hyperlegible Next, woordmerk,
  één oranje accent, de stempel "Goedgekeurd door jou"), maar strakker en
  meer app-achtig: kaarten met een rand van 1 px en een afronding van
  12 px, een eigen kaartkleur, een zachte randkleur en een schaduw alleen
  op schermbeelden. Vervallen: de tokens van de opening, van de demo in de
  oude hero, van het uitklapmenu en het blok "TIJDELIJK".
  De site volgt alleen de systeeminstelling; er is geen handmatige
  schakelaar en geen opslag in de browser.

  Oranje (--actie) is voorbehouden aan de hoofdknop, de stempel, het
  akkoordvinkje in een schema en de nadruk in de h1. Links en focus zijn
  inkt. Oranje als tekst staat alleen op --achtergrond of --kaart.

  Contrast: berekend met de WCAG 2.x-formule, niet gemeten. Op de
  achtergrond, op het vlak en op de kaart:
    tekst         licht 17,33 / 15,67 / 18,58   donker 16,29 / 14,73 / 14,73
    tekst-zacht   licht  7,60 /  6,87 /  8,15   donker  8,93 /  8,07 /  8,07
    actie         licht  4,83 /  4,37 /  5,18   donker  8,21 /  7,42 /  7,42
    lijn          licht  4,02 /  3,64 /  4,32   donker  3,96 /  3,58 /  3,58
    actie-tekst op actie: licht 5,18, donker 8,21;
    actie-tekst op actie-hover: licht 7,31, donker 11,02.
  --rand is decoratief (de omlijning van kaarten en kaders); de inhoud is
  ook zonder die rand herkenbaar, dus er geldt geen contrasteis.
  Bediening (knoppen, schakelaar) houdt een rand in --lijn.
*/

:root {
  color-scheme: light dark;

  /* ===== Laag 1: basiswaarden ===== */

  /* Kleur: de lichte set. De donkere set staat onder dit blok. */
  --kleur-achtergrond: #F6F7F8;      /* koel papiergrijs */
  --kleur-vlak: #E9ECEF;
  --kleur-kaart: #FFFFFF;            /* kaarten en vensterframes */
  --kleur-tekst: #17120F;            /* inkt */
  --kleur-tekst-zacht: #564E47;
  --kleur-actie: #C2410C;            /* hoofdknop, stempel en akkoordvinkje */
  --kleur-actie-tekst: #FFFFFF;
  --kleur-actie-hover: #9A3412;
  --kleur-lijn: #767A80;             /* bediening */
  --kleur-rand: #D5D9DE;             /* omlijning van kaarten (decoratief) */

  /* Schaduw: alleen op schermbeelden. Kleur van inkt met doorzichtigheid. */
  --schaduw-beeld:
    0 1px 2px rgb(23 18 15 / 0.06),
    0 12px 32px rgb(23 18 15 / 0.12);

  /* Woordmerk: in licht de lichte versie, in donker de primaire versie.
     Eigen waarden, zodat het merk niet meebeweegt als het palet wijzigt. */
  --kleur-merk: #17120F;
  --kleur-merk-ai: #C2410C;

  /* Typografie. Atkinson Hyperlegible Next (SIL OFL 1.1) uit fonts/, in
     de gewichten 400, 600 en 800 (de drie bestanden in live/fonts/). */
  --lettertype-familie: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gewicht-normaal: 400;
  --gewicht-halfvet: 600;
  --gewicht-extravet: 800;

  --grootte-klein: 0.875rem;
  --grootte-basis: 1.0625rem;
  --grootte-intro: 1.1875rem;
  --grootte-kop-3: 1.25rem;
  --grootte-kop-2: clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);
  --grootte-kop-1: clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem);
  --grootte-prijs: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  /* De h2 in de kantlijn van de juridische pagina's (vanaf 64em) */
  --grootte-kop-kantlijn: 1.5rem;

  --regel-tekst: 1.6;
  --regel-kort: 1.3;
  --regel-kop: 1.15;
  --spatie-kop: -0.025em;
  --spatie-kop-klein: -0.01em;

  /* Woordmerk als tekst, tot het woordmerk als SVG met paden er is */
  --woordmerk-grootte: 1.375rem;
  --woordmerk-spatie: -0.03em;

  /* Ruimte (raster van 8 punten, met halve stappen) */
  --ruimte-2xs: 0.25rem;
  --ruimte-xs: 0.5rem;
  --ruimte-s: 0.75rem;
  --ruimte-tekst: 1rem;
  --ruimte-m: 1.5rem;
  --ruimte-l: 2.5rem;
  --ruimte-xl: 4rem;
  --ruimte-sectie: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  /* Breedtes. De kantlijn geldt alleen voor de juridische pagina's. */
  --breedte-pagina: 72rem;
  --breedte-breed: 120rem;           /* grootste binnenmaat van kop en footer */
  --breedte-tekst: 62ch;
  --breedte-kop-deel: 40rem;         /* kop en intro van een sectie op home */
  --breedte-kop-held: 13em;          /* de h1; em van de h1 zelf */
  --breedte-paginakop: 46rem;
  --breedte-schema: 40rem;           /* tekening van een schema */
  --kantlijn: clamp(14rem, 22.5vw, 18rem);

  /* Stempel: de volledige stempel is hooguit 240 px breed; over de hoek
     van het heldenbeeld kleiner. */
  --breedte-stempel: 15rem;
  --breedte-stempel-held: 9.5rem;

  /* Stapnummers in de demo en de tijdlijn */
  --maat-nummer: 2rem;

  /* Kop */
  --kop-hoogte: 3.5rem;

  /* Lagen */
  --laag-stempel: 1;
  --laag-kop: 50;
  --laag-skiplink: 100;

  /* Radius */
  --radius: 2px;                     /* klein: skiplink */
  --radius-knop: 0.5rem;             /* knoppen en schakelaar */
  --radius-kaart: 0.75rem;           /* kaarten, kaders en vensterframes */

  /* Lijnen */
  --lijn-dun: 1px;
  --lijn-dik: 2px;

  /* Focusring: met afstand, zodat hij altijd op de achtergrond, het vlak
     of de kaart ligt (tegen de oranje knop in donker zou hij 1,98 halen) */
  --focus-dikte: 3px;
  --focus-afstand: 3px;

  /* Beweging: alleen de kleurwissel van knoppen en bediening (150 ms) */
  --duur-kort: 150ms;

  /* ===== Laag 2: rollen (gelijk in licht en donker) ===== */

  --achtergrond: var(--kleur-achtergrond);
  --vlak: var(--kleur-vlak);
  --kaart: var(--kleur-kaart);
  --tekst: var(--kleur-tekst);
  --tekst-zacht: var(--kleur-tekst-zacht);
  --link: var(--kleur-tekst);
  --focus: var(--kleur-tekst);
  --lijn: var(--kleur-lijn);
  --rand: var(--kleur-rand);

  --actie: var(--kleur-actie);
  --actie-tekst: var(--kleur-actie-tekst);
  --actie-hover: var(--kleur-actie-hover);

  --woordmerk: var(--kleur-merk);
  --woordmerk-ai: var(--kleur-merk-ai);
}

/* De donkere set. Alleen op het scherm: afdrukken gebruikt altijd de
   lichte set. De kaart heeft in donker de kleur van het vlak. */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --kleur-achtergrond: #17120F;
    --kleur-vlak: #231C17;
    --kleur-kaart: #231C17;
    --kleur-tekst: #F5EFE9;
    --kleur-tekst-zacht: #BDB2A7;
    --kleur-actie: #FB923C;
    --kleur-actie-tekst: #17120F;
    --kleur-actie-hover: #FDBA74;
    --kleur-lijn: #7D7268;
    --kleur-rand: #3A312A;

    --schaduw-beeld:
      0 1px 2px rgb(0 0 0 / 0.4),
      0 12px 32px rgb(0 0 0 / 0.45);

    --kleur-merk: #F5EFE9;
    --kleur-merk-ai: #FB923C;
  }
}

@media print {
  :root {
    color-scheme: light;
  }
}