/* SDS'55 – fonts en design tokens
   Bron: css/style.css van het homepage-prototype.
   Kleuren en maten komen uit de Divi-variabelen (Divi → Variabelen); de waarde na de komma is de terugvaloptie.
   Wijzig een kleur of maat dus in Divi, niet hier. */

@font-face { font-family: "Caecilia LT Pro"; src: url("../fonts/CaeciliaLTPro75Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caecilia LT Pro"; src: url("../fonts/CaeciliaLTPro85Heavy.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* Kleur */
  --groen: var(--gcid-sds-groen, #04a64b);              /* vlakken, iconen, lijnen; niet voor kleine tekst */
  --limoen: var(--gcid-sds-limoen, #7db929);            /* alleen accent en verloop */
  --groen-tekst: var(--gcid-sds-groen-tekst, #037a37);  /* links, kleine groene tekst, primaire knop */
  --knop: var(--groen-tekst);
  --op-knop: var(--gcid-sds-papier, #ffffff);
  --op-groen: var(--gcid-sds-inkt, #12241a);            /* tekst op groen/limoen/verloop */
  --inkt: var(--gcid-sds-inkt, #12241a);
  --inkt-zacht: var(--gcid-sds-inkt-zacht, #5b6b61);
  --papier: var(--gcid-sds-papier, #ffffff);
  --papier-2: var(--gcid-sds-papier-2, #f3f6f2);
  --lijn: var(--gcid-sds-lijn, #dce3dd);
  --winst: var(--groen-tekst);
  --gelijk: var(--gcid-sds-gelijk, #6b7570);
  --verlies: var(--gcid-sds-verlies, #c4362b);
  --focus: var(--groen-tekst);
  --markering: var(--gcid-sds-markering, #e7f4ea);      /* eigen rij in de stand */
  --placeholder-rand: var(--gcid-sds-placeholder, #b9c6bd);
  --verloop: linear-gradient(90deg, var(--groen) 0%, var(--limoen) 100%);

  /* Type */
  --font-slab: "Caecilia LT Pro", Rockwell, "Roboto Slab", Georgia, serif;
  --font-sans: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-label: var(--gvid-sds-font-label, "Barlow Condensed"), "Arial Narrow", system-ui, sans-serif;
  --kop-1: var(--gvid-sds-kop-1, clamp(30px, 4vw, 44px));
  --kop-2: var(--gvid-sds-kop-2, clamp(28px, 3vw, 32px));
  --kop-3: var(--gvid-sds-kop-3, clamp(21px, 2vw, 24px));
  --kop-4: var(--gvid-sds-kop-4, 19px);
  --tekst: var(--gvid-sds-tekst, clamp(17px, 1.3vw, 18px));
  --intro: var(--gvid-sds-intro, clamp(17px, 1.8vw, 21px));
  --tekst-s: var(--gvid-sds-tekst-s, 16px);
  --label: var(--gvid-sds-label, 15px);
  --label-s: var(--gvid-sds-label-s, 13px);

  /* Ruimte (raster van 4px, vloeiend waar het telt) */
  --ruimte-1: 4px; --ruimte-2: 8px; --ruimte-3: 12px; --ruimte-4: 16px;
  --ruimte-6: 24px; --ruimte-8: 32px; --ruimte-12: 48px; --ruimte-16: 64px; --ruimte-24: 96px;
  --container: var(--gvid-sds-container, min(1200px, 100% - 2 * clamp(16px, 4vw, 32px)));
  --sectie-y: var(--gvid-sds-sectie-y, clamp(48px, 6vw, 64px));
  --sectie-y-s: var(--gvid-sds-sectie-y-s, clamp(16px, 4vw, 48px));
  --gap-s: var(--gvid-sds-gap-s, clamp(12px, 1.5vw, 16px));
  --gap: var(--gvid-sds-gap, clamp(16px, 2vw, 24px));
  --gap-l: var(--gvid-sds-gap-l, clamp(24px, 4vw, 48px));
  --kaart-pad: var(--gvid-sds-kaart-pad, clamp(16px, 2.5vw, 32px));
  --header-hoogte: var(--gvid-sds-header-hoogte, clamp(68px, 7vw, 88px));

  /* Vorm */
  --hoek-sm: var(--gvid-sds-hoek-s, 4px); --hoek-md: var(--gvid-sds-hoek-m, 8px); --hoek-rond: 999px;
  --knop-hoogte: var(--gvid-sds-knop-hoogte, 48px);
  --schaduw-kaart: 0 1px 2px rgba(18,36,26,.08), 0 6px 20px rgba(18,36,26,.06);

  --paginabreedte: 1200px;
  --tekstbreedte: 680px;
}