/* =========================================================================
   TapToReview – design tokens
   Bron: design system "TapToReview" (Figma-variabelen + tokens.json).
   Pas waarden hier aan, niet in de componenten.
   ========================================================================= */
:root {
	/* Kleur – merk */
	--forest: #033A30;       /* merk: logo, tekst, footer, hero-tegel. Wit erop 12,7:1 */
	--coral: #E56446;        /* actiekleur: knoppen, lint. Wit erop alleen groot (≥18,7px bold) */
	--coral-hover: #CF5236;
	--plum: #39235A;         /* accent: tegels, stapnummers. Wit erop 13,4:1 */
	--stone: #736C5B;        /* aardetint: tegels. Tekst erop altijd wit */

	/* Kleur – neutraal */
	--paper: #F5F1EA;        /* pagina-achtergrond */
	--sand: #E8E1D4;         /* kaarten, FAQ, velden op paper */
	--white: #FFFFFF;
	--ink: var(--forest);
	--ink-muted: #4E6660;    /* secundaire tekst, 5,5:1 op paper */
	--line: rgba(3, 58, 48, .14);
	--line-strong: rgba(3, 58, 48, .45);

	/* Kleur – functioneel */
	--star: #F2B33D;
	--success: #1F7A4D;
	--error: #B3261E;

	/* Typografie */
	--font: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fs-display: clamp(3.25rem, 2rem + 4.2vw, 5.5rem);   /* 52 → 88 */
	--fs-h1: clamp(2.5rem, 1.7rem + 2.6vw, 3rem);         /* 40 → 64 */
	--fs-h2: clamp(2.125rem, 1.6rem + 1.6vw, 3rem);       /* 34 → 48 */
	--fs-h3: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);     /* 22 → 28 */
	--fs-h4: 1.25rem;     /* 20 */
	--fs-lead: 1.3125rem; /* 21 */
	--fs-body: 1.0625rem; /* 17 */
	--fs-small: .9375rem; /* 15 */
	--fs-eyebrow: .875rem;/* 14 */
	--fs-button: 1.125rem;/* 18 – bold, zodat wit op coral als grote tekst telt */
	--fs-price: 2.75rem;  /* 44 */

	/* Ruimte */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;  /* bento-gutter */
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px; /* tegel-padding */
	--space-16: 64px;
	--space-24: 96px; /* tussen secties */
	--gutter: var(--space-4);
	--section: var(--space-24);
	--page-pad: 64px;
	--content-max: 1512px;

	/* Afronding */
	--radius-sm: 12px;
	--radius-md: 24px;
	--radius-lg: 40px;
	--radius-pill: 999px;

	/* Schaduw – alleen voor de fysieke kaart en telefoon */
	--shadow-card: 0 24px 50px rgba(3, 58, 48, .35);
	--shadow-phone: 0 30px 60px rgba(0, 0, 0, .3);
	--shadow-pill: 0 10px 30px rgba(3, 58, 48, .18);
}

@media (max-width: 820px) {
	:root {
		--section: var(--space-16);
		--page-pad: 16px;
		--radius-lg: 28px;
	}
}