/* Taqqle, tokens. Spec ronde 3, hoofdstuk 2 en 3.
   Alle kleuren en maten van de site staan hier. In basis.css en home.css staat geen hexwaarde.

   Twee stijlen via html[data-stijl]: licht-inkt (standaard) en inkt. Geen van beide is een afgeleide: elke zone heeft eigen tokens.
   Componenten lezen alleen de generieke tokens (--grond, --tekst, --tekst-2, --knop-*, --focus, --tijd-*, --vb-*, --haarlijn).
   Een sectie zet daarvoor een zone-klasse: .zone-top, .zone-midden, .zone-overzicht, .zone-slot of .zone-voet.
   --klant wisselt alleen met data-branche, nooit met data-stijl. */

:root {
  /* kleur, vast in beide stijlen */
  --wit: #ffffff;
  --vlak: #f4f5f6;
  --vlak-2: #e8e9ec;
  --ink: #16181d;
  --ink-2: #1f2229;
  --zacht: #54565c;
  --stil: #6b6d73;
  --op-ink: #f4f5f6;
  --op-ink-zacht: rgba(244, 245, 246, 0.86);
  --lijn: rgba(22, 24, 29, 0.12);
  --lijn-sterk: rgba(22, 24, 29, 0.24);
  --lijn-donker: rgba(255, 255, 255, 0.14);
  --lijn-knop: rgba(22, 24, 29, 0.47);   /* rand van chips, velden en omlijnde knoppen op licht, minimaal 3:1 */
  --veld-rand: var(--lijn-knop);         /* velden en omlijnde knoppen binnen een blad, in beide stijlen */
  --mint: #91d4bf;
  --mint-600: #64a08d;
  --mint-700: #3d6f5f;
  --mint-800: #295145;
  --mint-100: #d2f0e5;
  --mint-50: #e8faf3;
  --zwart: #000000;
  --mint-hover: #a9e0cf;
  --fout: #b3261e;                       /* alleen foutmeldingen in formulieren, altijd met tekst erbij */
  --fout-50: #fdecea;

  /* klantkleuren: de enige plek met deze waarden. BRANCHES verwijst hiernaar */
  --klant-schilder: #1c3d6e;
  --klant-hovenier: #2f5233;
  --klant-rijschool: #c0301c;
  --klant-schoonmaak: #0f5c73;
  --klant: var(--klant-schilder);
  --pos-desktop: 66% 50%;                /* uitsnede van foto A; BRANCHES zet deze per branche */
  --pos-mobiel: 50% 50%;
  --pos-paneel: 50% 50%;

  /* vorm */
  --r-2: 2px;                            /* alleen de segmenten van de tijdbalk */
  --r-8: 8px;
  --r-12: 12px;
  --r-20: 20px;
  --pil: 9999px;
  --s-1: 0 0 0 1px rgba(22, 24, 29, 0.08);
  --s-2: 0 0 0 1px rgba(22, 24, 29, 0.06), 0 12px 32px -12px rgba(22, 24, 29, 0.22);
  --s-3: 0 1px 2px rgba(22, 24, 29, 0.08), 0 28px 60px -18px rgba(22, 24, 29, 0.42);

  /* ruimteschaal: binnen een groep hooguit de helft van de ruimte tussen groepen */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-96: 96px;
  --sp-112: 112px;
  --sp-160: 160px;

  /* raster en sectieruimte. --sectie en --kop-ruimte zijn vloeiend tussen 1280 en 760; kop naar inhoud is nooit meer dan 96 */
  --rand: 56px;
  --goot: 24px;
  --wrap: 1328px;
  --eiland: 1392px;
  --balk: 72px;
  --sectie: clamp(96px, calc(12.3077vw + 2.46px), 160px);
  --kop-ruimte: clamp(48px, calc(12.3077vw - 45.54px), 96px);

  /* lagen */
  --z-balk: 40;
  --z-proef: 70;
  --z-cookie: 80;
  --z-overslaan: 90;

  /* beweging */
  --duur-kort: 150ms;
  --duur-uit: 180ms;
  --duur-in: 240ms;
  --duur: 320ms;
  --duur-lang: 400ms;                    /* V17: nooit boven 400 */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --veer: cubic-bezier(0.2, 1.2, 0.3, 1);

  /* logo: wisselen van woordmerk is de id's omwisselen in assets/merk.svg plus deze verhouding.
     taqqle 2.927 (viewBox in merk.svg), TAQQLE 4.069 */
  --logo-hoogte: 28px;
  --logo-verhouding: 2.927;

  /* lettertype */
  --font: "Hanken Grotesk", "Hanken Fallback", "Helvetica Neue", Arial, sans-serif;

  /* typeschaal: mobiel tot 760, vloeiend tot 1280, daarboven desktop */
  --fs-display: clamp(44px, calc(6.1538vw - 2.77px), 76px);
  --lh-display: clamp(46px, calc(5.7692vw + 2.15px), 76px);
  --fs-kop: clamp(36px, calc(3.0769vw + 12.62px), 52px);
  --lh-kop: clamp(40px, calc(3.0769vw + 16.62px), 56px);
  --fs-feit: clamp(64px, calc(6.1538vw + 17.23px), 96px);
  --lh-feit: clamp(60px, calc(5.3846vw + 19.08px), 88px);
  --fs-anker: clamp(32px, calc(2.3077vw + 14.46px), 44px);
  --lh-anker: clamp(36px, calc(2.3077vw + 18.46px), 48px);
  --fs-cijfer: clamp(34px, calc(1.1538vw + 25.23px), 40px);
  --lh-cijfer: clamp(38px, calc(1.1538vw + 29.23px), 44px);
  --fs-kaart: clamp(24px, calc(0.7692vw + 18.15px), 28px);
  --lh-kaart: clamp(30px, calc(0.7692vw + 24.15px), 34px);
  --fs-vraag: clamp(19px, calc(0.5769vw + 14.62px), 22px);
  --lh-vraag: clamp(27px, calc(0.5769vw + 22.62px), 30px);
  --fs-lead: clamp(19px, calc(0.5769vw + 14.62px), 22px);
  --lh-lead: clamp(28px, calc(0.9615vw + 20.69px), 33px);
  --fs-tekst: clamp(17px, calc(0.1923vw + 15.54px), 18px);
  --lh-tekst: clamp(26px, calc(0.3846vw + 23.08px), 28px);

  /* zone midden: standaard voor elke sectie op licht */
  --grond: var(--wit);
  --tekst: var(--ink);
  --tekst-2: var(--zacht);
  --knop-grond: var(--ink);
  --knop-tekst: var(--wit);
  --knop-hover: var(--zwart);
  --focus: var(--ink);
  --tijd-vol: var(--mint-700);
  --tijd-leeg: var(--vlak-2);
  --vb-grond: var(--wit);
  --vb-tekst: var(--zacht);
  --vb-rand: var(--s-1);
  --haarlijn: var(--lijn);
}

