/* Gegenereerd door huisstijl/bouw-tokens.js uit huisstijl/tokens/*.json. Niet met de hand aanpassen: npm run tokens */

@font-face { font-family: "Familjen Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/familjen-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/familjen-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/familjen-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/familjen-grotesk-700.woff2") format("woff2"); }

/* kNect Groep – bron: Principes van de homepage Architectdirect (Figma, 30-10-2026), toegepast op de kleuren van kNect Groep uit Branddeck */
:root, [data-merk="kg"] {
  --kn-primair: #005ed2;
  --kn-op-primair: #ffffff;
  --kn-secundair: #181925;
  --kn-op-secundair: #fffcfb;
  --kn-op-secundair-zacht: #fffcfb;
  --kn-icoon: #181925;
  --kn-primair-licht: #cce0f6;
  --kn-vinkje-vlak: var(--kn-secundair);
  --kn-vinkje-haak: var(--kn-op-secundair);
  --kn-vinkje-groot-vlak: var(--kn-secundair);
  --kn-vinkje-secundair-vlak: var(--kn-primair);
  --kn-vinkje-secundair-haak: var(--kn-op-primair);
  --kn-keuze-gekozen: var(--kn-primair-licht);
  --kn-label-ad: #a1b971;
  --kn-op-label-ad: var(--kn-tekst);
  --kn-label-ad-licht: #cfd9bb;
  --kn-label-ad-vinkje: #ff8547;
  --kn-label-cs: #ff8547;
  --kn-op-label-cs: #ffffff;
  --kn-label-cs-vinkje: var(--kn-primair);
  --kn-label-as: #b0caf2;
  --kn-label-as-vinkje: var(--kn-label-ad);
  --kn-sociaal: #4d8ee0;
  --kn-tekst: #181925;
  --kn-tekst-2: #6d6c6b;
  --kn-tekst-vanaf: #333333;
  --kn-tekst-voetnoot: #4d4d4d;
  --kn-achtergrond: #fffcfb;
  --kn-achtergrond-2: #f4f4f3;
  --kn-wit: #ffffff;
  --kn-donker: #181925;
  --kn-op-donker: #ffffff;
  --kn-op-donker-2: #a2a3a7;
  --kn-op-donker-3: #7a766c;
  --kn-lijn: #d2cecb;
  --kn-rand-kaart: #d2cecb;
  --kn-rand-knop: #181925;
  --kn-rand-kop: #f4f4f3;
  --kn-interactie: #005ed2;
  --kn-op-interactie: #ffffff;
  --kn-fout: #b3261e;
  --kn-link: #005ed2;
  --kn-goed: #1d7a46;
  --kn-font-sans: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --kn-type-display: 600 66px/0.86 var(--kn-font-sans);
  --kn-type-display-spatiering: -0.01em;
  --kn-type-kop-1: 600 45px/1.2 var(--kn-font-sans);
  --kn-type-prijs: 600 45px/1.1 var(--kn-font-sans);
  --kn-type-kop-2: 600 35px/1.15 var(--kn-font-sans);
  --kn-type-kop-3: 600 25px/1.2 var(--kn-font-sans);
  --kn-type-kop-4: 600 24px/1.25 var(--kn-font-sans);
  --kn-type-kop-5: 600 21px/1.2 var(--kn-font-sans);
  --kn-type-intro: 400 25px/1.15 var(--kn-font-sans);
  --kn-type-tekst-groot: 400 22px/1.4 var(--kn-font-sans);
  --kn-type-tekst: 400 16px/1.45 var(--kn-font-sans);
  --kn-type-tekst-klein: 400 14px/1.7 var(--kn-font-sans);
  --kn-type-navigatie: 400 14px/1.3 var(--kn-font-sans);
  --kn-type-knop: 600 16px/1.25 var(--kn-font-sans);
  --kn-type-knop-op-oranje: 700 17px/1.25 var(--kn-font-sans);
  --kn-type-klein: 400 11px/1.4 var(--kn-font-sans);
  --kn-type-toelichting: 400 16px/1.4 var(--kn-font-sans);
  --kn-type-label: 600 16px/1.3 var(--kn-font-sans);
  --kn-type-tekst-klein-vet: 600 14px/1.7 var(--kn-font-sans);
  --kn-type-label-klein: 600 14px/1.2 var(--kn-font-sans);
  --kn-ruimte-8: 8px;
  --kn-ruimte-16: 16px;
  --kn-ruimte-21: 21px;
  --kn-ruimte-32: 32px;
  --kn-ruimte-116: 116px;
  --kn-breedte-inhoud: 1280px;
  --kn-ruimte-64: 64px;
  --kn-afronding-geen: 0;
  --kn-afronding-kaart: 3px;
  --kn-afronding-blok: 3.6px;
  --kn-afschuining-knop: 16px;
  --kn-afschuining-pijlknop: 14px;
  --kn-afschuining-knop-neutraal: 11px;
  --kn-afschuining-vinkje: 6.5px;
  --kn-afschuining-vinkje-groot: 16px;
  --kn-afschuining-foto: 17%;
  --kn-hoogte-knop: 49px;
  --kn-hoogte-knop-neutraal: 48px;
  --kn-hoogte-pijlknop: 60px;
  --kn-hoogte-faq-knop: 39px;
  --kn-knop-type: var(--kn-type-knop);
  --kn-knop-pijl: 1.8;
  --kn-knop-accent-type: var(--kn-type-knop);
  --kn-knop-accent-pijl: 1.8;
}

