/* Design tokens volgens Geerts huisstijl, in drie varianten: blush, grijsblauw en wit.
   De variant staat als data-stijl op <html> en is per telefoon te kiezen (Ik → Huisstijl).
   Harde regels in alle drie: geen zwart, alle tekst navy, koraal is het enige accent
   (hooguit één per blok, nooit als tekstkleur), teal alleen als tweede markering.
   `--grond` is de ondergrond; tekst op navy krijgt ook de grondkleur. */

@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,
:root[data-stijl="blush"] {
  --grond: #f7e6e6;      /* ondergrond */
  --vlak: #fbf2f1;       /* panelen en tabjes */
  --lijn: #efd6d6;       /* scheidingslijnen */
  --tint: #e7c3c5;       /* zachte gezinskleur */
  --op-grond: #f7e6e6;   /* tekst op navy */
}
:root[data-stijl="grijsblauw"] {
  --grond: #e5e8f0;
  --vlak: #f1f3f8;
  --lijn: #d9deea;
  --tint: #c9d0e2;
  --op-grond: #e5e8f0;
}
/* Wit: op wit moeten vlakken gevuld zijn met grijsblauw, anders verdwijnt de vorm. */
:root[data-stijl="wit"] {
  --grond: #ffffff;
  --vlak: #e5e8f0;
  --lijn: #d9deea;
  --tint: #c9d0e2;
  --op-grond: #ffffff;
}

:root {
  --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: 540px;
  --tabbalk-hoogte: 66px;
  --veilig-onder: env(safe-area-inset-bottom, 0px);
}