/**
 * 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.
 *
 * Waarom dit beter is dan Kadence's eigen instellingen:
 * - Eén bestand, in git — geen instellingen die "ergens in de database
 *   staan" en die je moet gaan opzoeken/onthouden
 * - Direct te vergelijken met het ontwerp (exacte hex-waarden,
 *   px-waarden) — geen "ongeveer goed" via een kleurenkiezer
 * - Makkelijker te hergebruiken als basis voor een volgende site: kopieer
 *   dit bestand, pas de waarden aan, klaar
 */

:root {

	/* ============================================================
	   KLEUREN
	   ============================================================ */
	/* ============================================================
	   KLEUREN — exacte waarden uit Figma
	   ============================================================
	   BELANGRIJKE CORRECTIE t.o.v. een eerdere aanname: "Primary" is in
	   dit ontwerp geen felgekleurde merkkleur, maar juist de NEUTRALE
	   tekst-/achtergrondkleur. Alle daadwerkelijke, gekleurde
	   merkkleuren zitten in de Secondary-set hieronder. */
	--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;

	/* Secundaire kleuren — de daadwerkelijke merkkleuren, exact uit Figma */
	--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;

	/* LET OP: nog te bepalen welke van de kleuren hierboven specifiek
	   voor primaire knoppen/CTA's gebruikt wordt — nog niet gezien in
	   het ontwerp welke van de zeven daarvoor bedoeld is. Tijdelijke
	   placeholder hieronder, vervang zodra bekend. */
	--carmel-color-btn-accent: var(--carmel-color-secondary-lichtblauw);

	/* Lijnen/randen — bv. de dunne lijn onder de navigatiebalk */
	--carmel-color-border: rgba(0, 0, 0, 0.25);


	/* ============================================================
	   KNOPPEN
	   ============================================================ */
	--carmel-color-btn-primary-bg: var(--carmel-color-btn-accent);
	--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; /* 0 voor vierkant, bv. 8px voor afgerond — check het ontwerp */
	--carmel-btn-font-weight: var(--carmel-font-weight-medium);


	/* ============================================================
	   TYPOGRAFIE — exacte waarden uit Figma
	   ============================================================
	   Lettergewicht overal "Medium" (zie --carmel-font-weight-medium).
	   Letter-spacing overal 0 in dit ontwerp (geen verkrapping zoals bij
	   een eerder project — bewust een andere, eigen keuze voor déze
	   site). Line-height is overal exact gelijk aan de font-size zelf
	   (100%, geen extra regelafstand). */
	--carmel-font-heading: 'Athletics', sans-serif;
	--carmel-font-body: 'Inter', sans-serif;

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

	--carmel-letter-spacing-tight: 0;

	/* Koppen (Athletics) */
	--carmel-font-size-display1: 160px;
	--carmel-line-height-display1: 160px;

	--carmel-font-size-display2: 120px;
	--carmel-line-height-display2: 120px;

	--carmel-font-size-h1: 56px;
	--carmel-line-height-h1: 56px;

	--carmel-font-size-h2: 48px;
	--carmel-line-height-h2: 48px;

	--carmel-font-size-h3: 40px;
	--carmel-line-height-h3: 40px;

	--carmel-font-size-h4: 32px;
	--carmel-line-height-h4: 32px;

	--carmel-font-size-h5: 28px;
	--carmel-line-height-h5: 28px;

	--carmel-font-size-h6: 24px;
	--carmel-line-height-h6: 24px;

	/* Body (Inter) */
	--carmel-font-size-body-large: 16px;
	--carmel-font-size-body-medium: 12px;
	--carmel-font-size-caption: 12px;
	--carmel-font-size-eyebrow: 12px;

	/* UI: knoppen/labels (Athletics) */
	--carmel-font-size-button-large: 16px;
	--carmel-font-size-button-small: 12px;
	--carmel-font-size-label-large: 16px;
	--carmel-font-size-label-small: 12px;


	/* ============================================================
	   RUIMTE / SPACING
	   ============================================================
	   Twee soorten: een kleine, generieke schaal (xs t/m xl) voor
	   algemeen gebruik, plus een paar met een SPECIFIEKE, benoemde rol
	   (section/component) — die laatste zijn de plekken waar de
	   designer-feedback vaak specifiek exacte pixel-waarden noemde. */
	--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); /* ruimte tussen secties */
	--carmel-space-component: var(--carmel-space-md); /* ruimte binnen een component, bv. tussen tabel-rijen */


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


	/* ============================================================
	   PLUGIN-SPECIFIEKE VARIABELEN (carmel-core)
	   ============================================================
	   Deze variabelen BESTAAN AL in de plugin zelf (met een fallback-
	   waarde als je ze hier niet zet) — hier stellen we de daadwerkelijke
	   waarde in voor DEZE site. Zie carmel-core's README.md voor de
	   volledige lijst van plugin-variabelen. */
	--carmel-search-button-bg: var(--carmel-color-btn-accent);
	--carmel-drawer-logo-height: 32px;

}