/* Huisstijl Van Hulzen Communicatie, naar de huisstijlgids (kleurenpalet en
   typografie). Buiten elke @layer, zodat dit blok de neutrale standaard in
   `frontend/src/styles.css` altijd wint. Contrast narekenen:
   node frontend/scripts/contrastcontrole.mjs klanten/vanhulzen/huisstijl/thema.css

   Rolverdeling:
     Dennengroen #234141     (--hoofdkleur) = informatie — koppen, banner, voet;
     Van Hulzen Groen 500    (--actie)      = actie — knoppen, altijd met witte tekst;
     Mintgroen, Zwembadblauw, Coraalrood    = alleen vlakken en accentranden,
                                              nooit tekstkleur (op wit te licht).
   De achtergrond is de groene omslagbanner met de vh-contourletters; alle inhoud
   staat daarop op een witte kaart met schaduw. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/huisstijl/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("/huisstijl/fonts/open-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --lettertype: "Open Sans", "Segoe UI", Arial, sans-serif;
  --lettertype-kop: "Bricolage Grotesque", "Open Sans", "Segoe UI", Arial, sans-serif;

  --tekst: #1b2b2b;
  --tekst-gedempt: #4a5b5a;
  --tekst-invers: #ffffff;

  --achtergrond: #eef6f5;
  --vlak: #ffffff;
  --vlak-grijs: #e8f2f0;
  --vlak-blauw: #e1f0f3;

  --rand: #cfe0dd;
  --rand-invoer: #5d7270;

  --hoofdkleur: #234141;
  --hoofdkleur-donker: #172c2c;
  --actie: #1c736b;
  --actie-donker: #134f4a;
  --fout: #a50013;
  --fout-donker: #7a000e;
  --fout-achtergrond: #fdeceb;
  --focus: #234141;

  --status-luistert: #1c736b;
  --status-denkt: #8a6400;
  --status-spreekt: #234141;

  --radius: 6px;
  --radius-groot: 14px;

  --achtergrond-afbeelding: url("/huisstijl/achtergrond.webp");
  --pagina-vlak: #ffffff;
  --pagina-schaduw: 0 12px 40px rgba(12, 40, 38, 0.28);
  --pagina-radius: 18px;
  --pagina-marge: 2.5rem;
  --pagina-groei: 0;
}

/* De regels hieronder gaan over componenten, niet over tokens. `styles.css`
   laadt ná dit bestand, dus elke regel krijgt `body` ervoor om bij gelijke
   specificiteit niet te verliezen. */

/* Koppen in Bricolage, zoals in de huisstijlgids: stevig en iets strakker gezet. */
body h1,
body h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

body h1 {
  font-size: 1.85rem;
}

/* Coraalrood als accentrand op de voorwaarden: een vlak, geen tekst. */
body .voorwaarden {
  border-left-color: #fc9e94;
}

/* De vaste gespreksvorm en de keuzevlakken in mint, als in de gids. */
body .keuze-enkel,
body fieldset {
  background: #f1f8f7;
  border-color: #b5d6d1;
}

/* Op een smal scherm geen zwevende kaart: de volle breedte leest beter. */
@media (max-width: 40rem) {
  :root {
    --pagina-marge: 0;
    --pagina-radius: 0;
    --pagina-groei: 1;
  }
}