/**
 * Design-tokens voor deze site — het uitgangspunt is: instellingen komen
 * VANAF HIER, niet uit Kadence's eigen Customizer-instellingen. Eén
 * centrale plek om de complete visuele identiteit van de site aan te
 * passen, in plaats van door tientallen losse Kadence-schermen te
 * moeten klikken.
 *
 * ALLE WAARDEN HIERONDER ZIJN VOORBEELDEN — vervang ze door de
 * daadwerkelijke ontwerp-waarden van deze specifieke site. Zie het
 * ontwerp (Figma) voor de exacte kleuren/maten.
 *
 * BEWUST body/.editor-styles-wrapper i.p.v. :root — zie de uitgebreide
 * toelichting in style.css. WordPress' add_editor_style()-mechanisme
 * (nodig om deze variabelen in Gutenberg's content-iframe te krijgen)
 * behandelt :root niet altijd betrouwbaar. Dit bestand definieert de
 * basis-tokens waar style.css's eigen schakelaars (--h2-color, enz.)
 * weer naar verwijzen — als DIT bestand :root zou blijven gebruiken,
 * zou het probleem via die omweg alsnog blijven bestaan, ook al is
 * style.css zelf al aangepast.
 */

:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) {

	/* ============================================================
	   KLEUREN — exacte waarden uit Figma
	   ============================================================ */
	--carmel-color-text: #020A0A;   /* Primary/CC Zwart */
	--carmel-color-bg: #F9F7F7;     /* Primary/CC Grijs — bewust geen puur wit */

	--carmel-color-text-light: #F5F5F4;
	--carmel-color-bg-alt: #F5F5F4;

	--carmel-color-secondary-groen: #63A600;
	--carmel-color-secondary-lichtblauw: #00B3E1;
	--carmel-color-secondary-donkerblauw: #0077A0;
	--carmel-color-secondary-geel: #FFCC03;
	--carmel-color-secondary-oranje: #FE4C00;
	--carmel-color-secondary-paars: #6B58A8;
	--carmel-color-secondary-roze: #E43095;
	--carmel-color-secondary-donkergroen:rgba(79, 131, 0, 1);

	--carmel-color-btn-accent: var(--carmel-color-secondary-groen);
	--carmel-color-btn-accent-light: #83BB26;

	--carmel-color-border: rgba(0, 0, 0, 0.25);


	/* ============================================================
	   KNOPPEN
	   ============================================================ */
	--carmel-color-btn-primary-bg: var(--carmel-color-secondary-donkergroen);
	--carmel-color-btn-primary-text: var(--carmel-color-text-light);

	--carmel-color-btn-secondary-bg: transparent;
	--carmel-color-btn-secondary-text: var(--carmel-color-btn-accent);
	--carmel-color-btn-secondary-border: var(--carmel-color-btn-accent);

	--carmel-btn-padding: 0.4em 1em;
	--carmel-btn-radius: 0px;


	/* ============================================================
	   TYPOGRAFIE — exacte waarden uit Figma
	   ============================================================
	   Interstate (Adobe Fonts/Typekit) voor koppen, Inter voor
	   lichaamstekst. In tegenstelling tot de vorige versie heeft ELK
	   niveau nu zijn EIGEN letter-spacing én font-weight (niet meer één
	   gedeelde waarde voor alles) — zie style.css voor hoe dat per
	   niveau wordt toegepast.
	 */
	--carmel-font-heading: 'interstate', sans-serif;
	--carmel-font-body: 'Inter', sans-serif;

	--carmel-font-weight-regular: 400;
	--carmel-font-weight-medium: 500;
	--carmel-font-weight-bold: 700;

	/* Koppen (Interstate) */
	--carmel-font-size-display1: 120px;
	--carmel-line-height-display1: 90%;
	--carmel-letter-spacing-display1: -6px;
	--carmel-font-weight-display1: 800;

	--carmel-font-size-display2: 88px;
	--carmel-line-height-display2: 90%;
	--carmel-letter-spacing-display2: -2.64px;
	--carmel-font-weight-display2: 800;

	--carmel-font-size-h1: 72px;
	--carmel-line-height-h1: 90%;
	--carmel-letter-spacing-h1: -1.44px;
	--carmel-font-weight-h1: 800;

	--carmel-font-size-h2: 56px;
	--carmel-line-height-h2: 1;
	--carmel-letter-spacing-h2: -2.24px;
	--carmel-font-weight-h2: 800;

	--carmel-font-size-h3: 32px;
	--carmel-line-height-h3: 1;
	--carmel-letter-spacing-h3: -1.28px;
	--carmel-font-weight-h3: 700;

	--carmel-font-size-h4: 28px;
	--carmel-line-height-h4: 1;
	--carmel-letter-spacing-h4: -1.12px;
	--carmel-font-weight-h4: 700;

	--carmel-font-size-h5: 24px;
	--carmel-line-height-h5: 24px;
	--carmel-letter-spacing-h5: -0.48px;
	--carmel-font-weight-h5: 700;

	--carmel-font-size-h6: 18px;
	--carmel-line-height-h6: 1;
	--carmel-letter-spacing-h6: -0.18px;
	--carmel-font-weight-h6: 700;

	/* Body (Inter) */
	--carmel-font-size-body-xlarge: 32px;
	--carmel-font-size-body-large: 24px;
	--carmel-letter-spacing-body-large: -0.72px;
	--carmel-line-spacing-body-large: 130%;
	--carmel-font-size-body-medium: 20px;
	--carmel-letter-spacing-body-medium: -0.4px;
	--carmel-font-size-caption: 14px;
	--carmel-font-size-eyebrow: 13px; /* was "13" zonder eenheid — px toegevoegd */

	/* UI: knoppen/labels */
	--carmel-font-size-button-large: 16px;
	--carmel-font-weight-button-large: 700;
	--carmel-font-size-button-small: 14px;
	--carmel-font-size-label-large: 14px;
	--carmel-font-weight-label-large: 700;
	--carmel-font-size-label-small: 14px;


	/* ============================================================
	   RUIMTE / SPACING
	   ============================================================ */
	--carmel-space-xs: 8px;
	--carmel-space-sm: 16px;
	--carmel-space-md: 24px;
	--carmel-space-lg: 40px;
	--carmel-space-xl: 80px;

	--carmel-space-section: var(--carmel-space-xl);
	--carmel-space-component: var(--carmel-space-md);


	/* ============================================================
	   AFBEELDINGEN — VASTE HOOGTES
	   ============================================================ */
	--carmel-image-height-hero: 540px;
	--carmel-image-height-card: 400px;


	/* ============================================================
	   PLUGIN-SPECIFIEKE VARIABELEN (carmel-core)
	   ============================================================ */
	--carmel-search-button-bg: var(--carmel-color-btn-accent);
	--carmel-drawer-logo-height: 32px;

}