/* ==========================================================================
   FONTS.CSS
   --------------------------------------------------------------------------
   Hier worden de lettertypes gedefinieerd (@font-face). De bestanden zelf
   staan in de map "fonts" (woff2-formaat, wordt door alle moderne browsers
   ondersteund).

   We gebruiken 2 lettertype-families:
   - "Space Grotesk" -> voor titels/koppen en de navigatie (iets technischer,
     rechte vormen -> past bij een digitaal dashboard).
   - "Inter"          -> voor gewone tekst (heel leesbaar, neutraal).

   Wil je zelf een ander lettertype gebruiken? Vervang dan de .woff2
   bestanden in de map "fonts" en pas de "src"-regel hieronder aan.
   Beide lettertypes hier zijn gratis en open-source (SIL Open Font
   License), dus je mag ze zonder problemen zelf hosten en gebruiken.
   ========================================================================== */

/* Inter - normaal gewicht (gewone lopende tekst) */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* toont systeemlettertype terwijl het echte lettertype nog laadt */
}

/* Inter - semi-vet (voor kleine nadruk, labels, knoppen) */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Inter - vet */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Space Grotesk - medium (titels) */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Space Grotesk - vet (grote titels, hero-tekst) */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}