/* ============================================================
   JR TECHNIEK — 1. TOKENS
   Drie lagen volgens de W3C-tokenspecificatie:
   primitief -> semantisch -> component.
   Raak in blokken of pagina's alleen de semantische en
   componentlaag aan, nooit de primitieve waarden.
   ============================================================ */

/* ---------- Lettertypen ---------- */
@font-face { font-family: "Tracklister"; font-weight: 300;     font-style: normal; font-display: swap; src: url("../fonts/Tracklister-Light.woff2") format("woff2"); }
@font-face { font-family: "Tracklister"; font-weight: 500;     font-style: normal; font-display: swap; src: url("../fonts/Tracklister-Medium.woff2") format("woff2"); }
@font-face { font-family: "Tracklister"; font-weight: 600;     font-style: normal; font-display: swap; src: url("../fonts/Tracklister-Semibold.woff2") format("woff2"); }
@font-face { font-family: "Tracklister"; font-weight: 700;     font-style: normal; font-display: swap; src: url("../fonts/Tracklister-Bold.woff2") format("woff2"); }
@font-face { font-family: "Tracklister"; font-weight: 800 900; font-style: normal; font-display: swap; src: url("../fonts/Tracklister-Extrabold.woff2") format("woff2"); }

:root {
  /* ==========================================================
     LAAG 1 — PRIMITIEF. Ruwe waarden, geen betekenis.
     Deze wijzig je alleen als het merk zelf verandert.
     ========================================================== */
    /* Feller azuur in plaats van het stoffige staalblauw. Verzadiging gaat
       van 0,84 naar 0,94-0,96 en het contrast stijgt mee: blauw-500 op wit
       van 4,70 naar 4,81, blauw-400 op donker van 5,74 naar 6,74. */
  --blauw-100: #E7F1FF; --blauw-200: #BCDCFF; --blauw-300: #7FBEFF; --blauw-400: #3AA9FF;
  --blauw-500: #0A6FE0; --blauw-600: #0C63CC; --blauw-700: #08488F;

  --neutraal-0: #FFFFFF;  --neutraal-50: #F6F7F8;  --neutraal-100: #EEF0F2; --neutraal-200: #DDE0E4;
  --neutraal-300: #B9BEC6; --neutraal-400: #8A9099; --neutraal-500: #5F656D; --neutraal-600: #3C4046;
  --neutraal-700: #2E3135; --neutraal-800: #242629; --neutraal-900: #1B1C1E; --neutraal-950: #17181A;

  /* Merkkleur van WhatsApp, alleen voor het icoon op de secundaire knop.
     Op een licht vlak de diepere tint (4,14 contrast op wit), op een
     donker vlak de heldere. Zo blijft het herkenbaar zonder te schreeuwen. */
  --whatsapp: #25D366; --whatsapp-icoon: #128C7E;
  --geel-100: #FFF4D6; --geel-500: #E0B04A; --geel-700: #7A4E00;
    /* Warm wit voor knoppen op donkere vlakken: zuiver wit oogt daar klinisch. */
  --warmwit: #F4F2EF;
  --rood-100: #FDECEC; --rood-500: #E39B9B; --rood-700: #A32020;
  --groen-100: #E8F6EC; --groen-500: #8FCBA1; --groen-700: #1E6B36;

  /* Kopfont. Terug naar Tracklister? Zet de regel hieronder terug op:
     "Tracklister", "Archivo", "Helvetica Neue", Arial, sans-serif */
  --familie-kop: "Plus Jakarta Sans", "Tracklister", "Helvetica Neue", Arial, sans-serif;
  --familie-ui: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
  --familie-body: "Manrope", "Segoe UI", Arial, sans-serif;

  --gewicht-light: 300; --gewicht-normaal: 400; --gewicht-medium: 500;
  --gewicht-semibold: 600; --gewicht-bold: 700; --gewicht-xbold: 800;

  --tekst-tiny: 0.75rem; --tekst-small: 0.875rem; --tekst-regular: 1rem;
  --tekst-medium: 1.125rem; --tekst-large: 1.25rem;

  /* Hero staat een trede boven h1: dat is de enige plek waar hij mag. */
  --kop-hero: clamp(2.35rem, 6vw, 5.2rem); /* min omlaag: op 375px van 4 naar 3 regels */
  --kop-h1: clamp(2.5rem, 5.4vw, 4.5rem);  --kop-h2: clamp(1.95rem, 3.6vw, 3rem);
  --kop-h3: clamp(1.5rem, 2.4vw, 2rem);    --kop-h4: clamp(1.25rem, 1.7vw, 1.5rem);
  --kop-h5: 1.25rem;                        --kop-h6: 1rem;

  --ruimte-tiny: 0.125rem;  --ruimte-xxsmall: 0.25rem; --ruimte-xsmall: 0.5rem;
  --ruimte-small: 1rem;     --ruimte-custom1: 1.5rem;  --ruimte-medium: 2rem;
  --ruimte-custom2: 2.5rem; --ruimte-large: 3rem;      --ruimte-custom3: 3.5rem;
  --ruimte-xlarge: 4rem;    --ruimte-xxlarge: 5rem;    --ruimte-huge: 6rem;
  --ruimte-xhuge: 8rem;     --ruimte-xxhuge: 12rem;

  --breed-xxsmall: 12rem; --breed-xsmall: 16rem; --breed-small: 20rem; --breed-medium: 32rem;
  --breed-large: 48rem;   --breed-xlarge: 64rem; --breed-xxlarge: 80rem;

  --radius-xs: 6px; --radius-s: 8px; --radius-m: 12px;
  --radius-l: 18px; --radius-xl: 22px; --radius-vol: 999px;

  --duur-snel: .15s; --duur-normaal: .25s; --duur-traag: .7s;
  /* Onthullen mag rustig duren: te snel valt niemand op. De trapjes
     zetten de leesvolgorde neer, met de actie steeds als laatste. */
  --duur-onthul: 1s; --trap: .13s;
  --soepel: cubic-bezier(.2,.7,.2,1);
  --soepel-uit: cubic-bezier(.16,.84,.3,1);

  /* ==========================================================
     LAAG 2 — SEMANTISCH. Benoemt de bedoeling, niet de kleur.
     Dit is wat je in blokken gebruikt.
     ========================================================== */
  --vlak: var(--neutraal-0);
  --vlak-zacht: var(--neutraal-100);
  --vlak-diep: var(--neutraal-900);
  --tekst-primair: var(--neutraal-950);
  --tekst-secundair: var(--neutraal-500);
  --tekst-tertiair: var(--neutraal-400);
  --accent-tekst: var(--blauw-500);
  --accent-vlak: var(--blauw-400);
  --accent-zacht: var(--blauw-100);
  --lijn: var(--neutraal-200);
  --lijn-sterk: var(--neutraal-950);
  --schaduw-hoog: 0 16px 36px rgba(0,0,0,0.25);

  --sectie-small: var(--ruimte-large);
  --sectie-medium: var(--ruimte-huge);
  --sectie-large: var(--ruimte-xhuge);
  --rand-globaal: var(--ruimte-custom2);
    /* Voor balken die de volle breedte houden (kopbalk, footer, hero):
       de zijruimte groeit mee zodat de inhoud op dezelfde breedte
       centreert als .omhulsel, terwijl randen en lijnen doorlopen. */
  --goot-midden: max(var(--rand-globaal), calc(50% - var(--breed-xxlarge) / 2 + var(--rand-globaal)));
  --paneel-marge: 12px;

  /* ==========================================================
     LAAG 3 — COMPONENT. Per element, verwijst naar laag 2.
     Hiermee pas je één component aan zonder de basis te raken.
     ========================================================== */
    /* Blauw is het accent, niet de actie. Een knop in bijna-zwart geeft
       witte tekst 17,77 contrast tegenover 7,00 op blauw, en laat het
       blauw over voor kickers, cijfers en iconen. */
  --knop-vlak: var(--neutraal-950);
  --knop-tekst: var(--neutraal-0);
  --knop-vlak-hover: var(--neutraal-800);
  --knop-tekst-hover: var(--neutraal-0);
  --knop-glans: rgba(255,255,255,0.10);
  --knop-schaduw: 0 1px 2px rgba(12,14,17,0.24), 0 10px 26px -12px rgba(12,14,17,0.5);
  --knop-lijn: var(--neutraal-950);
  --knop-hoogte: 48px;
  --knop-hoogte-klein: 40px;

  --veld-vlak: var(--vlak);
  --veld-lijn: var(--lijn);
  --veld-lijn-hover: var(--neutraal-300);
  --veld-lijn-focus: var(--accent-vlak);
  --veld-hoogte: 48px;

  --kaart-vlak: var(--vlak);
  --kaart-lijn: var(--lijn);
  --kaart-radius: var(--radius-l);
}

