/*
 * Design tokens — Help, ik wil op vakantie!
 * Bron: kleuren uit het logo en de oude CSS (#30afb8, #1c9ba4), aangevuld met
 * een rustige zandbasis en één actiekleur. Contrast gecontroleerd (WCAG 2.2 AA),
 * zie docs/03-design.md → "Tokens".
 */

@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("../fonts/plus-jakarta-sans-latin-wght-italic.woff2") format("woff2");
	font-weight: 200 800;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree-latin-wght-italic.woff2") format("woff2");
	font-weight: 300 900;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Merk: teal uit het logo. 500 alleen decoratief (contrast 2,6 op wit). */
	--teal-50: #eaf7f8;
	--teal-100: #cdeef0;
	--teal-500: #30afb8;
	--teal-600: #1c9ba4;
	--teal-700: #147d85; /* 4,9:1 op wit — grote tekst, iconen */
	--teal-800: #0f6168; /* 7,2:1 op wit — links en kleine tekst */
	--teal-900: #0b4a50;

	/* Actie: één duidelijke kleur, alleen voor de belangrijkste knop. */
	--coral-600: #d94f2b;
	--coral-700: #c2410c; /* witte tekst erop 5,2:1 */
	--coral-800: #9a3412;

	/* Warm accent voor kleine highlights, altijd met donkere tekst. */
	--sun-300: #ffd166;
	--sun-100: #fff1cc;
	/* Actieknoppen sinds B-033: zonnig geel-oranje met donkere tekst (ink erop 8,4:1). */
	--sun-500: #f6a623;
	--sun-600: #e38d0c; /* hover; ink erop 6,6:1 */

	/* Basis */
	--sand-50: #fbf7f1;
	--sand-100: #f4ecdf;
	--sand-200: #e9dcc7;
	--ink: #1d2b2f;      /* 14,6:1 op wit */
	--muted: #5b6b6f;    /* 5,6:1 op wit */
	--white: #ffffff;

	/* Rollen */
	--color-bg: var(--sand-50);
	--color-surface: var(--white);
	--color-surface-alt: var(--sand-100);
	--color-text: var(--ink);
	--color-text-muted: var(--muted);
	--color-link: var(--teal-800);
	--color-link-hover: var(--teal-900);
	--color-brand: var(--teal-500);
	--color-action: var(--sun-500);
	--color-action-hover: var(--sun-600);
	--color-on-action: var(--ink);
	--color-border: var(--sand-200);
	--color-focus: var(--teal-800);
	--color-ad-label-bg: var(--sand-100);

	/* Typografie */
	--font-heading: "Plus Jakarta Sans", "Figtree", system-ui, sans-serif;
	--font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--fs-xs: 0.8125rem;   /* 13px: labels */
	--fs-sm: 0.9375rem;   /* 15px */
	--fs-base: 1.125rem;  /* 18px: lopende tekst, groot genoeg op mobiel */
	--fs-lg: 1.25rem;
	--fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
	--fs-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.625rem);
	--fs-3xl: clamp(2.25rem, 1.5rem + 3.6vw, 4rem);

	--lh-tight: 1.1;
	--lh-snug: 1.3;
	--lh-body: 1.65;

	/* Ruimte (8px-raster) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;

	--section-y: clamp(3rem, 2rem + 5vw, 6rem);
	--gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
	--content: 42rem;   /* leesbreedte */
	--wide: 76rem;

	/* Vorm */
	--radius-sm: 0.5rem;
	--radius: 1rem;
	--radius-lg: 1.75rem;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgb(29 43 47 / 0.06), 0 2px 8px rgb(29 43 47 / 0.05);
	--shadow: 0 2px 4px rgb(29 43 47 / 0.05), 0 12px 32px rgb(29 43 47 / 0.09);

	--tap: 44px;        /* minimale knophoogte */
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--speed: 180ms;
}

@media (prefers-reduced-motion: reduce) {
	:root { --speed: 0ms; }
}