/* =================================================================
   DESIGN TOKENS — Joint Care huisstijl (bevestigd)
   Pas hier centraal de huisstijl aan; alle componenten gebruiken
   deze variabelen. Zet nooit losse hex-codes in componenten.
   ================================================================= */
:root {
  /* --- Kleuren (bevestigd) --- */
  --petrol:   #395e60;   /* header, footer, koppen, diepe vlakken */
  --teal:     #38747a;   /* secundaire vlakken / accenten         */
  --sage:     #739f96;   /* zacht ondersteunend, lijnen, iconen   */
  --mint:     #8bdbb5;   /* highlight + knoppen + hexagon-fills    */
  --white:    #ffffff;
  --mist:     #eef6f2;   /* lichte mint-tint voor secties         */
  --line:     #d8e6e0;   /* subtiele randen                       */

  /* --- Semantische aliassen (gebruik deze in componenten) --- */
  --color-ink:        var(--petrol);
  --color-primary:    var(--teal);
  --color-primary-dp: var(--petrol);
  --color-accent:     var(--mint);
  --color-muted:      var(--sage);
  --color-bg:         var(--white);
  --color-bg-alt:     var(--mist);
  --overlay:      rgba(0, 0, 0, 0.5);    /* modal/drawer backdrop scrim   */
  --line-on-dark: rgba(255, 255, 255, 0.15); /* subtiele lijn op donkere vlakken */

  /* --- Typografie ---  ⚠️ FONTS NOG TE BEVESTIGEN uit thema --- */
  --font-display: "Poppins", system-ui, -apple-system, sans-serif; /* placeholder */
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;   /* placeholder */
  --font-data:    "Space Mono", ui-monospace, monospace;           /* voor cijfers/meetwaarden */

  /* --- Schaal & ritme --- */
  --maxw: 1180px;
  --radius: 12px;
  --space: 24px;
}

/* Koppen: bold uppercase (huisstijl). Kernwoord-highlight = .hl */
:root {
  --kop-transform: uppercase;
  --kop-weight: 700;
}
.hl { color: var(--mint); }

/* Hexagon-utility (signatuurelement) — flat-top zeshoek */
.hex {
  -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
          clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}