/* Standaardstijl: :root staat voor het blok van de stijl die standaard is. Wisselen is :root naar het andere blok verplaatsen.
   Zo verliest een pagina zonder attribuut of met een tikfout nooit zijn menu, hero en footer */
:root, html[data-stijl="licht-inkt"] {
  /* zone top: menu, hero en de paginakop van de andere pagina's */
  --top-grond: var(--wit);
  --top-tekst: var(--ink);
  --top-zacht: var(--zacht);
  --top-lijn: var(--lijn);
  --top-knop-grond: var(--ink);
  --top-knop-tekst: var(--wit);
  --top-knop-hover: var(--zwart);
  --top-focus: var(--ink);
  --top-actief: var(--mint-700);
  --top-tijd-vol: var(--mint-700);
  --top-tijd-leeg: var(--vlak-2);
  --top-vb-grond: var(--wit);
  --top-vb-tekst: var(--zacht);
  --top-vb-rand: var(--s-1);
  --chip-rand: var(--lijn-knop);
  --chip-aan-grond: var(--mint);
  --chip-aan-tekst: var(--ink);
  --chip-aan-rand: var(--ink);
  --podium-rand: transparent;
  --tel-ring: transparent;
  --melding-rand: rgba(22, 24, 29, 0.08);
  /* voordelen */
  --voordelen-grond: var(--vlak);
  --tegel-1: var(--wit);
  --tegel-2: var(--mint-100);
  --tegel-3: var(--ink);
  --tegel-3-tekst: var(--op-ink);
  --tegel-3-tekst-2: var(--op-ink-zacht);
  /* overzicht */
  --overzicht-grond: var(--ink);
  --overzicht-tekst: var(--op-ink);
  --overzicht-zacht: var(--op-ink-zacht);
  --overzicht-focus: var(--op-ink);
  --overzicht-lijn: var(--lijn-donker);
  --overzicht-vb-grond: var(--ink-2);
  --overzicht-vb-tekst: var(--op-ink-zacht);
  --overzicht-vb-rand: 0 0 0 1px var(--lijn-donker);
  /* afsluiting */
  --slot-grond: var(--mint);
  --slot-tekst: var(--ink);
  --slot-knop-grond: var(--ink);
  --slot-knop-tekst: var(--wit);
  --slot-knop-hover: var(--zwart);
  --slot-focus: var(--ink);
  --slot-vb-grond: var(--wit);
  --slot-vb-tekst: var(--zacht);
  --slot-vb-rand: var(--s-1);
  /* footer */
  --voet-grond: var(--ink);
  --voet-tekst: var(--op-ink);
  --voet-zacht: var(--op-ink-zacht);
  --voet-lijn: var(--lijn-donker);
  --voet-focus: var(--op-ink);
}

