/*
 * 00 — Design tokens
 *
 * Alleen custom properties op :root. Geen selectors, geen regels — die horen in
 * de latere partials thuis. Zo kan elk ander bestand van deze waarden uitgaan
 * zonder dat dit bestand zelf iets aan de pagina verandert.
 *
 * ── Let op: tokens en Divi Theme Options synchroniseren NIET automatisch ──
 * Divi compileert letterlijke hexwaarden in zijn eigen CSS; custom properties
 * kunnen niet terugwaarts uitgelezen worden. Drie plekken moet je met de hand
 * gelijk houden (zie ook CLAUDE.md):
 *
 *   1. Theme Options → body_font / heading_font → op "Default" zetten, zodat
 *      Divi geen font-family meer op body print (die zou op wp_head 99 landen
 *      en onze schreefletter verslaan).
 *   2. Theme Options → link_color / accent_color / all_buttons_* / footer_* →
 *      de opgeloste waarde van het bijbehorende token met de hand invullen.
 *   3. Theme Options → content_width (1140) ↔ --kdm-container. Houd deze
 *      identiek, anders lijnt de header niet uit met Divi's .et_pb_row.
 *
 * ── Nog te doen ──
 * - Hexwaarden hieronder zijn afgeleid van de mockup, niet eruit gesampled.
 *   Vervangen zodra het definitieve ontwerpbestand er is.
 * - --kdm-font-display staat op een placeholder en valt terug op Georgia.
 *   Vervangen zodra de schreefletter gekozen is; @font-face komt boven :root.
 */

/* ── Lettertypen ────────────────────────────────────────────────────────────
 *
 * Zet de .woff2-bestanden in assets/fonts/ en haal dit blok uit commentaar.
 * Zie assets/fonts/README.md.
 *
 * font-display: swap toont meteen de terugvalletter en wisselt zodra het
 * echte lettertype binnen is. Zonder die regel blijft de tekst tot een seconde
 * onzichtbaar — en het woordmerk is het eerste dat een bezoeker ziet.
 *
 * Let op de format(): "woff2" voor een gewoon bestand,
 * "woff2-variations" voor een variabel font (dan gebruik je één bestand met
 * een bereik, bijvoorbeeld font-weight: 400 700).  */