/* Constructieshop – bron: Principes van de homepage Architectdirect (Figma, 30-10-2026), toegepast op de kleuren van Constructieshop uit Branddeck */
[data-merk="cs"] {
  --kn-primair: #ff8547;
  --kn-op-primair: #ffffff;
  --kn-secundair: #005ed2;
  --kn-op-secundair: #ffffff;
  --kn-op-secundair-zacht: #ffffff;
  --kn-icoon: #761e1d;
  --kn-primair-licht: #ffdcc8;
  --kn-vinkje-vlak: var(--kn-secundair);
  --kn-vinkje-haak: #fffcfb;
  --kn-vinkje-groot-vlak: var(--kn-secundair);
  --kn-vinkje-secundair-vlak: var(--kn-primair);
  --kn-vinkje-secundair-haak: var(--kn-tekst);
  --kn-secundair-licht: #dbe8f8;
  --kn-keuze-gekozen: var(--kn-secundair-licht);
  --kn-sociaal: #ffa375;
  --kn-tekst: #181925;
  --kn-tekst-2: #6d6c6b;
  --kn-tekst-vanaf: #333333;
  --kn-tekst-voetnoot: #4d4d4d;
  --kn-achtergrond: #fffcfb;
  --kn-achtergrond-2: #f4f4f3;
  --kn-wit: #ffffff;
  --kn-donker: #181925;
  --kn-op-donker: #ffffff;
  --kn-op-donker-2: #a2a3a7;
  --kn-op-donker-zacht: #c5c6c9;
  --kn-op-donker-3: #7a766c;
  --kn-lijn: #d2cecb;
  --kn-rand-kaart: #d2cecb;
  --kn-rand-knop: #181925;
  --kn-rand-kop: #f4f4f3;
  --kn-indicator: #d2cecb;
  --kn-ster: #fbbc05;
  --kn-interactie: #005ed2;
  --kn-op-interactie: #ffffff;
  --kn-fout: #b3261e;
  --kn-link: #005ed2;
  --kn-goed: #1d7a46;
  --kn-label-ad: #a1b971;
  --kn-label-cs: #ff8547;
  --kn-label-as: #b0caf2;
  --kn-font-sans: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --kn-type-display: 600 66px/0.86 var(--kn-font-sans);
  --kn-type-display-spatiering: -0.01em;
  --kn-type-kop-1: 600 45px/1.2 var(--kn-font-sans);
  --kn-type-prijs: 600 45px/1.1 var(--kn-font-sans);
  --kn-type-kop-2: 600 35px/1.15 var(--kn-font-sans);
  --kn-type-kop-3: 600 25px/1.2 var(--kn-font-sans);
  --kn-type-kop-4: 600 24px/1.25 var(--kn-font-sans);
  --kn-type-kop-5: 600 21px/1.2 var(--kn-font-sans);
  --kn-type-intro: 400 25px/1.15 var(--kn-font-sans);
  --kn-type-tekst-groot: 400 22px/1.4 var(--kn-font-sans);
  --kn-type-tekst: 400 16px/1.45 var(--kn-font-sans);
  --kn-type-tekst-klein: 400 14px/1.7 var(--kn-font-sans);
  --kn-type-navigatie: 400 14px/1.3 var(--kn-font-sans);
  --kn-type-knop: 600 16px/1.25 var(--kn-font-sans);
  --kn-type-knop-op-oranje: 700 17px/1.25 var(--kn-font-sans);
  --kn-type-klein: 400 11px/1.4 var(--kn-font-sans);
  --kn-type-toelichting: 400 16px/1.4 var(--kn-font-sans);
  --kn-type-label: 600 16px/1.3 var(--kn-font-sans);
  --kn-type-tekst-klein-vet: 600 14px/1.7 var(--kn-font-sans);
  --kn-type-label-klein: 600 14px/1.2 var(--kn-font-sans);
  --kn-ruimte-8: 8px;
  --kn-ruimte-16: 16px;
  --kn-ruimte-21: 21px;
  --kn-ruimte-32: 32px;
  --kn-ruimte-116: 116px;
  --kn-breedte-inhoud: 1280px;
  --kn-ruimte-64: 64px;
  --kn-afronding-geen: 0;
  --kn-afronding-kaart: 3px;
  --kn-afronding-blok: 3.6px;
  --kn-afschuining-knop: 16px;
  --kn-afschuining-pijlknop: 14px;
  --kn-afschuining-knop-neutraal: 11px;
  --kn-afschuining-vinkje: 6.5px;
  --kn-afschuining-vinkje-groot: 16px;
  --kn-afschuining-foto: 17%;
  --kn-hoogte-knop: 49px;
  --kn-hoogte-knop-neutraal: 48px;
  --kn-hoogte-pijlknop: 60px;
  --kn-hoogte-faq-knop: 39px;
  --kn-knop-type: var(--kn-type-knop-op-oranje);
  --kn-knop-pijl: 2.2;
  --kn-knop-accent-type: var(--kn-type-knop);
  --kn-knop-accent-pijl: 1.8;
}

