/* ==========================================================================
   VDG Huisstijl — Design tokens
   Van de Groep & Olsthoorn — bron: Huisstijlhandboek 2026 (v2.1)
   Eén bron van waarheid. Gebruik in plugins altijd var(--vdg-...).
   ========================================================================== */

/* --- Lettertype: Caros (geüpload in de mediabibliotheek) ---
   De Caros-OTF's hebben te krappe vertical metrics (typo-ascent 71,2% /
   -descent 21,8%, win 96% / 24,6%), terwijl de glyphs tot ~102% boven en
   ~27,5% onder de basislijn reiken. Safari gebruikt die krappe metrics o.a.
   in invoervelden en knipt daardoor hoofd- en staartletters af. De
   ascent-/descent-override zetten ruime, correcte waarden zodat dat overal
   (voorkant, login, chat, formulieren) verdwijnt. */
@font-face {
	font-family: "Caros";
	src: url("https://vandegroep.biz/wp-content/uploads/2026/06/caros-light.otf") format("opentype");
	font-weight: 300; font-style: normal; font-display: swap;
	ascent-override: 108%; descent-override: 33%; line-gap-override: 0%;
}
@font-face {
	font-family: "Caros";
	src: url("https://vandegroep.biz/wp-content/uploads/2026/06/caros.otf") format("opentype");
	font-weight: 400; font-style: normal; font-display: swap;
	ascent-override: 108%; descent-override: 33%; line-gap-override: 0%;
}
@font-face {
	font-family: "Caros";
	src: url("https://vandegroep.biz/wp-content/uploads/2026/06/caros-medium.otf") format("opentype");
	font-weight: 500; font-style: normal; font-display: swap;
	ascent-override: 108%; descent-override: 33%; line-gap-override: 0%;
}
@font-face {
	font-family: "Caros";
	src: url("https://vandegroep.biz/wp-content/uploads/2026/06/caros-bold.otf") format("opentype");
	font-weight: 700; font-style: normal; font-display: swap;
	ascent-override: 108%; descent-override: 33%; line-gap-override: 0%;
}
@font-face {
	font-family: "Caros";
	src: url("https://vandegroep.biz/wp-content/uploads/2026/06/caros-heavy.otf") format("opentype");
	font-weight: 800; font-style: normal; font-display: swap;
	ascent-override: 108%; descent-override: 33%; line-gap-override: 0%;
}

:root {
	/* --- Merkkleuren (exact uit het handboek) --- */
	--vdg-donkerblauw: #111A3B; /* Corporate Donkerblauw — PMS 2758 */
	--vdg-oranje:      #F68D2E; /* Oranje — PMS 715 */
	--vdg-terracotta:  #E55800; /* Terracotta — PMS 6020 */
	--vdg-aubergine:   #4A2539; /* Aubergine — PMS 7645 */
	--vdg-groen:       #002405; /* Food Donkergroen — PMS 5535 */
	--vdg-creme:       #FFF4E8; /* Crème — PMS 715 @ 10% */
	--vdg-wit:         #FFFFFF;

	/* --- Aftintingen (stappen van 10%, zoals voorgeschreven) ---
	   Donkerblauw als voorbeeld; voeg desgewenst andere kleuren toe. */
	--vdg-donkerblauw-90: #29314f;
	--vdg-donkerblauw-80: #404862;
	--vdg-donkerblauw-70: #585f76;
	--vdg-donkerblauw-60: #707689;
	--vdg-donkerblauw-50: #888d9d;
	--vdg-donkerblauw-40: #a0a4b1;
	--vdg-donkerblauw-30: #b7bac4;
	--vdg-donkerblauw-20: #cfd1d8;
	--vdg-donkerblauw-10: #e7e8eb;

	/* --- Semantische tokens (gebruik deze in plugins) --- */
	--vdg-bg:        var(--vdg-wit);
	--vdg-surface:   var(--vdg-creme);
	--vdg-header:    var(--vdg-donkerblauw);
	--vdg-text:      var(--vdg-donkerblauw);
	--vdg-text-soft: var(--vdg-donkerblauw-70);
	--vdg-accent:    var(--vdg-oranje);
	--vdg-accent-2:  var(--vdg-terracotta);
	--vdg-border:    var(--vdg-donkerblauw-10);
	--vdg-on-accent: var(--vdg-wit);
	--vdg-on-header: var(--vdg-wit);

	/* --- Typografie --- */
	--vdg-font:         "Caros", "Tahoma", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--vdg-font-heading: "Caros", "Tahoma", sans-serif;

	/* --- Vorm --- */
	--vdg-radius:    14px;
	--vdg-radius-sm: 10px;
	--vdg-shadow:    0 6px 24px rgba(17, 26, 59, 0.08);
}

/* Optionele hulpklassen — handig maar niet verplicht. */
.vdg-btn {
	display: inline-block;
	background: var(--vdg-accent);
	color: var(--vdg-on-accent);
	font-family: var(--vdg-font);
	font-weight: 600;
	border: 0;
	border-radius: var(--vdg-radius-sm);
	padding: 10px 18px;
	cursor: pointer;
	text-decoration: none;
	transition: filter 0.15s ease;
}
.vdg-btn:hover { filter: brightness(0.94); }

.vdg-surface {
	background: var(--vdg-surface);
	border: 1px solid var(--vdg-border);
	border-radius: var(--vdg-radius);
	color: var(--vdg-text);
	font-family: var(--vdg-font);
}