/* Design tokens volgens Geerts huisstijl, variant blush.
   Harde regels: geen wit of zwart, alle tekst navy, koraal is het enige accent
   (hooguit één per blok, nooit als tekstkleur), teal alleen als tweede markering. */

@font-face {
  font-family: "Funnel Display";
  src: url("fonts/funnel-display.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Kleuren */
  --blush: #f7e6e6;      /* ondergrond */
  --vlak: #fbf2f1;       /* panelen en tabjes, lichtste kleur */
  --lijn: #efd6d6;       /* scheidingslijnen */
  --navy: #1c3572;       /* alle tekst, titelblok */
  --navy-vlak: #24407f;  /* vlakken op navy */
  --grijs-navy: #5a6788; /* secundaire tekst */
  --op-navy: #c9d0e2;    /* secundaire tekst op navy */
  --koraal: #f56a76;     /* enige accent */
  --teal: #0698a7;       /* tweede markering */

  /* Letters */
  --font-kop: "Funnel Display", "Montserrat", Arial, sans-serif;
  --font-tekst: "Montserrat", Arial, sans-serif;

  /* Ruimte */
  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 12px;
  --ruimte-4: 16px;
  --ruimte-5: 20px;
  --ruimte-6: 24px;
  --ruimte-8: 32px;

  /* Rondingen */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-tab: 10px;
  --radius-pill: 999px;

  /* Maten */
  --kolom: 520px;
  --tabbalk-hoogte: 64px;
  --veilig-onder: env(safe-area-inset-bottom, 0px);
}