/* ============================================================
   DONKER OPPERVLAK — één klasse herricht de semantische laag.
   Alles binnenin volgt automatisch. Zet deze klasse op elk
   blok met een donkere achtergrond.
   ============================================================ */
.op-donker {
  --vlak: var(--neutraal-900);
  --vlak-zacht: var(--neutraal-800);
  --tekst-primair: var(--neutraal-0);
  --tekst-secundair: var(--neutraal-300);
  --tekst-tertiair: var(--neutraal-400);
  --accent-tekst: var(--blauw-400);
  --accent-vlak: var(--blauw-400);
  --accent-zacht: var(--neutraal-800);
  --lijn: rgba(255,255,255,0.14);
  --lijn-sterk: var(--blauw-400);
  --knop-lijn: rgba(255,255,255,0.55);
    /* Omgekeerd op donker: een lichte knop leest daar als de hoofdactie
       zonder dat er een rand omheen hoeft. Contrast 15,90. */
    /* Zuiver wit in plaats van warmwit: op warmwit haalt blauw-500 maar
       4,31 contrast, op zuiver wit 4,81. In rust het diepe blauw-700
       (9,00), bij hover het heldere blauw-500 van de dienstnummers. */
  --knop-vlak: var(--neutraal-0);
  --knop-tekst: var(--blauw-700);
    /* Hover keert volledig om naar bijna-zwart met witte tekst: 17,77
       contrast, en een duidelijke toestandswissel in plaats van alleen
       een andere tint blauw. */
  --knop-vlak-hover: var(--neutraal-950);
  --knop-tekst-hover: var(--neutraal-0);
  --knop-glans: rgba(12,14,17,0.06);
  --knop-schaduw: 0 1px 2px rgba(0,0,0,0.30), 0 12px 30px -12px rgba(0,0,0,0.55);
  --whatsapp-icoon: var(--whatsapp);
  --veld-vlak: var(--neutraal-800);
  --veld-lijn-hover: var(--neutraal-500);
  --kaart-vlak: var(--neutraal-800);
  background: var(--vlak);
  color: var(--tekst-primair);
}

