/* ==========================================================================
   ASTRA-VARIABELEN HERMAPPEN — de bron in plaats van de symptomen

   Astra bouwt zijn hele uiterlijk op een set eigen CSS-variabelen
   (--ast-global-color-0 t/m -8 en een handvol afgeleiden). Elke kleur die
   Astra ergens uitschrijft — knoppen, menu's, randen, formulieren, blokken,
   widgets, paginering — komt daar vandaan.

   Door die variabelen hier op ONZE tokens te zetten, kan er nergens meer een
   Astra-standaardkleur opduiken. Dat is fundamenteler dan losse selectors
   overschrijven: we vervangen het palet zelf, niet de plekken waar het
   toevallig zichtbaar wordt.

   Dit bestand laadt direct na tokens.css en vóór alle overige stijlen.
   ========================================================================== */

:root,
:root body,
.ast-theme-transparent-header,
.astra-hfb-header {

	/* --- De negen globale kleuren van Astra --------------------------- */

	/* 0 = primaire themakleur (knoppen, links, accenten) */
	--ast-global-color-0: var(--wvs-accent);
	/* 1 = secundair / hover */
	--ast-global-color-1: var(--wvs-accent-hover);
	/* 2 = koppen */
	--ast-global-color-2: var(--wvs-donker);
	/* 3 = bodytekst */
	--ast-global-color-3: var(--wvs-tekst);
	/* 4 = licht vlak / alternatieve achtergrond */
	--ast-global-color-4: var(--wvs-bg-zacht);
	/* 5 = hoofdachtergrond */
	--ast-global-color-5: var(--wvs-bg);
	/* 6 = randen en scheidingslijnen */
	--ast-global-color-6: var(--wvs-rand);
	/* 7 = donker vlak (footer e.d.) */
	--ast-global-color-7: var(--wvs-donker);
	/* 8 = extra donker */
	--ast-global-color-8: var(--wvs-donker-diep);

	/* --- Benoemde afgeleiden ------------------------------------------ */

	--ast-global-color-primary: var(--wvs-accent);
	--ast-global-color-secondary: var(--wvs-accent-hover);
	--ast-global-color-alternate-background: var(--wvs-bg-zacht);
	--ast-global-color-subtle-background: var(--wvs-bg-vlak);

	--ast-border-color: var(--wvs-rand);
	--ast-comment-inputs-background: var(--wvs-bg);
	--ast-form-field-color: var(--wvs-kop-kleur);
	--ast-form-field-border-color: var(--wvs-rand-sterk);

	/* --- Knoppen ------------------------------------------------------- */

	--ast-global-color-btn-bg: var(--wvs-accent);
	--ast-global-color-btn-bg-h: var(--wvs-accent-hover);
	--ast-global-color-btn-color: var(--wvs-accent-contrast);
	--ast-global-color-btn-color-h: var(--wvs-accent-contrast);

	/* --- Blokeditor: WordPress-preseturen op onze tokens ---------------- */

	--wp--preset--color--wvs-accent: var(--wvs-accent);
	--wp--preset--color--wvs-accent-hover: var(--wvs-accent-hover);
	--wp--preset--color--wvs-donker: var(--wvs-donker);
	--wp--preset--color--wvs-tekst: var(--wvs-tekst);
	--wp--preset--color--wvs-rand: var(--wvs-rand);
	--wp--preset--color--wvs-vlak: var(--wvs-bg-zacht);
	--wp--preset--color--wvs-wit: var(--wvs-bg);

	/* Astra's eigen typografie-variabelen */
	--ast-body-font-family: var(--wvs-font-tekst);
	--ast-heading-font-family: var(--wvs-font-kop);
}

/* Astra schrijft in sommige versies zijn kleuren rechtstreeks in een
   <style id="astra-theme-css-inline-css">-blok met hoge specificiteit.
   Deze regel vangt de gevallen af waarin dat een harde waarde is in plaats
   van een variabele. Alleen de dragende containers — niet alles plat slaan. */

body,
.site,
#page,
.site-content,
.ast-container,
.ast-separate-container,
.ast-plain-container,
.ast-narrow-container {
	background-color: var(--wvs-bg);
	color: var(--wvs-body-kleur);
}