/* =========================================================
   DE SCHONE ZAAK — HUISSTIJL-TOKENS
   ---------------------------------------------------------
   Dit is het énige bestand dat u aanpast bij een rebrand.
   Wijzig hier kleuren, lettertypen, rondingen en schaduwen;
   de hele website (inclusief het beheer) volgt automatisch.

   Nieuw lettertype? Vervang ook de Google Fonts-regel in
   inc/layout.php (en beheer.php) door uw eigen font-URL.
   ========================================================= */

:root {
  /* ---- Kleuren ---- */
  --kleur-inkt:          #10333A;  /* koppen en donkere tekst */
  --kleur-tekst:         #33555B;  /* lopende tekst */
  --kleur-primair:       #124E57;  /* donker petrol: header, voet, panelen */
  --kleur-primair-diep:  #0C3940;  /* nog donkerder, voor de afsluiter */
  --kleur-accent:        #17B098;  /* fris teal: knoppen, links, vinkjes */
  --kleur-accent-donker: #0F8A77;  /* hover-variant van het accent */
  --kleur-mist:          #EFF6F5;  /* lichte sectie-achtergrond */
  --kleur-lijn:          #D8E7E5;  /* randen en scheidingslijnen */
  --kleur-wit:           #FFFFFF;
  --kleur-ok:            #1F7A43;  /* succesmeldingen */
  --kleur-fout:          #B3261E;  /* foutmeldingen */

  /* ---- Typografie ---- */
  --font-kop:   "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-tekst: "Public Sans", "Segoe UI", system-ui, sans-serif;

  /* Vloeiende typografische schaal (mobiel → desktop) */
  --maat-xxl: clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem);   /* h1 */
  --maat-xl:  clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem);   /* h2 */
  --maat-l:   clamp(1.15rem, 1rem + .5vw, 1.35rem);    /* h3 */
  --maat-m:   1rem;                                     /* lopende tekst */
  --maat-s:   .875rem;                                  /* bijschriften */

  /* ---- Vorm & diepte ---- */
  --ronding:        14px;
  --ronding-klein:  9px;
  --schaduw:        0 10px 30px -12px rgba(16, 51, 58, .22);
  --schaduw-zacht:  0 4px 14px -8px rgba(16, 51, 58, .18);

  /* ---- Maatvoering ---- */
  --wikkel-breed: 1160px;
  --wikkel-smal:  760px;
  --sectie-ruimte: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}