/* ============================================================================
   FONTS — registratie van alle custom fonts die op de site worden gebruikt.
   ============================================================================
   Dit bestand is bewust apart van variables.css gehouden:
   - fonts.css = 'plumbing': koppelt een font-family-naam aan een woff2-bestand.
                Verandert vrijwel nooit nadat je 'm hebt opgezet.
   - variables.css = 'tokens': kleuren, spacing en de fonts-als-variabele.
                Verandert juist wél vaak tijdens design-iteraties.

   Hoe @font-face werkt:
   - 'font-family' is de naam waarmee je het font straks aanroept (bv. in body).
   - Eén family-naam mag meerdere @font-face-blokken hebben — de browser kiest
     op basis van 'font-weight' het juiste bestand.
   - 'src' wijst naar het woff2-bestand. Pad is relatief t.o.v. dit CSS-bestand
     (vanaf css/, met '..', naar de project-root, dan naar assets/fonts/).
   - 'format("woff2")' is een hint zodat de browser kan weten of hij het bestand
     überhaupt aankan zonder eerst te downloaden.
   - 'font-display: swap' = toon meteen fallback-font, swap zodra custom binnen is.
     Voorkomt 'invisible text' bij eerste paint, helpt Largest Contentful Paint.
   ============================================================================ */

/* ----- Outfit — voor headings ------------------------------------------------ */

@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/outfit-v15-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/outfit-v15-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ----- DM Sans — voor body, knoppen, bold accenten -------------------------- */

/* Let op: het bestand heet '...latin-regular.woff2' (gwfh-conventie),
   maar in CSS noemen we 'm gewoon weight 400. */
@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/dm-sans-v17-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/dm-sans-v17-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/dm-sans-v17-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}