/* ==========================================================================
   Glanzend Schoon — design tokens
   5-kleuren huisstijl: Blauw #415F9D, Zacht #E2E4F2, Accent #73CFC6,
   Wit #FFFFFF, Tekst/Donker #182238. Gedempte tekst en subtiele randen zijn
   opacity-varianten van --ink-rgb, geen extra tinten.
   Display: Bricolage Grotesque · Tekst: IBM Plex Sans · Utility: IBM Plex Mono
   ========================================================================== */

:root {

	/* KLEUREN — de namen komen terug in de bg-* classes (structural.css) en in
	   de "Achtergrondkleur" select van elk blok. */
	--wit:    #ffffff;
	--zacht:  #e2e4f2;
	--blauw:  #415f9d;
	--donker: #182238;
	--accent: #73cfc6;

	/* Aliassen zoals ze in de blok-CSS gelezen worden */
	--ink:        var(--donker);
	--ink-rgb:    24, 34, 56;
	--paper:      var(--wit);
	--mist:       var(--wit);
	--mist-dim:   var(--zacht);
	--rinse:      var(--blauw);
	--rinse-dark: var(--donker);
	--rinse-light: var(--zacht);

	/* FONTS */
	--font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
	--font-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

	--font-headings: var(--font-display);
	--font-text:     var(--font-body);

	/* TYPOGRAFIE */
	--h1-size: clamp(2.3rem, 3.9vw, 3.3rem);
	--h2-size: clamp(2.1rem, 3.8vw, 3.15rem);
	--h3-size: clamp(1.2rem, 1.8vw, 1.45rem);
	--h4-size: 1.15rem;
	--h5-size: 1.05rem;
	--h6-size: 0.95rem;
	--p-size:  1rem;

	/* STRUCTUUR */
	--container: 1320px;
	--container-padding: 24px;
	--section-padding: clamp(56px, 9vw, 112px);
	--section-padding-tight: clamp(40px, 6vw, 72px);
	--section-head-gap: clamp(36px, 5.5vw, 60px);
	--gap: 24px;
	--gallery-gap: 12px;
	--padding: 32px;

	/* STIJL */
	--radius-s: 10px;
	--radius-m: 18px;
	--radius-l: 28px;
	--radius-pill: 999px;

	--border-radius-small:  var(--radius-s);
	--border-radius-medium: var(--radius-m);
	--border-radius-large:  var(--radius-l);

	--shadow-card: 0 2px 4px rgba(24, 34, 56, 0.05), 0 18px 40px -16px rgba(24, 34, 56, 0.22);
	--shadow-pop:  0 30px 70px -22px rgba(24, 34, 56, 0.4);
	--shadow-lift: 0 8px 20px -8px rgba(24, 34, 56, 0.3);

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 640px) {
	:root { --container-padding: 32px; }
}