@font-face {
	font-family: "CormorantGaramond";
	src: url("../assets/fonts/CormorantGaramond-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "CormorantGaramond";
	src: url("../assets/fonts/CormorantGaramond-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("../assets/fonts/Poppins-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}


:root {
	/* ── Merkkleuren ──────────────────────────────────────────────────────
	 *
	 * De vier kleuren van het ontwerp. Dit is de enige plek waar deze
	 * hexwaarden staan; al het andere hieronder verwijst ernaar. Moet er ooit
	 * een tint bij of veranderen, dan hoeft dat maar op één plek.
	 *
	 * De namen zeggen wát het is, niet waarvoor het dient — waarvoor staat in
	 * de rollen daaronder. Zo kun je een rol verleggen (bijvoorbeeld de
	 * knopkleur) zonder een naam te krijgen die niet meer klopt. */
	--kdm-taupe:    #857F73;  /* warm grijsbruin */
	--kdm-black:    #2A2925;  /* warm bijna-zwart */
	--kdm-blush:    #DFD6D1;  /* lichte warme tint */
	--kdm-shell:    #F6F3EE;  /* lichtste warme tint */
	/* Een tint donkerder en groener dan --kdm-black. Het verschil is met het
	 * blote oog niet te zien (ΔE ≈ 1), dus gebruik hem alleen waar hij bewust
	 * gevraagd is en val verder terug op --kdm-black. */
	--kdm-charcoal: #292824;
	--kdm-stone:    #969289;  /* koel grijs, lichter dan --kdm-taupe */
	--kdm-gold:     #9B8264;  /* warm goudbruin, uit het tegelontwerp */

	/* ── Rollen ───────────────────────────────────────────────────────────
	 * Wat de kleuren doen. Gebruik deze in de andere bestanden, niet de
	 * merkkleuren hierboven — dan blijft leesbaar wáárom een kleur ergens
	 * staat. */
	--kdm-cream:      var(--kdm-shell);  /* paginagrond */
	--kdm-cream-deep: var(--kdm-blush);  /* afwisselende secties, drawer */
	--kdm-surface:    #ffffff;           /* headerbalk, kaarten, uitklapmenu */
	--kdm-ink:        var(--kdm-black);  /* body- en displaytekst */
	--kdm-ink-soft:   var(--kdm-taupe);  /* secundaire tekst */
	--kdm-ink-muted:  var(--kdm-stone);  /* lopende tekst in kaarten */
	--kdm-link-soft:  var(--kdm-gold);   /* "Lees meer" in een kaart */
	--kdm-line:       var(--kdm-blush);  /* scheidingslijnen */
	--kdm-taupe-tint: var(--kdm-blush);  /* tabelzebra */
	--kdm-taupe-deep: var(--kdm-taupe);

	/* ── Afspraakknop ─────────────────────────────────────────────────────
	 *
	 * !! Contrast — even naar kijken !!
	 *
	 * #857F73 met witte tekst haalt ongeveer 3,98:1. De WCAG-eis voor gewone
	 * tekst is 4,5:1, dus dat haalt het net niet. Voor grote tekst (vanaf 24px,
	 * of 18,7px vet) geldt 3:1 en zou het wél voldoen, maar de knoptekst staat
	 * nu op 17px.
	 *
	 * Drie manieren om dat op te lossen, kies er één:
	 *   1. --kdm-cta-bg iets donkerder maken. #6F6A60 haalt 4,9:1 en ligt
	 *      dicht bij de merkkleur.
	 *   2. Donkere tekst op de knop: --kdm-on-cta op var(--kdm-black) zetten.
	 *      Dat haalt ruim 8:1 en houdt het taupe precies zoals ontworpen.
	 *   3. De knoptekst vergroten naar 24px, of 18,7px vet.
	 *
	 * Nu staat de merkkleur er onaangepast in, zoals aangeleverd. */
	--kdm-cta-bg:       var(--kdm-taupe);
	--kdm-cta-bg-hover: #6F6A60;
	--kdm-on-cta:       #ffffff;

	--kdm-accent:       var(--kdm-cta-bg);
	--kdm-on-accent:    var(--kdm-on-cta);

	/* Tekst op een lichte knop (de hero-knop in --kdm-shell). Haalt ruim 14:1
	 * op die ondergrond. */
	--kdm-on-light-cta: var(--kdm-charcoal);

	/* Legacy-aliassen — het oude palet op één plek omgezet.
	 * LET OP: deze werken alleen in CSS die wij schrijven. De hexwaarden die
	 * in post_content zijn ingebakken (#f1c0ae op 23 paginas, #2f2736 op 16,
	 * #564168 op 135 posts) negeren deze tokens volledig; die compileert Divi
	 * als .et_pb_text_3{color:#f1c0ae}. Zie fase 8 in het plan. */
	--kdm-legacy-plum:   var(--kdm-ink);        /* was #2f2736 */
	--kdm-legacy-peach:  var(--kdm-taupe);      /* was #f1c0ae */
	--kdm-legacy-purple: var(--kdm-taupe-deep); /* was #905cb2 / #564168 */

	/* ── Typografie ───────────────────────────────────────────────────── */
	--kdm-font-display: "CormorantGaramond", Georgia, "Times New Roman", serif;
	--kdm-font-body:    var(--kdm-font-display);
	--kdm-font-ui:      "Poppins", "Helvetica Neue", Arial, sans-serif; /* knoppen e.d.; alleen weight 600 is geladen */

	--kdm-size-xs:       1rem;  /* 13px — BLARICUM-ondertitel */
	--kdm-size-sm:       1.0625rem;
	--kdm-size-base:     1.125rem;   /* 18px — basisgrootte van álle lopende tekst; staat sinds kort ook op de body zelf (zie `html body` in 10-base.css) */
	--kdm-size-nav:      1.25rem;
	--kdm-size-lg:       1.5rem;

	/* De koppenschaal. LET OP: deze zes voeden de basislaag in 10-base.css en
	 * gelden dus op de héle site, niet alleen in de nieuwe secties. Eentje
	 * veranderen verandert alle 85 paginas. */
	--kdm-size-h6:       0.9375rem;  /* 15px */
	--kdm-size-h5:       1.0625rem;  /* 17px */
	--kdm-size-h4:       1.25rem;    /* 20px */
	--kdm-size-h3:       2rem;       /* 32px */
	--kdm-size-h2:       clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);   /* 28 → 40px */
	--kdm-size-h1:       clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);   /* 36 → 56px */

	/* De tegelkop staat op 28px uit het ontwerp. Dat is geen trede van de schaal
	 * hierboven (h3 is 24px), dus een eigen token in plaats van de schaal
	 * oprekken — anders wordt élke h3 op de site 28px. */
	--kdm-size-tile:     1.75rem;    /* 28px */

	--kdm-size-wordmark: clamp(1.75rem, 1.1rem + 2vw, 2.75rem);

	--kdm-lh-tight: 1.15;
	--kdm-lh-body:  1.65;   /* was 1.8 — schreef op 17px wil minder */
	--kdm-ls-caps:  0.22em; /* BLARICUM, kleinkapitalen */
	--kdm-ls-nav:   0.06em;
	--kdm-ls-tight: -0.01em;

	/* ── Ruimte (basis 4px, ramp ×1.5) ────────────────────────────────── */
	--kdm-s-1: 0.25rem;
	--kdm-s-2: 0.5rem;
	--kdm-s-3: 0.75rem;
	--kdm-s-4: 1rem;
	--kdm-s-5: 1.5rem;
	--kdm-s-6: 2rem;
	--kdm-s-7: 3rem;
	--kdm-s-8: 4rem;
	--kdm-s-9: 6rem;

	/* ── Structuur ────────────────────────────────────────────────────── */
	--kdm-container:     1140px;  /* MOET gelijk blijven aan Divi content_width */
	--kdm-container-pad: var(--kdm-s-5);
	/* Bredere variant voor secties die tot dichter bij de rand mogen lopen,
	 * zoals de hero. Bewust géén Divi content_width: dat is één globale
	 * instelling en zou alle 85 paginas versmallen of verbreden. */
	--kdm-container-wide: 1340px;
	/* Voor de secties met een eigen raster (split content, tegels, CTA-balk).
	 * Die lijnen onderling uit, dus één token in plaats van drie keer 1200. */
	--kdm-container-grid: 1200px;
	/* De headerbalk mag breder dan de inhoud: zo staan beeldmerk en knop verder
	 * naar de randen, terwijl het woordmerk in het midden blijft. Alleen de
	 * balk — de navigatie eronder houdt --kdm-container aan, zodat die wél
	 * uitlijnt met de tekst op de pagina. */
	--kdm-header-bar:    1440px;
	--kdm-monogram:      90px;
	--kdm-monogram-sm:   56px;    /* in .is-scrolled */
	--kdm-header-h:      9rem;    /* fallback; JS schrijft de echte hoogte */

	/* Ruimte die vrijgehouden wordt voor de zwevende webshopknop, zodat die de
	 * juridische links onderin niet afdekt. Breed scherm: de knop staat
	 * rechtsonder, dus opzij. Smal scherm: hij ligt over de volle breedte
	 * onderaan, dus eronder. */
	--kdm-webshop-clear-x: 12rem;
	--kdm-webshop-clear-y: 5.5rem;

	--kdm-radius-pill: 999px;
	--kdm-radius-sm:   2px;
	--kdm-radius-md:   4px;

	--kdm-ring:        2px solid var(--kdm-ink);
	--kdm-ring-offset: 2px;

	--kdm-shadow-sticky: 0 1px 0 var(--kdm-line);
	--kdm-shadow-drawer: 0 0 40px rgb(28 26 23 / 0.18);

	--kdm-t-fast: 150ms;
	--kdm-t-base: 250ms;
	--kdm-ease:   cubic-bezier(0.2, 0.6, 0.3, 1);

	--kdm-z-header:  100;
	--kdm-z-drawer:  200;
	--kdm-z-webshop: 90;  /* was 9999 in de oude CSS */
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--kdm-t-fast: 0ms;
		--kdm-t-base: 0ms;
	}
}