/* =====================================================================
   TOKENS — het enige bestand dat je per site aanpast.
   Merk Sowecare 2026 · diepblauw #313e88 primair · rood #ab2d32 accent
   ===================================================================== */

:root{
	/* Blauw-palet */
	--brand:        #313e88;
	--brand-2:      #1256a5;
	--brand-3:      #5c8dc9;
	--brand-4:      #87aedc;
	--brand-5:      #d0e0f3;

	/* Vlakken en tekst */
	--paper:        #ffffff;
	--mist:         #f6f8fc;
	--mist-2:       #eaf1fb;
	--ink:          #313e88;
	--ink-soft:     #2e3560;
	--ink-mute:     #8a93b8;
	--line:         #dce6f4;
	--line-strong:  #c2d2ea;

	/* Rollen */
	--accent:       #313e88;
	--accent-deep:  #26306b;
	--accent-tint:  #eaeefb;
	--cobalt:       #1256a5;
	--cobalt-soft:  #5c8dc9;
	--red:          #ab2d32;
	--red-deep:     #8c2429;

	/* Typografie */
	--font-display: 'Barlow Semi Condensed', 'Helvetica Neue Condensed', 'Arimo', sans-serif;
	--font-head:    'Arimo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-body:    'Arimo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-mono:    'Arimo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	/* Fluid type-schaal */
	--fs-mono:   clamp(0.68rem, 0.64rem + 0.2vw, 0.76rem);
	--fs-body:   clamp(1.05rem, 1rem + 0.2vw, 1.15rem);
	--fs-lead:   clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
	--fs-h4:     clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
	--fs-h3:     clamp(1.4rem, 1.2rem + 1vw, 2rem);
	--fs-h2:     clamp(1.7rem, 1.35rem + 1.7vw, 2.7rem);
	--fs-h1:     clamp(2.7rem, 1.9rem + 4vw, 5.6rem);
	--fs-display:clamp(3.4rem, 2rem + 6vw, 7.5rem);

	/* Ruimte */
	--sp-1: 0.375rem;
	--sp-2: 0.75rem;
	--sp-3: 1.25rem;
	--sp-4: 2rem;
	--sp-5: 3rem;
	--sp-6: 4.5rem;
	--sp-7: 6.5rem;
	--sp-8: 9rem;

	/* Radii */
	--r-sm: 6px;
	--r-md: 14px;
	--r-lg: 26px;
	--r-xl: 40px;
	--r-pill: 999px;

	/* Overig */
	--maxw: 1280px;
	--maxw-narrow: 860px;
	--maxw-wide: 1560px;
	--gutter: clamp(1.25rem, 4vw, 4rem);
	--ease: cubic-bezier(.22,.61,.36,1);
	--shadow-sm: 0 1px 2px rgba(22,24,29,.05), 0 4px 14px rgba(22,24,29,.05);
	--shadow-md: 0 10px 40px -12px rgba(22,24,29,.22);

	/* Sectie-ritme: één plek voor de verticale maatvoering van álle blokken */
	--sec-compact: clamp(2.25rem, 4vw, 3.25rem);
	--sec-normal:  clamp(3.5rem, 7vw, 5.5rem);
	--sec-roomy:   clamp(5rem, 10vw, 8rem);
}