/* GEGENEREERD door tools/tokens/generate.py uit tools/tokens/tokens.toml.
   Bewerk dit bestand niet met de hand — tools/tokens/check.py faalt daarop. */

:root {
	/* kleur */
	--mvd-navy: #0f2340;	/* tekst op licht, donkere vlakken, nav */
	--mvd-navy-mid: #1a3557;	/* tweede donkertint */
	--mvd-cream: #f9f7f4;	/* paginagrond */
	--mvd-stone: #dbdeea;	/* randen, rustvlakken */
	--mvd-gold: #b8924a;	/* accent, spaarzaam */
	--mvd-lavender: #8890b5;	/* secundair accent, cijfers */
	--mvd-lavender-bg: #f5f5fa;	/* nav-overlay, zachte secties */
	--mvd-muted: #6a6a6a;	/* bijschrift, lede — 5.06:1 op crème */
	--mvd-text: #1a1a1a;	/* lopende tekst */
	--mvd-white: #ffffff;	/* tekst op donker, kaarten */
	--mvd-gold-text: #7a5c22;	/* eyebrow, prijs op licht — 5.81:1 op crème */
	--mvd-lavender-text: #5a628b;	/* status 'gereserveerd' op licht — 5.52:1 op crème */
	--mvd-cream-ink: #f4f2ee;	/* tekst op navy — 14.07:1 */
	--mvd-rule-soft: #e9e7e4;	/* sectiescheiding, header-onderrand */

	/* doorschijnend */
	--mvd-line: rgba(15, 35, 64, 0.12);	/* randen */
	--mvd-veil-soft: rgba(15, 35, 64, 0.20);	/* hero-verloop, licht */
	--mvd-veil-strong: rgba(15, 35, 64, 0.50);	/* hero-verloop, zwaar */
	--mvd-on-dark-soft: rgba(255, 255, 255, 0.70);	/* hero-subtitel, knoprand */
	--mvd-band-quiet: rgba(244, 242, 238, 0.60);	/* gedempte tekst op navy */
	--mvd-band-rule: rgba(244, 242, 238, 0.16);	/* lijnen op navy */
	--mvd-hero-veil: linear-gradient(180deg, rgba(15,35,64,.28) 0%, rgba(15,35,64,.62) 45%, rgba(15,35,64,.88) 100%);	/* verloop over de hero-foto */

	/* lettertype */
	--mvd-font-cormorant: 'Cormorant Garamond', Cormorant, Georgia, 'Times New Roman', serif;
	--mvd-font-jost: Jost, 'Helvetica Neue', Helvetica, Arial, sans-serif;

	/* typeschaal — maat / regelhoogte / letterspatie / gewicht */
	--mvd-size-display-xl: clamp(3.1rem, 1.9rem + 6vw, 6.9rem);
	--mvd-lh-display-xl: 1.05;
	--mvd-ls-display-xl: -0.01em;
	--mvd-fw-display-xl: 300;
	--mvd-size-display-l: clamp(2.4rem, 1.7rem + 2.4vw, 3.85rem);
	--mvd-lh-display-l: 1.05;
	--mvd-ls-display-l: -0.01em;
	--mvd-fw-display-l: 300;
	--mvd-size-display-ml: clamp(2.1rem, 1.45rem + 2.4vw, 3.5rem);
	--mvd-lh-display-ml: 1.05;
	--mvd-ls-display-ml: -0.01em;
	--mvd-fw-display-ml: 300;
	--mvd-size-display-m: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem);
	--mvd-lh-display-m: 1.05;
	--mvd-ls-display-m: -0.01em;
	--mvd-fw-display-m: 300;
	--mvd-size-display-s: 24px;
	--mvd-lh-display-s: 1.2;
	--mvd-ls-display-s: 0;
	--mvd-fw-display-s: 600;
	--mvd-size-display-xs: 20px;
	--mvd-lh-display-xs: 1.3;
	--mvd-ls-display-xs: 0;
	--mvd-fw-display-xs: 400;
	--mvd-size-display-2xs: 16px;
	--mvd-lh-display-2xs: 1.3;
	--mvd-ls-display-2xs: 0.14em;
	--mvd-fw-display-2xs: 400;
	--mvd-size-display-cap: 15px;
	--mvd-lh-display-cap: 1.4;
	--mvd-ls-display-cap: 0.5px;
	--mvd-fw-display-cap: 400;
	--mvd-size-body-l: clamp(1.05rem, 1rem + 0.3vw, 1.16rem);
	--mvd-lh-body-l: 1.6;
	--mvd-ls-body-l: 0;
	--mvd-fw-body-l: 300;
	--mvd-size-body-m: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
	--mvd-lh-body-m: 1.75;
	--mvd-ls-body-m: 0;
	--mvd-fw-body-m: 300;
	--mvd-size-body-s: 14px;
	--mvd-lh-body-s: 1.6;
	--mvd-ls-body-s: 0;
	--mvd-fw-body-s: 300;
	--mvd-size-label-m: 11.5px;
	--mvd-lh-label-m: 1.2;
	--mvd-ls-label-m: 0.16em;
	--mvd-fw-label-m: 400;
	--mvd-size-label-s: 11px;
	--mvd-lh-label-s: 1.2;
	--mvd-ls-label-s: 0.2em;
	--mvd-fw-label-s: 500;
	--mvd-size-label-xs: 10.5px;
	--mvd-lh-label-xs: 1.2;
	--mvd-ls-label-xs: 0.24em;
	--mvd-fw-label-xs: 600;

	/* ruimte */
	--mvd-space-10: 0.5rem;
	--mvd-space-15: 0.75rem;
	--mvd-space-20: 1rem;
	--mvd-space-30: 1.5rem;
	--mvd-space-40: 2rem;
	--mvd-space-50: 2.5rem;
	--mvd-space-60: 3rem;
	--mvd-space-70: 4rem;
	--mvd-space-80: 6rem;
	--mvd-space-90: 8rem;
	--mvd-space-100: 10rem;

	/* maatvoering */
	--mvd-container: 1200px;
	--mvd-wide: 1400px;
}

