/* Sjofar-huisstijl als CSS-variabelen - afgestemd op de nieuwe website
   (g98.nl/sjofar, Elementor global kit). Eén bron voor kleur, typografie en maat.
   Houd nieuwe UI binnen deze tokens (zie docs/huisstijl.md). */
:root {
  /* Kleur - 1:1 uit de Elementor global kit van de nieuwe site */
  --blue-700: #004780; /* primair - koppen, links, knop-hover-vlak */
  --blue-100: #dee8f2; /* secundair - lichte vlakken, randen, knop-hover-tekst */
  --ink-900:  #1c2a39; /* tekstkleur (donker navy) */
  --gold-500: #e8b400; /* accent - knoppen, de "K" van Connect */
  --gold-300: #f4d978; /* licht goud */
  --bg-50:    #f7f9fc; /* paginavlak (koel licht) */
  --paper:    #ffffff;
  --line:     #dee8f2; /* randen (= secundair blauw) */
  --muted:    #5b6b7b;
  --ok: #2e7d52;
  --warn: #b4690e;
  --err: #b3261e;
  --sidebar-bg: #eef3f9;     /* zijbalk-vlak - zacht blauw, breekt het wit */
  --sidebar-active: #c5d8f0; /* actief menu-item - nadrukkelijker dan het zijbalk-vlak */

  /* Typografie - Poppins (koppen/UI) + Inter (tekst); lokaal in styles/fonts/ */
  --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Poppins", system-ui, sans-serif; /* "Connect"-wordmerk */
  /* Uniforme datamaat (verzoek Harm, 12/06/2026): EEN standaard voor alle
     data-weergave - datarijen, koprij, tellerregel, veldlabels, veldwaarden
     en lege-states gebruiken allemaal deze maat. */
  --fs-data: .75rem;

  /* Maatvoering (de site gebruikt strakke, vrijwel rechte hoeken) */
  --radius: 8px;      /* kaarten */
  --radius-sm: 4px;   /* knoppen, kleine elementen */
  --gap: 16px;
  /* Primaire chrome-iconen: EEN maat voor de hoofdnavigatie-iconen - de
     actie-iconen in de topbalk (.topbar-icon) en de menu-iconen in de zijbalk
     (.nav-link/.nav-parent) - zodat header en menu altijd gelijk blijven. Andere
     iconen (submenu, lijstcellen, chips, ...) houden bewust hun eigen, kleinere
     contextmaat en vallen hier niet onder. */
  --icon-chrome: 20px;
  /* Toelichting-(i)-knop: EEN maat app-breed (uniform, NFR-9). Het uiterlijk
     (en dus de maat) van de gedeelde .toelichting-knop staat een keer hier;
     consumers regelen alleen de plaatsing, geen eigen knop-/icoonmaat meer. */
  --toelichting-knop: 22px;     /* klikvlak van de i-knop */
  --toelichting-knop-svg: 14px; /* het icoon erin */
  /* Teller-uitsteek: hoever de teller-.badge over de rechterbovenhoek van het
     icoon uitsteekt. Gedeeld door topbalk en menu via .ico-teller (base.css), dus
     EEN knop voor beide: groter = verder naar buiten, minder overlap met het
     icoon. */
  --badge-uitsteek: 11px;
  --shadow: 0 1px 2px rgba(0, 71, 128, .05), 0 8px 24px rgba(0, 71, 128, .09);
  --maxw: 1280px;     /* = container-breedte van de website */

  /* Modal-maatvoering (B-88): EEN bron voor de afmeting van popups/modals, zodat
     vensters een STABIELE/vaste maat hebben en het scherm niet meebeweegt met de
     inhoud (rustige interactie). De gedeelde utility .modal-venster (styles/modal.css)
     leest deze tokens; een modal kan een token lokaal overschrijven voor een
     afwijkende maat zonder een nieuwe CSS-regel. */
  --modal-w-klein:  min(460px, calc(100vw - 32px)); /* invoer/bevestiging */
  --modal-w-middel: min(520px, calc(100vw - 32px)); /* smal meerstaps (over-modal) */
  --modal-w-groot:  min(760px, calc(100vw - 32px)); /* getabd/tweekoloms detail */
  --modal-w-breed:  min(880px, calc(100vw - 32px)); /* brede lijst-detail/zoek */
  --modal-h-min:    360px;  /* stabiele min-hoogte (clamp): geen krimp bij weinig inhoud */
  --modal-h-middel: 70vh;
  --modal-h-groot:  88vh;
  --modal-h-breed:  88vh;
  --modal-marge:    8vh;     /* reserve t.o.v. de viewport (calc(100dvh - marge)) */
  --modal-minh-klein: 180px; /* anti-krimp voor de kleine dialoog-tier (geen vaste hoogte) */
  --modal-radius:   var(--radius);
  --modal-scrim:    rgba(28, 42, 57, .45);            /* eenduidige scrim-kleur */
  --modal-schaduw:  0 18px 50px rgba(28, 42, 57, .28); /* eenduidige venster-schaduw */
}