/* Randwaarde en sectiehoogte krimpen mee op kleine schermen. */
@media (max-width: 900px) {
  :root { --rand-globaal: var(--ruimte-custom1); --sectie-large: var(--ruimte-huge); }
}

/* Terug naar het lichte oppervlak binnen een donker of blauw blok,
   bijvoorbeeld een witte kaart op een gekleurd vlak. */
.op-licht {
  --vlak: var(--neutraal-0);
  --vlak-zacht: var(--neutraal-100);
  --tekst-primair: var(--neutraal-950);
  --tekst-secundair: var(--neutraal-500);
  --tekst-tertiair: var(--neutraal-400);
  --accent-tekst: var(--blauw-500);
  --accent-vlak: var(--blauw-400);
  --accent-zacht: var(--blauw-100);
  --lijn: var(--neutraal-200);
  --lijn-sterk: var(--neutraal-950);
  --knop-lijn: var(--neutraal-950);
    /* De knop moet hier terug naar de lichte-vlak-variant. Zonder deze
       vier regels erft een .op-licht-kaart bínnen een donkere sectie de
       omgekeerde knop en staat er wit op wit. */
  --knop-vlak: var(--neutraal-950);
  --knop-tekst: var(--neutraal-0);
  --knop-vlak-hover: var(--neutraal-800);
  --knop-tekst-hover: var(--neutraal-0);
  --knop-glans: rgba(255,255,255,0.10);
  --knop-schaduw: 0 1px 2px rgba(12,14,17,0.24), 0 10px 26px -12px rgba(12,14,17,0.5);
  --veld-vlak: var(--neutraal-0);
  --veld-lijn-hover: var(--neutraal-300);
  --kaart-vlak: var(--neutraal-0);
  background: var(--vlak);
  color: var(--tekst-primair);
}

/* Blauw oppervlak, voor de contactsectie. Tekst blijft donker. */
.op-accent {
  --vlak: var(--blauw-400);
  --tekst-primair: var(--neutraal-950);
  --tekst-secundair: var(--neutraal-800);
  --lijn: rgba(23,24,26,0.2);
  --knop-lijn: var(--neutraal-950);
    /* De knop moet hier terug naar de lichte-vlak-variant. Zonder deze
       vier regels erft een .op-licht-kaart bínnen een donkere sectie de
       omgekeerde knop en staat er wit op wit. */
  --knop-vlak: var(--neutraal-950);
  --knop-tekst: var(--neutraal-0);
  --knop-vlak-hover: var(--neutraal-800);
  --knop-tekst-hover: var(--neutraal-0);
  --knop-glans: rgba(255,255,255,0.10);
  --knop-schaduw: 0 1px 2px rgba(12,14,17,0.24), 0 10px 26px -12px rgba(12,14,17,0.5);
  background: var(--vlak);
  color: var(--tekst-primair);
}