/* Geborgd ontwerp-tokens, rechtstreeks uit GEBORGD-WEBSITE-HUISSTIJL.md */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Merkkleuren */
  --gb-ink: #18242b;
  --gb-mint: #57d6b0;
  /* Zelfde hue als --gb-mint, donker genoeg voor 4.5:1 op wit/paper --
     de lichte merkmint zelf haalt als kleine tekst maar ~1,7-1,8:1
     (contrastcontrole herstructurering 01-08, stap 5). Gebruik deze
     variant voor mint-gekleurde TEKST, --gb-mint blijft voor
     achtergronden/randen/hover-states. */
  --gb-mint-text: #1e7b5f;
  --gb-white: #f7f9f8;
  --gb-paper: #f5f7f6;
  /* Iets donkerder dan de oorspronkelijke #68747a: die haalde 4.81:1 op
     wit maar maar 4.47:1 op --gb-paper, net onder de WCAG AA-drempel van
     4.5:1 voor bodytekst (contrastcontrole herstructurering 01-08). */
  --gb-gray: #636e74;
  --gb-line: #dde4e1;

  /* Functionele statuskleuren */
  --gb-success: #2d9d67;
  --gb-warning: #e3a72f;
  --gb-error: #d95c5c;
  --gb-info: #3d7fd6;

  /* Typografie */
  --font-heading: "Manrope", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* Ruimte (8px-raster) en vorm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --radius-small: 6px;
  --radius-medium: 10px;
  --radius-large: 12px;
  --container: 1200px;
}