/* ==========================================================================
   TOKENS — DE MERKLAAG
   Dit is het enige bestand met merk-specifieke waarden. Bij het klonen naar
   een ander merk (woningafbouw.com) wordt alleen dit bestand vervangen en de
   fonts-map verwisseld; de rest van de CSS blijft ongewijzigd.

   Bron: WPBakery-broncode van de dienstpagina "Schilderwerken en Onderhoud"
   (zie CLAUDE-CODE-BOUWOPDRACHT.md §2) — betrouwbaarder dan de eerdere
   screenshot-metingen. Bordeaux #a61a45 en koppen #1f2a58 zijn leidend;
   #9b213e/#2a3856 waren de oude, uit screenshots gemeten waarden.
   Let op: het donkergroen #184341 uit de oude CSS is GEEN Hub-default meer
   gebleken — het is de icoonkleur van de werkwijze-kaarten, zie §2.
   ========================================================================== */

:root {

	/* --- Merkkleuren (§2) ------------------------------------------------ */
	--wvs-accent:          #a61a45;  /* bordeaux — uit de WPBakery-bron       */
	--wvs-accent-hover:    #881539;  /* afgeleid, iets donkerder              */
	--wvs-accent-zacht:    rgba(166, 26, 69, 0.08);
	--wvs-accent-diep:     #7d1434;  /* afgeleid, social-iconen/verdiepte vlakken */
	--wvs-accent-donker:   #582a29;  /* knop op bordeaux (Inschrijven)        */
	--wvs-accent-contrast: #ffffff;  /* tekst op bordeaux                     */

	/* LET OP (herzien): #1f2a58 is bevestigd voor de H2-koppen ÍN de pagina-
	   content van de dienstpagina's (WPBakery-shortcode-attribuut op die
	   pagina). Het is GEEN sitebrede merkkleur — header, hoofdmenu, mega-
	   panelen en footer-koppen gebruiken zwart/wit (zie --wvs-menu hieronder
	   en css/header-footer.css). Gebruik --wvs-kop dus alleen voor H2/H3 in
	   paginacontent, nooit voor navigatie/chrome. */
	--wvs-kop:             #1f2a58;  /* koppen H2 in paginacontent — WPBakery-bron */
	--wvs-donker:          #1f2a58;  /* alias, zelfde tint, zelfde beperkte scope */
	--wvs-donker-diep:     #182047;  /* afgeleid van --wvs-donker, zelfde beperkte scope */
	--wvs-tekst:           #626974;  /* bodytekst                             */
	--wvs-tekst-zacht:     #8c8c8c;  /* topbar, bijschriften — gemeten        */
	--wvs-menu:            #000000;  /* header/hoofdmenu/mega-paneel-tekst — WPBakery-bron (link_color rgb(0,0,0)) */

	/* Footer-achtergrond: HERZIEN op basis van een live-screenshot (de
	   shortcode zelf specificeerde geen background-color voor de footer-
	   rijen — die kwam kennelijk uit een Hub-thema-/Customizer-standaard
	   buiten de XML-export om). De live site toont een doorlopend bordeaux/
	   dieprood vlak door de hele footer heen — geen los wit topvlak zoals
	   eerder aangenomen. Hergebruikt --wvs-accent-diep (al bestaand,
	   oorspronkelijk bedoeld voor "verdiepte vlakken"). Exacte hex nog niet
	   pixel-voor-pixel bevestigd; corrigeer zodra je de echte waarde hebt. */
	--wvs-footer-bg:       var(--wvs-accent-diep);

	--wvs-link:            #5b7bfb;
	--wvs-link-hover:      var(--wvs-kop);

	/* --- Paginaspecifieke merkkleuren (§2, dienstpagina-sjabloon) -------- */
	--wvs-hero-intro:      #313f58;  /* hero-introtekst                       */
	--wvs-icoon-uitleg:    #8b2053;  /* icoonkleur uitleg-kaarten             */
	--wvs-icoon-werkwijze: #184341;  /* icoonkleur werkwijze-kaarten          */
	--wvs-knop-grijs:      #4f4d4e;  /* grijze knop (offerte)                 */
	--wvs-knop-grijs-hover:#383838;  /* grijze knop hover                     */
	--wvs-projecttitel:    #5a2a2a;  /* titel op projectkaarten               */
	--wvs-cta-overlay:     rgba(47, 40, 40, 0.5);  /* overlay op CTA-foto     */

	/* --- Vlakken en lijnen ------------------------------------------------ */
	--wvs-bg:              #ffffff;
	--wvs-bg-zacht:        #f2f5f8;  /* sectievlak (licht) — §2                */
	--wvs-bg-vlak:         #f2f2f2;
	--wvs-rand:            #ededed;
	--wvs-rand-sterk:      #dedede;

	/* --- Rollen (worden in dark.css omgezet; gebruik in de CSS altijd deze) */
	--wvs-kop-kleur:       var(--wvs-kop);
	--wvs-body-kleur:      var(--wvs-tekst);
	--wvs-kaart-bg:        var(--wvs-bg);
	--wvs-kaart-rand:      var(--wvs-rand);

	/* --- Typografie (§3 — Inter, koppen en body, geen Google Fonts) ------ */
	--wvs-font-kop:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--wvs-font-tekst: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

	--wvs-gewicht-tekst:   400;
	--wvs-gewicht-medium:  500;
	--wvs-gewicht-kop:     600;
	--wvs-gewicht-sterk:   700;

	/* Vloeiende schaal — mobiel-first, groeit mee tot desktop */
	--wvs-fs-klein:  0.875rem;
	--wvs-fs-body:   clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--wvs-fs-lead:   clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
	--wvs-fs-h4:     clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--wvs-fs-h3:     clamp(1.25rem, 1.13rem + 0.55vw, 1.5rem);
	--wvs-fs-h2:     clamp(1.5rem, 1.24rem + 1.15vw, 2.25rem);
	--wvs-fs-h1:     clamp(1.875rem, 1.4rem + 2.1vw, 3rem);

	--wvs-lh-kop:    1.2;
	--wvs-lh-body:   1.7;
	--wvs-ls-kop:    -0.01em;
	--wvs-ls-knop:   0.06em;   /* knoppen zijn in hoofdletters met spatiëring */

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

	/* --- Vorm ------------------------------------------------------------ */
	--wvs-radius-knop:  4px;     /* live site: vrijwel recht, lichte afronding */
	--wvs-radius-vlak:  10px;
	--wvs-radius-klein: 6px;

	--wvs-schaduw:      0 1px 2px rgba(24, 27, 49, 0.04), 0 8px 24px rgba(24, 27, 49, 0.06);
	--wvs-schaduw-hoog: 0 2px 4px rgba(24, 27, 49, 0.05), 0 16px 40px rgba(24, 27, 49, 0.10);

	/* --- Maatvoering ----------------------------------------------------- */
	--wvs-container:        1280px;
	--wvs-container-smal:   860px;
	--wvs-sidebar:          340px;
	--wvs-marge:            clamp(1rem, 4vw, 2rem);

	/* --- Beweging -------------------------------------------------------- */
	--wvs-overgang: 180ms ease;
}

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