/**
 * Beweeg Wijs — design tokens
 *
 * Eén bron voor kleur, typografie, ruimte en vorm. Deze tokens zijn
 * bewust CMS-onafhankelijk zodat Mijn Beweeg Wijs (project 2) hetzelfde
 * systeem kan gebruiken: kopieer dit bestand, verder niets.
 *
 * Kleuren komen uit de brandguide (19-08-2026).
 */

:root {
	/* ---------------------------------------------------------------
	 * 1. Merkkleuren — exact uit de brandguide
	 * ------------------------------------------------------------ */
	--bw-oat: #EBE8DB;        /* De basis    — rust, ruimte, overzicht      */
	--bw-jeans: #5B869D;      /* De energie  — fris, betrokken, beweging    */
	--bw-midnight: #19305B;   /* De kracht   — betrouwbaar, duidelijk       */
	--bw-caramel: #C58A4A;    /* Het accent  — warmte, focus, positiviteit  */

	/* ---------------------------------------------------------------
	 * 2. Afgeleide kleuren
	 *
	 * De vier merkkleuren alleen halen WCAG 2.2 AA niet in elke
	 * combinatie. Gemeten contrast:
	 *   midnight op oat ......... 10,59:1  voldoet
	 *   wit op caramel ..........  2,95:1  voldoet niet
	 *   midnight op caramel .....  4,40:1  net onvoldoende voor 4,5:1
	 *   wit op jeans ............  3,93:1  onvoldoende voor lopende tekst
	 *
	 * Daarom drie afgeleide tinten, alleen voor tekstdragende vlakken.
	 * De merkkleuren zelf blijven ongewijzigd voor grafiek en accenten.
	 * Zie de technische review: dit is een openstaand designbesluit.
	 * ------------------------------------------------------------ */
	--bw-caramel-surface: #CB9254; /* knopvlak, midnight tekst → 4,82:1 */
	--bw-caramel-ink: #7A5322;     /* caramel als tekst op licht → 5,54:1 */
	--bw-caramel-light: #D8A870;   /* caramel als tekst op midnight → 6,04:1 */
	--bw-jeans-deep: #446A7E;      /* jeansvlak met witte tekst → 5,82:1 */

	--bw-oat-tint: #F4F2EA;
	--bw-oat-deep: #DDD9C7;
	--bw-midnight-tint: #24406F;
	--bw-white: #FFFFFF;

	/* ---------------------------------------------------------------
	 * 3. Semantische kleuren
	 * ------------------------------------------------------------ */
	--bw-bg: var(--bw-white);
	--bw-bg-alt: var(--bw-oat);
	--bw-bg-soft: var(--bw-oat-tint);
	--bw-bg-invert: var(--bw-midnight);

	--bw-text: var(--bw-midnight);
	--bw-text-muted: #4A5872;
	--bw-text-invert: var(--bw-oat);

	--bw-border: rgba(25, 48, 91, 0.14);
	--bw-border-strong: rgba(25, 48, 91, 0.30);

	--bw-accent: var(--bw-caramel);
	--bw-accent-text: var(--bw-caramel-ink);
	--bw-focus: var(--bw-midnight);

	/* ---------------------------------------------------------------
	 * 4. Typografie
	 *
	 * Koppen: AlternateGotNo3D uit de brandguide. Dat is een
	 * commercieel URW-font; een webfontlicentie is nog niet geregeld
	 * (blocker). Zodra het licentiebestand er is, hoeft alleen de
	 * @font-face in base.css te worden aangevuld — deze token wijst
	 * al als eerste naar AlternateGotNo3D.
	 * Oswald staat als tijdelijke, vormverwante vervanger in de stack.
	 *
	 * Lopende tekst: Hubballi (SIL Open Font License), lokaal gehost.
	 * ------------------------------------------------------------ */
	--bw-font-heading: "AlternateGotNo3D", "Oswald", "Haettenschweiler", "Arial Narrow", sans-serif;
	--bw-font-body: "Hubballi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--bw-tracking-heading: 0.01em;
	--bw-tracking-caps: 0.08em;
	/*
	 * 1.08 en niet krapper. De koppen staan in hoofdletters, en in een
	 * hoofdletter met trema — COÖRDINATOR — reikt de inkt tot ongeveer
	 * 0,98em boven de basislijn. Wie daaronder gaat zitten laat twee
	 * regels elkaar raken. Leesbaarheid gaat hier vóór compactheid.
	 */
	--bw-leading-tight: 1.08;
	--bw-leading-snug: 1.25;
	--bw-leading-normal: 1.65;

	/* Vloeiende typeschaal, van 360px tot 1440px viewport. */
	--bw-text-xs: 0.8125rem;
	--bw-text-sm: 0.9375rem;
	--bw-text-base: clamp(1.0625rem, 0.99rem + 0.32vw, 1.1875rem);
	--bw-text-lg: clamp(1.1875rem, 1.09rem + 0.42vw, 1.375rem);
	--bw-text-xl: clamp(1.375rem, 1.22rem + 0.68vw, 1.75rem);
	--bw-text-2xl: clamp(1.75rem, 1.47rem + 1.22vw, 2.5rem);
	--bw-text-3xl: clamp(2.125rem, 1.63rem + 2.17vw, 3.5rem);
	--bw-text-4xl: clamp(2.5rem, 1.75rem + 3.26vw, 4.5rem);

	/* ---------------------------------------------------------------
	 * 5. Ruimte — 4px basis
	 * ------------------------------------------------------------ */
	--bw-space-3xs: 0.25rem;
	--bw-space-2xs: 0.5rem;
	--bw-space-xs: 0.75rem;
	--bw-space-sm: 1rem;
	--bw-space-md: 1.5rem;
	--bw-space-lg: 2rem;
	--bw-space-xl: 3rem;
	--bw-space-2xl: 4rem;
	--bw-space-3xl: 6rem;

	/*
	 * Drie stappen, geen vloeiende schaal. Een clamp geeft per breedte
	 * net een andere waarde, en dan is de ruimte tussen twee secties
	 * nergens precies gelijk.
	 *
	 *   large   96px  belangrijke visuele overgangen: hero naar pagina,
	 *                 de slot-CTA, een kleurvlak dat echt los moet staan
	 *   default 72px  gewone secties — dit is de standaard
	 *   compact 48px  twee secties die inhoudelijk bij elkaar horen
	 *
	 * Stond eerder overal op 96px. Dat leest ruim, maar het leverde
	 * lege stukken op waar de bezoeker doorheen scrolt zonder iets te
	 * zien. Vandaar 72 als norm en 96 als uitzondering.
	 */
	/*
	 * Eén hoogte voor elke reguliere pagina-hero, zodat Onderwijs,
	 * Contact, Vacatures en de rest naast elkaar precies even hoog
	 * zijn. De waarde is niet gekozen maar gemeten: het langste
	 * contentblok binnen de afgesproken tekenlimieten — bovenkop van
	 * 35, kop van 55 over drie regels, intro van 220 over vier regels,
	 * plus twee knoppen — is 484px. Met de ruimte erboven en eronder
	 * komt dat op 572px. Daaronder gaan zou betekenen dat tekst wordt
	 * afgesneden, en dat mag niet.
	 *
	 * De homepage heeft zijn eigen, grotere hero en doet hier niet aan
	 * mee.
	 */
	--bw-hero-pagina-h: 36rem;        /* 576px, desktop */
	/*
	 * Op een tablet is de tekstkolom smaller, dus loopt dezelfde kop
	 * over meer regels. Het langste blok vraagt daar 597px. Vandaar
	 * 600 en niet 576: anders zou de langste hero uit de rij vallen.
	 */
	--bw-hero-pagina-h-tablet: 37.5rem;  /* 600px, tablet */

	--bw-section-y-large: 6rem;    /* 96px */
	--bw-section-y: 4.5rem;        /* 72px */
	--bw-section-y-tight: 3rem;    /* 48px */

	/* ---------------------------------------------------------------
	 * 6. Layout
	 * ------------------------------------------------------------ */
	--bw-container: 78rem;        /* 1248px */
	--bw-container-narrow: 46rem; /* 736px, optimale leesbreedte */
	--bw-container-wide: 90rem;
	/* Minimaal 24px horizontale paginamarge op mobiel; de briefing
	   vraagt daar expliciet om. */
	--bw-gutter: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
	--bw-grid-gap: clamp(1.25rem, 1rem + 1.2vw, 2rem);

	/* ---------------------------------------------------------------
	 * 7. Vorm en diepte
	 *
	 * De brandguide is overal hoekig: het beeldmerk, de grafische
	 * elementen en het visitekaartje hebben rechte hoeken. De schaal is
	 * daarom teruggebracht tot twee stappen:
	 *
	 *   6px  bedienbare dingen — knoppen, invoervelden, labels
	 *   8px  vlakken — kaarten, beeld, panelen
	 *
	 * Niet naar nul: in drukwerk snijdt een mes een echte rechte hoek,
	 * in een browser oogt dat op een foto al snel als onaf.
	 *
	 * --bw-radius-lg bestaat alleen nog als naam en wijst naar dezelfde
	 * waarde. Wie de vlakken wil bijstellen heeft aan --bw-radius genoeg.
	 * ------------------------------------------------------------ */
	--bw-radius-sm: 6px;
	--bw-radius: 8px;
	--bw-radius-lg: var(--bw-radius);
	--bw-radius-pill: 999px; /* alleen voor wat van zichzelf rond is */

	--bw-shadow-sm: 0 1px 2px rgba(25, 48, 91, 0.06);
	--bw-shadow: 0 6px 20px -8px rgba(25, 48, 91, 0.18);
	--bw-shadow-lg: 0 20px 44px -20px rgba(25, 48, 91, 0.26);

	/* ---------------------------------------------------------------
	 * 8. Beweging — rustig, en respecteert prefers-reduced-motion
	 * ------------------------------------------------------------ */
	--bw-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--bw-duration-fast: 140ms;
	--bw-duration: 240ms;
	--bw-duration-slow: 420ms;

	/* ---------------------------------------------------------------
	 * 9. Overig
	 * ------------------------------------------------------------ */
	--bw-header-height: 5rem;
	--bw-focus-width: 3px;
	--bw-focus-offset: 3px;
	--bw-z-header: 100;
	--bw-z-overlay: 200;
}