html[data-stijl="inkt"] {
  --top-grond: var(--ink);
  --top-tekst: var(--op-ink);
  --top-zacht: var(--op-ink-zacht);
  --top-lijn: var(--lijn-donker);
  --top-knop-grond: var(--mint);
  --top-knop-tekst: var(--ink);
  --top-knop-hover: var(--mint-hover);
  --top-focus: var(--op-ink);
  --top-actief: var(--mint);
  --top-tijd-vol: var(--mint);
  --top-tijd-leeg: rgba(244, 245, 246, 0.18);
  --top-vb-grond: var(--ink-2);
  --top-vb-tekst: var(--op-ink-zacht);
  --top-vb-rand: 0 0 0 1px var(--lijn-donker);
  --chip-rand: rgba(244, 245, 246, 0.35);
  --chip-aan-grond: rgba(244, 245, 246, 0.16);   /* gekozen chip: stiller dan de mint knop, zodat de actie wint */
  --chip-aan-tekst: var(--op-ink);
  --chip-aan-rand: var(--op-ink);
  --podium-rand: var(--lijn-donker);
  --tel-ring: rgba(244, 245, 246, 0.35);
  --melding-rand: transparent;
  --voordelen-grond: var(--vlak);
  --tegel-1: var(--wit);
  --tegel-2: var(--mint-100);
  --tegel-3: var(--mint);                         /* in inkt een mint tegel, geen lege grijze doos */
  --tegel-3-tekst: var(--ink);
  --tegel-3-tekst-2: var(--ink);
  --overzicht-grond: var(--mint);                 /* het luide moment van inkt, zonder derde donker blok */
  --overzicht-tekst: var(--ink);
  --overzicht-zacht: var(--ink);
  --overzicht-focus: var(--ink);
  --overzicht-lijn: var(--lijn);
  --overzicht-vb-grond: var(--wit);
  --overzicht-vb-tekst: var(--zacht);
  --overzicht-vb-rand: var(--s-1);
  --slot-grond: var(--ink);
  --slot-tekst: var(--op-ink);
  --slot-knop-grond: var(--mint);
  --slot-knop-tekst: var(--ink);
  --slot-knop-hover: var(--mint-hover);
  --slot-focus: var(--op-ink);
  --slot-vb-grond: var(--ink-2);
  --slot-vb-tekst: var(--op-ink-zacht);
  --slot-vb-rand: 0 0 0 1px var(--lijn-donker);
  --voet-grond: var(--ink);
  --voet-tekst: var(--op-ink);
  --voet-zacht: var(--op-ink-zacht);
  --voet-lijn: var(--lijn-donker);
  --voet-focus: var(--op-ink);
}

