/*
 * fonts.css
 * Dit bestand definieert de @font-face regels voor lokaal geladen fonts.
 * Zorg ervoor dat de .woff2 bestanden in de assets/fonts/ map staan
 * en dat de bestandsnamen hieronder exact overeenkomen met de geüploade bestanden.
 *
 * BELANGRIJKE OPMERKING over Inter 'pt'-versies:
 * Het is niet ideaal om aparte fontbestanden te hebben voor verschillende
 * puntgroottes (zoals '18pt', '24pt', '28pt') voor webgebruik.
 * Voor optimale prestaties en om de Lighthouse score te halen, is het cruciaal
 * om HET MINIMALE AANTAL Inter-gewichten/stijlen in te laden.
 * We kiezen hier voor de '18pt' versies als basis, en laden alleen
 * de meest gebruikte gewichten (Light, Regular, Medium, Bold) in.
 * De browser zal deze fonts schalen naar de gewenste font-size.
 * Het inladen van meerdere 'pt' versies van hetzelfde gewicht (bijv. 18pt Regular en 24pt Regular)
 * is zeer inefficiënt en zal de laadtijden nadelig beïnvloeden.
 */

/* --- Space Grotesk (voor koppen) --- */
/* Op basis van de bestanden die je hebt: Light, Regular, Medium, SemiBold, ExtraBold */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Light.woff2') format('woff2');
  font-weight: 300; /* Light */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Regular.woff2') format('woff2');
  font-weight: 400; /* Regular */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Medium.woff2') format('woff2');
  font-weight: 500; /* Medium */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-SemiBold.woff2') format('woff2');
  font-weight: 600; /* SemiBold */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-ExtraBold.woff2') format('woff2');
  font-weight: 800; /* ExtraBold (als dit de vetste is die je voor koppen gebruikt) */
  font-style: normal;
  font-display: swap;
}


/* --- Inter (voor bodytekst - Geselecteerde '_18pt-' gewichten) --- */
/* Om performance te optimaliseren, laden we alleen de meest essentiële gewichten in.
   We gebruiken hier de '18pt' versies. */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-Light.woff2') format('woff2');
  font-weight: 300; /* Light */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-Regular.woff2') format('woff2');
  font-weight: 400; /* Regular */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-Medium.woff2') format('woff2');
  font-weight: 500; /* Medium */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-Bold.woff2') format('woff2');
  font-weight: 700; /* Bold */
  font-style: normal;
  font-display: swap;
}

/* Optioneel: Inter Italic (alleen als je cursieve tekst daadwerkelijk gebruikt) */
/* We nemen hier de '18pt' Italic Regular variant */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-Italic.woff2') format('woff2');
  font-weight: 400; /* Als de italic geen specifiek gewicht aangeeft, neem dan 400 (Regular) */
  font-style: italic;
  font-display: swap;
}

/* --- CSS Variabelen voor theme.json en de Block Editor --- */
/* Deze blijven hetzelfde en verwijzen naar de font-families, niet de specifieke bestanden. */
:root {
  --wp--preset--font-family--space-grotesk: "Space Grotesk", sans-serif;
  --wp--preset--font-family--inter: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}