@media (max-width: 60rem) {
	:root {
		--bw-header-height: 4.25rem;
	}
}

/* Tablet: proportioneel kleiner, met dezelfde onderlinge verhouding. */
@media (max-width: 63.9375rem) {
	:root {
		--bw-section-y-large: 5rem;    /* 80px */
		--bw-section-y: 3.75rem;       /* 60px */
		--bw-section-y-tight: 2.5rem;  /* 40px */
	}
}

@media (max-width: 47.9375rem) {
	:root {
		--bw-section-y-large: 4rem;    /* 64px */
		--bw-section-y: 3rem;          /* 48px */
		--bw-section-y-tight: 2rem;    /* 32px */
	}
}

/**
 * Kleurvlakken. Een sectie krijgt één van deze klassen en erft daarmee
 * een consistente set voor- en achtergrondkleuren. Zo blijft contrast
 * gegarandeerd, ook als componenten door elkaar worden gezet.
 */
.bw-surface--white {
	--bw-surface-bg: var(--bw-white);
	--bw-surface-text: var(--bw-midnight);
	--bw-surface-muted: var(--bw-text-muted);
	--bw-surface-border: var(--bw-border);
	--bw-accent-text: var(--bw-caramel-ink);
}

.bw-surface--oat {
	--bw-surface-bg: var(--bw-oat);
	--bw-surface-text: var(--bw-midnight);
	--bw-surface-muted: #4A5872;
	--bw-surface-border: rgba(25, 48, 91, 0.16);
	--bw-accent-text: var(--bw-caramel-ink);
}

.bw-surface--soft {
	--bw-surface-bg: var(--bw-oat-tint);
	--bw-surface-text: var(--bw-midnight);
	--bw-surface-muted: var(--bw-text-muted);
	--bw-surface-border: var(--bw-border);
	--bw-accent-text: var(--bw-caramel-ink);
}

.bw-surface--midnight {
	--bw-surface-bg: var(--bw-midnight);
	--bw-surface-text: var(--bw-oat);
	--bw-surface-muted: rgba(235, 232, 219, 0.78);
	--bw-surface-border: rgba(235, 232, 219, 0.22);
	--bw-accent-text: var(--bw-caramel-light);
	--bw-focus: var(--bw-oat);
}

.bw-surface--jeans {
	--bw-surface-bg: var(--bw-jeans-deep);
	--bw-surface-text: var(--bw-white);
	--bw-surface-muted: rgba(255, 255, 255, 0.86);
	--bw-surface-border: rgba(255, 255, 255, 0.26);
	/* Caramel haalt op het jeansvlak geen 4,5:1. Accenttekst is hier wit;
	   caramel blijft beschikbaar voor niet-tekstuele accenten. */
	--bw-accent-text: var(--bw-white);
	--bw-focus: var(--bw-white);
}