/* Branche: zet de kleur van de klant, nooit die van Taqqle */
html[data-branche="hovenier"] { --klant: var(--klant-hovenier); }
html[data-branche="rijschool"] { --klant: var(--klant-rijschool); }
html[data-branche="schoonmaak"] { --klant: var(--klant-schoonmaak); }

/* Zones: zetten de generieke tokens op de waarden van die zone. Componenten lezen alleen de generieke tokens */
.zone-top {
  --grond: var(--top-grond);
  --tekst: var(--top-tekst);
  --tekst-2: var(--top-zacht);
  --knop-grond: var(--top-knop-grond);
  --knop-tekst: var(--top-knop-tekst);
  --knop-hover: var(--top-knop-hover);
  --focus: var(--top-focus);
  --tijd-vol: var(--top-tijd-vol);
  --tijd-leeg: var(--top-tijd-leeg);
  --vb-grond: var(--top-vb-grond);
  --vb-tekst: var(--top-vb-tekst);
  --vb-rand: var(--top-vb-rand);
  --haarlijn: var(--top-lijn);
}
/* Een blad wisselt nooit mee: wit met ink, ook op donker. De cookiekaart en de schermen in de telefoon zijn bladen. Daarom hier dezelfde waarden als midden */
.zone-midden, .blad, .melding, .cookiekaart, .ad, .pg, .post {
  --grond: var(--wit);
  --tekst: var(--ink);
  --tekst-2: var(--zacht);
  --knop-grond: var(--ink);
  --knop-tekst: var(--wit);
  --knop-hover: var(--zwart);
  --focus: var(--ink);
  --tijd-vol: var(--mint-700);
  --tijd-leeg: var(--vlak-2);
  --vb-grond: var(--wit);
  --vb-tekst: var(--zacht);
  --vb-rand: var(--s-1);
  --haarlijn: var(--lijn);
  --chip-rand: var(--lijn-knop);
  --chip-aan-grond: var(--mint);
  --chip-aan-tekst: var(--ink);
  --chip-aan-rand: var(--ink);
}
.zone-overzicht {
  --grond: var(--overzicht-grond);
  --tekst: var(--overzicht-tekst);
  --tekst-2: var(--overzicht-zacht);
  --focus: var(--overzicht-focus);
  --vb-grond: var(--overzicht-vb-grond);
  --vb-tekst: var(--overzicht-vb-tekst);
  --vb-rand: var(--overzicht-vb-rand);
  --haarlijn: var(--overzicht-lijn);
}
.zone-slot {
  --grond: var(--slot-grond);
  --tekst: var(--slot-tekst);
  --tekst-2: var(--slot-tekst);
  --knop-grond: var(--slot-knop-grond);
  --knop-tekst: var(--slot-knop-tekst);
  --knop-hover: var(--slot-knop-hover);
  --focus: var(--slot-focus);
  --vb-grond: var(--slot-vb-grond);
  --vb-tekst: var(--slot-vb-tekst);
  --vb-rand: var(--slot-vb-rand);
}
.zone-voet {
  --grond: var(--voet-grond);
  --tekst: var(--voet-tekst);
  --tekst-2: var(--voet-zacht);
  --focus: var(--voet-focus);
  --haarlijn: var(--voet-lijn);
}

/* Maten per breedte. Afbreekpunten uit de spec: 1041 en breder, 761 tot 1040, 760 en smaller */
@media (max-width: 1040px) {
  :root { --rand: 32px; --balk: 64px; }
}
@media (max-width: 760px) {
  :root { --rand: 20px; --balk: 60px; }
}
@media (max-width: 389px) {
  :root {
    --fs-display: clamp(38px, calc(8.5714vw + 10.57px), 44px);
    --lh-display: clamp(40px, calc(8.5714vw + 12.57px), 46px);
  }
}