/*
Theme Name: Mobile XL
Theme URI: https://mobilexl-v2.innovatiemedia.nl
Author: Innovatie Media
Description: Maatwerk thema voor Mobile XL, opgebouwd uit flexibele content blokken.
Version: 0.1.0
Requires PHP: 8.1
License: Proprietary
Text Domain: mobilexl
*/

/* ---------------------------------------------------------------------------
 * Design tokens, rechtstreeks uit het Figma-ontwerp (MobileXL - Webdesign).
 * Alle kleuren en maten in de blokken grijpen op deze variabelen aan;
 * nergens losse hexwaarden in blok-CSS zonder token.
 * ------------------------------------------------------------------------- */
:root {
	/* Kleuren */
	--c-donkerblauw: #0c1a24;      /* MobileXL Donkerblauw: header, hero, footer */
	--c-achtergrondblauw: #0f212d; /* Achtergrond blauw: donkere sectievlakken */
	--c-secundair: #2f384b;        /* Secudair: secundaire vlakken en lijnen */
	--c-blauw: #51b5f9;            /* MobileXL - Blauw - Extra: knoppen en accenten */
	--c-paars: #672c91;            /* MobileXL - Paars */
	--c-grijs-1: #fcfcfc;          /* Grijs_1: lichtste achtergrond */
	--c-grijs-2: #efefef;          /* Grijs_2: lichte vlakken en kaartranden */
	--c-grijs-3: #d5d5d5;          /* Grijs_3: randen en deellijnen */
	--c-grijs-4: #6e6e6e;          /* Grijs_4: gedempte tekst */
	--c-wit: #ffffff;
	--c-zwart: #000000;

	/* Typografie */
	--font-base: "Montserrat", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
	--fs-body: 16px;
	--lh-body: 26px;
	--fs-h1: clamp(36px, 3.4vw, 64px);
	--fs-h2: clamp(28px, 2.1vw, 40px);
	--fs-h3: clamp(20px, 1.3vw, 24px);
	--fs-s: 14px;
	--fs-xs: 12px;

	/* Layout */
	--wrapper: 1400px;             /* contentbreedte uit het ontwerp (1920 - 2x260) */
	--gutter: 20px;
	--radius: 10px;                /* knoppen */
	--radius-kaart: 16px;          /* kaarten en panelen */
	--radius-sectie: 25px;         /* grote afgeronde vlakken (logo-kaart, banen) */

	/* Beweging */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-kort: 250ms;
	--dur-lang: 700ms;
}