/* =========================================================================
   LTB Connect – design tokens
   Richting A1 "Samen verder" · Bricolage Grotesque + Figtree
   Bron: design/DESIGN-SYSTEM.md. Dit is het ENIGE tokensbestand;
   design/tokens.css is een symlink hiernaartoe. Kleuren zijn afgeleid van het logo
   (assets/logo/ltb-connect-logo.png). Contrast: zie DESIGN-SYSTEM.md §2.
   ========================================================================= */

/* ---------- Fonts (zelf gehost, latin-subset, variabel) ----------
   Bron: Google Fonts, SIL Open Font License. Paden relatief aan dit bestand (site/css/).
   WordPress: verplaats naar het thema en laad via wp_enqueue_style. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Kleur: merk (uit het logo) ---------- */
  --c-navy:          #062349; /* primair · tekst, koppen, donkere vlakken · 15,6:1 op wit */
  --c-berg-donker:   #143A62; /* tweede donkere vlakkleur · wit erop 11,6:1 */
  --c-berg-midden:   #20496E; /* decoratief, illustraties · wit erop 9,4:1 */
  --c-berg-licht:    #396890; /* decoratief, grote tekst · 5,9:1 op wit */
  --c-staal:         #4C8DBC; /* logo-slogan · alleen decoratief + focusring (3,6:1 wit, 4,4:1 navy) */
  --c-oranje:        #CA6B1A; /* logo-swoosh · alleen de boog en grote vormen (3,7:1) */

  /* ---------- Kleur: afgeleid voor toegankelijkheid ---------- */
  --c-oranje-actie:  #B05A12; /* knopachtergrond · wit erop 4,9:1 */
  --c-oranje-hover:  #8F4A0F; /* knop-hover · wit erop 6,7:1 */
  --c-oranje-tekst:  #8F4A0F; /* oranje tekst op wit/tint (≥6:1) */
  --c-oranje-licht:  #F0B47E; /* oranje accent op navy · 8,6:1 */
  --c-staal-tekst:   #2F6E9C; /* links op wit 5,5:1 · op tint 4,9:1 */

  /* ---------- Kleur: neutraal (getint naar de merk-hue, niet naar warm) ---------- */
  --c-wit:           #FFFFFF; /* paginabasis */
  --c-tint:          #EEF4F9; /* rustige vlakken, routekeuze · navy erop 14,1:1 */
  --c-tint-sterk:    #DCE8F3; /* label "Vast", hover-vlakken */
  --c-tint-oranje:   #FBE3CC; /* label "Zzp" – alleen labels, nooit als pagina-achtergrond */
  --c-tint-oranje-tekst: #7A3E0A; /* tekst op --c-tint-oranje · 6,7:1 */
  --c-ink:           var(--c-navy);
  --c-ink-zacht:     #4C5A6E; /* secundaire tekst · 7,0:1 op wit, 6,3:1 op tint */
  --c-ink-op-donker: #C9D6E4; /* secundaire tekst op navy · 10,6:1 */
  --c-rand:          #D5DEE8; /* decoratieve lijnen en kaartranden */
  --c-rand-op-donker: rgba(201, 214, 228, 0.22); /* scheidingslijnen op navy (decoratief) */
  --c-rand-veld:     #6B7A8E; /* formulierveldranden · 4,4:1 (≥3:1 vereist) */
  --c-fout:          #B3261E; /* foutmeldingen · 6,5:1 */
  --c-succes:        #1E6B45; /* bevestigingen · 6,5:1 */

  /* ---------- Rollen ---------- */
  --bg:              var(--c-wit);
  --bg-rustig:       var(--c-tint);
  --bg-donker:       var(--c-navy);
  --tekst:           var(--c-ink);
  --tekst-zacht:     var(--c-ink-zacht);
  --link:            var(--c-staal-tekst);
  --actie:           var(--c-oranje-actie);
  --actie-hover:     var(--c-oranje-hover);
  --focus:           var(--c-staal);

  /* ---------- Typografie ---------- */
  --font-kop:   "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --font-tekst: "Figtree", "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid schaal, ratio ≥1,25 per stap · 360px → 1440px */
  --fs-xs:      0.875rem;                                  /* 14   · labels, meta */
  --fs-s:       1rem;                                      /* 16   · knoppen, kleine tekst */
  --fs-body:    clamp(1.0625rem, 1.01rem + 0.25vw, 1.125rem); /* 17→18 · broodtekst */
  --fs-lead:    clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);   /* 19→22 · intro */
  --fs-h4:      clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);     /* 20→24 · kaarttitels */
  --fs-h3:      clamp(1.5rem, 1.3rem + 0.85vw, 1.875rem);     /* 24→30 */
  --fs-h2:      clamp(1.875rem, 1.5rem + 1.65vw, 2.75rem);    /* 30→44 */
  --fs-h1:      clamp(2.25rem, 1.65rem + 2.7vw, 3.75rem);     /* 36→60 · paginatitels */
  --fs-display: clamp(2.25rem, 1.3rem + 4.2vw, 5rem);        /* 36→80 · alleen de hero */

  --fw-tekst: 400;
  --fw-tekst-medium: 500;
  --fw-tekst-bold: 700;
  --fw-kop-s: 700;   /* h3, h4, kaarten */
  --fw-kop-l: 800;   /* display, h1, h2 */

  --lh-display: 1.02;
  --lh-kop: 1.1;
  --lh-kop-s: 1.25;
  --lh-tekst: 1.6;
  --lh-krap: 1.4;

  --ls-display: -0.025em;
  --ls-kop: -0.015em;
  --ls-tekst: 0;

  --maat-tekst: 65ch; /* maximale regellengte */

  /* ---------- Spacing (4px-grid) ---------- */
  --s-1: 0.25rem;  /*  4 */
  --s-2: 0.5rem;   /*  8 */
  --s-3: 0.75rem;  /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.25rem;  /* 20 */
  --s-6: 1.5rem;   /* 24 */
  --s-8: 2rem;     /* 32 */
  --s-10: 2.5rem;  /* 40 */
  --s-12: 3rem;    /* 48 */
  --s-16: 4rem;    /* 64 */
  --s-20: 5rem;    /* 80 */
  --s-24: 6rem;    /* 96 */
  --s-32: 8rem;    /* 128 */

  --s-sectie:      clamp(4rem, 2.5rem + 6.5vw, 8rem);   /* 64 → 128 tussen secties */
  --s-sectie-krap: clamp(3rem, 2rem + 4vw, 5rem);       /* 48 → 80 voor verwante secties */
  --s-gutter:      clamp(1rem, 0.5rem + 2.2vw, 2rem);   /* 16 → 32 zijmarge */

  /* ---------- Layout ---------- */
  --container:        75rem;   /* 1200 · standaard */
  --container-breed:  85rem;   /* 1360 · hero, vacature-overzicht */
  --container-smal:   47.5rem; /* 760  · tekstpagina's, privacy, voorwaarden */
  --header-h:         4.5rem;  /* 72 · desktop */
  --header-h-mobiel:  4rem;    /* 64 · mobiel */
  --klikvlak-min:     2.75rem; /* 44 · minimale klik-/tikgrootte */
  --knop-h:           3rem;    /* 48 · minimale knophoogte */
  --knop-h-groot:     3.5rem;  /* 56 · grote knop (hero, CTA) */
  /* Breakpoints (alleen in media queries bruikbaar, min-width, mobile-first):
     sm 480px · md 768px · lg 1024px · xl 1280px */

  /* ---------- Vorm ---------- */
  --r-s:    0.5rem;  /*  8 · formuliervelden */
  --r-m:    1rem;    /* 16 · routekeuze, vacaturekaart, foto's */
  --r-pill: 999px;   /* knoppen, labels */
  --r-foto: 1rem 1rem 1rem 4rem; /* signatuurhoek oprichtersfoto (linksonder) */

  --rand-dun:   1px solid var(--c-rand);
  --rand-veld:  1.5px solid var(--c-rand-veld);
  --rand-knop:  2px solid currentColor;
  --boog-dikte: 7;      /* lijndikte van de oranje boog (SVG stroke-width, in viewBox-eenheden) */
  --onderstreep: 2px;   /* hover-/actief-onderstreping in navigatie */

  /* Schaduwen: spaarzaam. Alleen voor elementen die echt boven de pagina zweven. */
  --schaduw-zweef: 0 18px 40px -20px rgba(6, 35, 73, 0.35);  /* dropdown, sticky header na scrollen */
  --schaduw-geen:  none;                                      /* kaarten en tegels: geen schaduw */

  --focus-breedte: 3px;  /* outline 3px, offset 3px; op navy-vlakken (.op-donker) in --c-oranje-licht */

  /* ---------- Motion ---------- */
  --dur-1: 150ms;  /* kleur, randen */
  --dur-2: 250ms;  /* hover-verschuivingen, pijlen */
  --dur-3: 400ms;  /* lijnen, panelen */
  --dur-in: 600ms; /* binnenkomen van secties/elementen */
  --stagger: 80ms; /* tussen items in één lijst */
  --ease-uit:    cubic-bezier(0.22, 1, 0.36, 1);  /* standaard: rustig uitlopen */
  --ease-in-uit: cubic-bezier(0.65, 0, 0.35, 1);  /* panelen open/dicht */
  --beweging-in: 12px; /* afstand fade/slide bij binnenkomen */
  --beweging-hover: 6px; /* pijl-verschuiving bij hover */

  /* ---------- Lagen ---------- */
  --z-basis: 0;
  --z-boven: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}