/*
Theme Name: GD Verhuizen
Theme URI: https://gdverhuizen.nl
Author: Innovatie Media
Author URI: https://innovatiemedia.nl
Description: Maatwerkthema voor GD Verhuisbedrijf. Blokken via ACF flexible content, Barba-transities, Lenis smooth scroll en GSAP-animaties.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: gdverhuizen
*/

/* =========================================================
   Design tokens (Figma "GD Verhuizen", node 1:2, canvas 1512px).
   Het bestand heeft geen Figma-variabelen; deze waarden komen uit de
   gebruikte vullingen en tekststijlen en zijn omgezet naar rem/clamp.
   ========================================================= */

:root {
	/* Kleur */
	--c-yellow: #ffe700;
	--c-yellow-dark: #f5c400;   /* hover op gele knoppen */
	--c-black: #000000;
	--c-white: #ffffff;
	--c-dot: #e9e9e9;           /* grijze kaartstippen */
	--c-line: rgba(0, 0, 0, 0.14);
	--c-mute: rgba(0, 0, 0, 0.6);
	--c-error: #d4351c;

	/* Typografie: Outfit (koppen, lopende tekst), Satoshi (knoppen, UI) */
	--f-display: "Outfit", "Manrope", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
	--f-ui: "Satoshi", "Outfit", "Manrope", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;

	--fs-small: 0.875rem;                                     /* 14: knoppen */
	--fs-body: 1rem;                                          /* 16 */
	--fs-lead: clamp(1.125rem, 0.98rem + 0.4vw, 1.5rem);      /* 24: naam bij review */
	--fs-title: clamp(1.5rem, 1.2rem + 0.85vw, 1.875rem);     /* 30: koppen en quote */
	--fs-menu: clamp(2.25rem, min(1rem + 3.4vw, 7vh), 4.5rem);

	/* Ruimte */
	--gutter: clamp(1.25rem, 6vw, 5.6875rem);                 /* 91 */
	--gutter-header: clamp(1rem, 2vw, 1.875rem);              /* 30 */
	--content: 83.25rem;                                      /* 1332 */
	--section-y: clamp(5rem, 9vw, 9.375rem);                  /* 150 */

	/* Componenten */
	--topbar-h: 3.125rem;                                     /* 50 */
	--btn-h: 3.125rem;                                        /* 50 */
	--btn-px: 1.8125rem;                                      /* 29 */
	--radius-pill: 100px;

	/* Beweging */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-gd: cubic-bezier(0.625, 0.05, 0, 1);
	--ease-spin: cubic-bezier(0.7, -0.35, 0.25, 1.45);

	--header-top: 0px;
}