/* typeschaal als klassen */
.t-display-xl { font-family: var(--mvd-font-cormorant); font-size: var(--mvd-size-display-xl); line-height: var(--mvd-lh-display-xl); letter-spacing: var(--mvd-ls-display-xl); font-weight: var(--mvd-fw-display-xl); }	/* hero-titel (.hero h1) */
.t-display-l { font-family: var(--mvd-font-cormorant); font-size: var(--mvd-size-display-l); line-height: var(--mvd-lh-display-l); letter-spacing: var(--mvd-ls-display-l); font-weight: var(--mvd-fw-display-l); }	/* verhaal-titel Kunst / Kracht & Keuze (.story h3) */
.t-display-ml { font-family: var(--mvd-font-cormorant); font-size: var(--mvd-size-display-ml); line-height: var(--mvd-lh-display-ml); letter-spacing: var(--mvd-ls-display-ml); font-weight: var(--mvd-fw-display-ml); }	/* coaching-kop */
.t-display-m { font-family: var(--mvd-font-cormorant); font-size: var(--mvd-size-display-m); line-height: var(--mvd-lh-display-m); letter-spacing: var(--mvd-ls-display-m); font-weight: var(--mvd-fw-display-m); }	/* sectiekop (.sec-head h2, over, contact) */
.t-display-s { font-family: var(--mvd-font-cormorant); font-size: var(--mvd-size-display-s); line-height: var(--mvd-lh-display-s); letter-spacing: var(--mvd-ls-display-s); font-weight: var(--mvd-fw-display-s); }	/* werktitel op het museumkaartje, trajectnaam (.label h3, .tier b) */
.t-display-xs { font-family: var(--mvd-font-cormorant); font-size: var(--mvd-size-display-xs); line-height: var(--mvd-lh-display-xs); letter-spacing: var(--mvd-ls-display-xs); font-weight: var(--mvd-fw-display-xs); }	/* praktisch-item kop (.fact b) */
.t-display-2xs { font-family: var(--mvd-font-cormorant); font-size: var(--mvd-size-display-2xs); line-height: var(--mvd-lh-display-2xs); letter-spacing: var(--mvd-ls-display-2xs); font-weight: var(--mvd-fw-display-2xs); text-transform: uppercase; }	/* logo in de header (.logo) */
.t-display-cap { font-family: var(--mvd-font-cormorant); font-size: var(--mvd-size-display-cap); line-height: var(--mvd-lh-display-cap); letter-spacing: var(--mvd-ls-display-cap); font-weight: var(--mvd-fw-display-cap); }	/* galerij-titel (Penpot, nog in gebruik op Kunst/Meer werk) */
.t-body-l { font-family: var(--mvd-font-jost); font-size: var(--mvd-size-body-l); line-height: var(--mvd-lh-body-l); letter-spacing: var(--mvd-ls-body-l); font-weight: var(--mvd-fw-body-l); }	/* intro-alinea (.lede, .story-txt p) */
.t-body-m { font-family: var(--mvd-font-jost); font-size: var(--mvd-size-body-m); line-height: var(--mvd-lh-body-m); letter-spacing: var(--mvd-ls-body-m); font-weight: var(--mvd-fw-body-m); }	/* lopende tekst (body), meta-regel museumkaartje */
.t-body-s { font-family: var(--mvd-font-jost); font-size: var(--mvd-size-body-s); line-height: var(--mvd-lh-body-s); letter-spacing: var(--mvd-ls-body-s); font-weight: var(--mvd-fw-body-s); }	/* praktisch-tekst, footer (.fact p) */
.t-label-m { font-family: var(--mvd-font-jost); font-size: var(--mvd-size-label-m); line-height: var(--mvd-lh-label-m); letter-spacing: var(--mvd-ls-label-m); font-weight: var(--mvd-fw-label-m); text-transform: uppercase; }	/* hoofdmenu, winkelwagen (.nav a, .cart) */
.t-label-s { font-family: var(--mvd-font-jost); font-size: var(--mvd-size-label-s); line-height: var(--mvd-lh-label-s); letter-spacing: var(--mvd-ls-label-s); font-weight: var(--mvd-fw-label-s); text-transform: uppercase; }	/* knop, sectielink, status (.btn, .seelink, .stat) */
.t-label-xs { font-family: var(--mvd-font-jost); font-size: var(--mvd-size-label-xs); line-height: var(--mvd-lh-label-xs); letter-spacing: var(--mvd-ls-label-xs); font-weight: var(--mvd-fw-label-xs); text-transform: uppercase; }	/* eyebrow, veldlabel, kwaliteit (.eyebrow, .field label, .quals li) */