/* AmerikaNu — design tokens (fase-4 Task 8, uitgebreid Task 10). Waarden 1:1 uit README §4 van
   design/website-compleet/ (leidend bij twijfel) + design/website-compleet/_ds/
   (amerikanu-design-system-…/colors_and_type.css). Steekproef tegen beide bronnen: geen
   afwijkingen — colors_and_type.css's --brand-blue (#7B96C8) leek bij Task 8 een ánder, ouder,
   ongebruikt blauw-token; Task 10 (design/footer/README.md §Design Tokens) bewijst dat het wél
   nodig is (de "Nu.nl"-wordmark-tint + tagline-kleur op navy) — hieronder alsnog toegevoegd. */
:root {
	--navy: #1E2E5A;
	--navy-donker: #131E3D;
	--magenta: #E62C6B;
	--magenta-hover: #BF1F55;
	--lichtblauw: #93A9CE;
	--lichtblauw-2: #C5CCDC;
	--lichtblauw-accent: #7B96C8;
	--roze: #FBE1EB;
	--forest: #284032;
	--body: #4A5775;
	--muted: #8A93A6;
	--muted-navy: #6B7BA3;
	--placeholder-oranje: #E0A15A;
	--bg: #FAFAF7;
	--card: #FFFFFF;
	--beige: #F1EEE8;
	--beeld-placeholder: #E3E0D8;
	--rand-kaart: rgba(30, 46, 90, 0.10);
	--rand-lijn: rgba(30, 46, 90, 0.12);
	--rand-input: rgba(30, 46, 90, 0.14);
	--rand-knop: rgba(30, 46, 90, 0.18);
	--rand-navy: rgba(147, 169, 206, 0.16);
	--radius-hero: 28px;
	--radius-card: 20px;
	--radius-klein: 14px;
	--radius-sm: 12px; /* DS colors_and_type.css --radius-sm — tot dusver ongebruikte maat, nodig voor het ⓘ-tooltip-paneel (feedbackronde 2026-09-10) */
	--radius-pill: 9999px;
	--schaduw-hover: 0 20px 44px -18px rgba(30, 46, 90, 0.32);
	--shadow-md: 0 1px 2px rgba(30, 46, 90, 0.05), 0 16px 36px -10px rgba(30, 46, 90, 0.14); /* DS colors_and_type.css --shadow-md — ⓘ-tooltip-paneel */
	--motion: 220ms cubic-bezier(0.32, 0.72, 0, 1);
	--font: 'Figtree', system-ui, sans-serif;

	/* Fase-4-gate-4-fix (David: "op grote schermen (32", 2560px+) rekken de contentblokken uit
	   tot de schermranden"): sitewide max-contentbreedte, in twee varianten die allebei uit
	   design/website-compleet/*.dc.html komen (zie fase4-gate4-maxbreedte-report.md §Onderbouwing).

	   --content-max (1240px): de expliciete content-doos die de meeste frames zelf al tekenen
	   (`width:1240px; margin:0 auto` binnen het 1440px-canvas — Homepage/PLP/Blog/Stadspagina-
	   Excursies-Definitief.dc.html). Al sitewide in gebruik (basis.css .container, home.css,
	   plek.css, overzicht.css, blog.css) — hier alleen gecentraliseerd tot 1 bron.

	   --frame-max (1440px): het canvas van het .dc.html-frame zélf. Voor secties die van
	   oudsher geen eigen 1240px-contentdoos hebden en in plaats daarvan een vaste padding/margin
	   tegen de volle paginabreedte gebruiken (PDP/reis.css se secties, chrome.css se header-
	   topbalk + navy regio-submenu) bestaat er geen ontwerpreferentie boven de 1440px-framebreedte
	   — die framebreedte is dan het ijkpunt (David-instructie). Deze secties "bevriezen" op
	   var(--frame-max) via `max(Npx, calc((100% - var(--frame-max)) / 2 + Npx))` i.p.v. te
	   verspringen naar --content-max: bij precies 1440px viewport (de al goedgekeurde/gegatete
	   rendering) verandert er dan niets (calc-term ≤ Npx, dus max() kiest de bestaande Npx), en
	   boven 1440px groeit de gutter mee zodat de sectie niet verder uitrekt dan het frame. */
	--content-max: 1240px;
	--frame-max: 1440px;
}
@font-face {
	font-family: 'Figtree';
	src: url('../fonts/figtree/figtree-variable.woff2') format('woff2-variations');
	font-weight: 400 900;
	font-display: swap;
}