/* ============================================================
   Hero huisstijl — tokens en basiscomponenten
   Bron: Hero Huisstijlhandboek online (augustus 2025, V1)
   Dit bestand definieert het volledige kleurenpalet, de
   typografie en de componentstijlen. Laad dit bestand vóór
   de overige stylesheets.
   ============================================================ */

:root{
  /* --- Primair --- */
  --blauw:#073889;            /* Hero Blauw */
  --oranje:#f46015;           /* Hero Oranje */
  --blauw-soft:#d3e6f0;       /* Hero Blauw Soft */
  --hairline:#e9f4f8;         /* Hero Blauw Hairline */
  --grijs:#242629;            /* Hero Grijs Black */
  --wit:#ffffff;

  /* --- Secundair: blauw --- */
  --blauw-black:#03153f;
  --blauw-bold:#0065cc;
  --blauw-medium:#4197cb;
  --blauw-light:#00a8f5;
  --blauw-thin:#9ecae2;
  --sky:#00a8f5;              /* alias voor oudere code */

  /* --- Secundair: oranje --- */
  --oranje-black:#4c1b00;
  --oranje-bold:#944100;
  --oranje-medium:#c65b00;
  --oranje-light:#f79c44;
  --oranje-thin:#fde1b6;
  --oranje-zacht:#fef1e2;     /* afgeleide achtergrondtint */

  /* --- Secundair: grijs --- */
  --grijs-black:#242629;
  --grijs-bold:#4f5259;
  --grijs-regular:#9496a1;
  --grijs-light:#b8c2c7;
  --grijs-thin:#dee3e5;
  --grijs-hairline:#f5f5f9;

  /* --- Signaalkleuren --- */
  --groen:#38bd47;            /* Hero Groen Regular */
  --geel:#ffbd0d;             /* Hero Geel */
  --rood:#b71525;             /* Hero Rood */

  /* Afgeleide tinten voor leesbare tekst en zachte vlakken
     (het handboek kent één groen/geel/rood; deze schakeringen
     zijn daarvan afgeleid) */
  --groen-diep:#1e7e2b;
  --groen-thin:#c9edcd;
  --groen-zacht:#e8f8ea;
  --geel-diep:#8a6200;
  --geel-thin:#ffe9ad;
  --geel-zacht:#fff6d9;
  --rood-thin:#f3c4ca;
  --rood-zacht:#fbeaec;

  /* --- Typografie --- */
  --font-kop:'Exo',sans-serif;            /* DemiBold voor koppen */
  --font-tekst:'Source Sans 3',sans-serif;/* Regular/SemiBold voor lopende tekst */

  /* --- Vorm --- */
  --radius:14px;              /* kaarten en panelen */
  --radius-knop:9px;          /* knoppen, invoervelden, dropdowns */
}

/* ---------- Basis ---------- */
::selection{background:var(--blauw-soft); color:var(--blauw);}

:focus-visible{outline:2px solid var(--blauw-light); outline-offset:2px;}

/* ---------- Invoervelden en dropdowns (handboek: Text input / Dropdown) ---------- */
input[type="text"], input[type="email"], input[type="number"], input[type="password"],
input[type="search"], input[type="date"], input[type="time"], input[type="url"],
select, textarea{
  font-family:var(--font-tekst);
  color:var(--grijs-black);
  accent-color:var(--oranje);
}
input::placeholder, textarea::placeholder{color:var(--grijs-regular); opacity:1;}
input[type="checkbox"], input[type="radio"]{accent-color:var(--blauw-bold);}

/* ---------- Scrollbars in huisstijl ---------- */
*{scrollbar-color:var(--blauw-thin) transparent;}

/* ---------- Iconen (zie js/iconen.js) ----------
   Gevulde mini-logo's die meekleuren met de tekst; het accent is oranje. */
.hicoon{width:1.08em; height:1.08em; vertical-align:-.18em; fill:currentColor; display:inline-block; flex-shrink:0;}

/* ---------- Koppen op donkere vlakken ----------
   Koppen zijn standaard Hero Blauw (via --kop-kleur in de basisregel);
   op donkere panelen worden ze wit. */
.zijbalk, .topbar, .mbalk, .held, .opdr-hero, .lichting-card .kop, .ma-kop,
.spl-kop-stap, .spl-baasbalk, .lmsx-kaart, .itk-hero, .itk-def-q, .itk-banner{--kop-kleur:var(--wit);}