/*
Theme Name: Pixelz Digital
Theme URI: https://pixelz.digital
Author: Pixelz Digital
Author URI: https://pixelz.digital
Description: Maatwerkthema voor Pixelz Digital. Pagina's uit ACF flexibele content blokken, Barba-paginatransities, Lenis smooth scroll, Rank Math met aanvullende structured data, Gravity Forms en Gravity SMTP.
Version: 0.25.1
Requires at least: 6.6
Requires PHP: 8.1
License: Proprietary
Text Domain: pixelz
*/

/* ---------------------------------------------------------------------------
 * Design tokens. Alle blok-CSS grijpt op deze variabelen aan, nergens losse
 * hexwaarden of pixelmaten zonder token. Zodra er een ontwerp is: de waarden
 * hier vervangen door die uit Figma (get_variable_defs), niet de blok-CSS.
 *
 * Huisregels voor CSS (zie CLAUDE.md):
 * - Nooit lengte / lengte in calc() (Firefox en oudere Safari vallen dan
 *   terug op de standaardwaarde). Gebruik een getal als factor.
 * - Horizontaal afknippen met overflow-x: clip, niet hidden (hidden maakt
 *   er een scrollcontainer van).
 * ------------------------------------------------------------------------- */
/* Koppen: Qudone (Perfectype, alleen Regular). Bron: qudone.otf in de
   projectmap, als WOFF in assets/fonts. Body: Readex Pro (Google Fonts). */
@font-face {
	font-family: "Qudone";
	src: url("assets/fonts/qudone.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Kleuren (tijdelijk, tot er een ontwerp is) */
	--c-inkt: #16161d;          /* tekst, donkere vlakken */
	--c-inkt-zacht: #3a3a46;    /* secundaire tekst op licht */
	--c-gedempt: #6b6b76;       /* meta, labels */
	--c-lijn: #e6e6ea;          /* randen, scheidingslijnen */
	--c-grijs: #f2f2f4;         /* lichte vlakken */
	--c-wit: #ffffff;
	--c-accent: #5b3cf5;        /* knoppen, accenten (ook in inc/emails.php) */
	--c-accent-donker: #4327d6; /* hover accent */
	--c-accent-licht: #ece8ff;  /* labels, zachte vlakken */
	/* Merk Pixelz Digital (pixelz.digital): de gloed van de logopixels */
	--c-pd-nacht: #051e1f;         /* donkere merkachtergrond */
	--c-pd-zwart: #020707;         /* bijna zwart: basis van het donkere thema */
	--c-pd-oranje: #fc9425;        /* gloed rechtsonder */
	--c-pd-cyaan: #2eeee0;         /* gloed linksboven */
	--c-pd-licht-oranje: #ffead5;  /* vulling pixel, verloop */
	--c-pd-licht-blauw: #d7fbff;   /* vulling pixel, verloop */
	--c-pd-roze: #ff6ec7;          /* tweede palet (blok werkwijze): gloed */
	--c-pd-licht-roze: #ffd9f0;    /* tweede palet: vulling */
	--c-pd-ijsblauw: #7cc4ff;      /* tweede palet: gloed */

	--c-succes: #1f9d55;
	--c-fout: #d0342c;
	--c-waarschuwing: #f2c94c;

	/* Typografie */
	--font-basis: "Readex Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
	/* Koppen in Readex Pro (als proef). Terug naar Qudone: "Qudone", var(--font-basis)
	   en de preload in functions.php weer aanzetten. */
	--font-kop: var(--font-basis);
	--fs-body: 1.0625rem;
	--lh-body: 1.65;           /* altijd een factor, nooit een lengte */
	--fs-klein: 0.875rem;
	--fs-label: 0.8125rem;
	--fs-intro: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
	--fs-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem);
	--fs-h2: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
	--fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
	--fs-h4: 1.125rem;
	--lh-kop: 1.1;
	--fw-body: 300;            /* Readex Pro Light voor lopende tekst */
	--fw-kop: 400;             /* gewicht van de koppen (Qudone: alleen 400) */
	--fw-normaal: 400;
	--fw-medium: 500;
	--fw-vet: 700;

	/* Ruimte */
	--ruimte-1: 0.25rem;
	--ruimte-2: 0.5rem;
	--ruimte-3: 0.75rem;
	--ruimte-4: 1rem;
	--ruimte-5: 1.5rem;
	--ruimte-6: 2rem;
	--ruimte-7: 3rem;
	--ruimte-8: 4rem;
	--sectie-klein: clamp(2.5rem, 2rem + 2vw, 4rem);
	--sectie-normaal: clamp(4rem, 3rem + 4vw, 7.5rem);
	--sectie-groot: clamp(5rem, 3.5rem + 6vw, 10rem);

	/* Layout */
	--container: 80rem;
	--container-smal: 46rem;
	--gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
	--header-hoogte: 6.25rem; /* balk van 70px + 30px boven */

	/* Vorm */
	--radius-s: 0.5rem;
	--radius-m: 1rem;
	--radius-l: 1.75rem;
	--radius-rond: 999px;
	--schaduw: 0 1px 2px rgba(22, 22, 29, 0.06), 0 8px 24px rgba(22, 22, 29, 0.08);

	/* Beweging */
	--ease: cubic-bezier(0.625, 0.05, 0, 1);
	--ease-uit: cubic-bezier(0.16, 1, 0.3, 1);
	--duur-kort: 0.2s;
	--duur: 0.45s;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duur-kort: 0.01s;
		--duur: 0.01s;
	}
}