/* Architectdirect – bron: Homepage Architectdirect (Figma-export, 30-10-2026) – leidend; aangevuld met Branddeck */
[data-merk="ad"] {
  --kn-primair: #a1b971;
  --kn-op-primair: #181925;
  --kn-secundair: #ff8547;
  --kn-op-secundair: #ffffff;
  --kn-op-secundair-zacht: #6d3b21;
  --kn-icoon: #3c3e25;
  --kn-interactie: #ff8547;
  --kn-op-interactie: #ffffff;
  --kn-primair-licht: #cfd9bb;
  --kn-vinkje-vlak: var(--kn-secundair);
  --kn-vinkje-haak: var(--kn-tekst);
  --kn-vinkje-groot-vlak: var(--kn-secundair);
  --kn-vinkje-secundair-vlak: var(--kn-primair);
  --kn-vinkje-secundair-haak: var(--kn-tekst);
  --kn-tekst: #181925;
  --kn-tekst-2: #6d6c6b;
  --kn-tekst-vanaf: #333333;
  --kn-tekst-voetnoot: #4d4d4d;
  --kn-achtergrond: #fffcfb;
  --kn-achtergrond-2: #f4f4f3;
  --kn-wit: #ffffff;
  --kn-donker: #181925;
  --kn-op-donker: #ffffff;
  --kn-op-donker-2: #a2a3a7;
  --kn-op-donker-zacht: #c5c6c9;
  --kn-op-donker-3: #7a766c;
  --kn-lijn: #d2cecb;
  --kn-rand-kop: #f4f4f3;
  --kn-indicator: #d2cecb;
  --kn-ster: #fbbc05;
  --kn-sociaal: #afc386;
  --kn-rand-kaart: #d2cecb;
  --kn-rand-knop: #181925;
  --kn-fout: #b3261e;
  --kn-link: #005ed2;
  --kn-goed: #1d7a46;
  --kn-secundair-licht: #ffdcc8;
  --kn-keuze-gekozen: var(--kn-secundair-licht);
  --kn-label-ad: #a1b971;
  --kn-label-cs: #ff8547;
  --kn-label-as: #b0caf2;
  --kn-font-sans: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --kn-type-display: 600 66px/0.86 var(--kn-font-sans);
  --kn-type-display-spatiering: -0.01em;
  --kn-type-kop-1: 600 45px/1.2 var(--kn-font-sans);
  --kn-type-prijs: 600 45px/1.1 var(--kn-font-sans);
  --kn-type-kop-2: 600 35px/1.15 var(--kn-font-sans);
  --kn-type-kop-3: 600 25px/1.2 var(--kn-font-sans);
  --kn-type-kop-4: 600 24px/1.25 var(--kn-font-sans);
  --kn-type-kop-5: 600 21px/1.2 var(--kn-font-sans);
  --kn-type-intro: 400 25px/1.15 var(--kn-font-sans);
  --kn-type-tekst-groot: 400 22px/1.4 var(--kn-font-sans);
  --kn-type-tekst: 400 16px/1.45 var(--kn-font-sans);
  --kn-type-tekst-klein: 400 14px/1.7 var(--kn-font-sans);
  --kn-type-navigatie: 400 14px/1.3 var(--kn-font-sans);
  --kn-type-knop: 600 16px/1.25 var(--kn-font-sans);
  --kn-type-knop-op-oranje: 700 17px/1.25 var(--kn-font-sans);
  --kn-type-klein: 400 11px/1.4 var(--kn-font-sans);
  --kn-type-toelichting: 400 16px/1.4 var(--kn-font-sans);
  --kn-type-label: 600 16px/1.3 var(--kn-font-sans);
  --kn-type-tekst-klein-vet: 600 14px/1.7 var(--kn-font-sans);
  --kn-type-label-klein: 600 14px/1.2 var(--kn-font-sans);
  --kn-ruimte-8: 8px;
  --kn-ruimte-16: 16px;
  --kn-ruimte-21: 21px;
  --kn-ruimte-32: 32px;
  --kn-ruimte-116: 116px;
  --kn-breedte-inhoud: 1280px;
  --kn-ruimte-64: 64px;
  --kn-afronding-geen: 0;
  --kn-afronding-kaart: 3px;
  --kn-afronding-blok: 3.6px;
  --kn-afschuining-knop: 16px;
  --kn-afschuining-pijlknop: 14px;
  --kn-afschuining-knop-neutraal: 11px;
  --kn-afschuining-vinkje: 6.5px;
  --kn-afschuining-vinkje-groot: 16px;
  --kn-afschuining-foto: 17%;
  --kn-hoogte-knop: 49px;
  --kn-hoogte-knop-neutraal: 48px;
  --kn-hoogte-pijlknop: 60px;
  --kn-hoogte-faq-knop: 39px;
  --kn-knop-type: var(--kn-type-knop-op-oranje);
  --kn-knop-pijl: 2.2;
  --kn-knop-accent-type: var(--kn-type-knop-op-oranje);
  --kn-knop-accent-pijl: 2.2;
}