/**
 * 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.
 *
 * Bron: Figma "BFF™ — Bonhoeffer College", pagina FOUNDATION > Brand
 * Guide (Colors, Typography) en het Variables-paneel (Collections:
 * Color, Typography, Border-radius) — geraadpleegd 2026-09-17.
 */

:root {

	/* ============================================================
	   KLEUREN — Figma Variables, collectie "Color"
	   ============================================================ */
	--bce-color-text: #020A0A;   /* Primary/BC Zwart */
	--bce-color-bg: #F9F7F7;     /* Primary/BC Grijs — bewust geen puur wit */

	--bce-color-text-light: #F5F5F5;   /* Neutral/100 */
	--bce-color-bg-alt: #F5F5F5;       /* Neutral/100 */

	--bce-color-secondary-groen: #3FB498;  /* Secondary/BC Groen */
	--bce-color-secondary-blauw: #312783;  /* Secondary/BC Blauw — het merk-blauw uit logo/header/knoppen */
	--bce-color-secondary-geel: #FDC300;   /* Secondary/BC Geel */
	--bce-color-secondary-roze: #F29FC5;   /* Secondary/BC Roze */
	--bce-color-secondary-rood: #E74318;   /* Secondary/BC Rood */

	/* UX-statuskleuren (Brand Guide > Colors > UX) */
	--bce-color-success: #3FB498;  /* = Secondary/BC Groen */
	--bce-color-error: #E74318;    /* = Secondary/BC Rood */

	--bce-color-btn-accent: var(--bce-color-secondary-blauw);

	--bce-color-white: #FFFFFF;    /* Neutral/0 */

	--bce-color-border: rgba(2, 10, 10, 0.25);        /* Primary/BC Zwart 25 */
	--bce-color-border-light: rgba(2, 10, 10, 0.10);  /* geen los Figma-token voor 10% — zelfde zwart als border, lagere alpha, zelfde patroon als de bestaande 25%-variant */
	--bce-color-border-on-dark: rgba(249, 247, 247, 0.25); /* Primary/BC Grijs 25 — voor borders op een donkere achtergrond, bv. footer */
	--bce-color-border-accent: rgba(49, 39, 131, 0.25);    /* Secondary/BC Blauw 25 */


	/* ============================================================
	   KNOPPEN
	   ============================================================
	   LET OP: dit merk gebruikt ronde ("Pill") knoppen, niet de
	   vierkante knoppen van het vorige thema — border-radius komt uit
	   Figma-collectie "Border-radius" (token 3xl = 32px), gemeten op
	   het "Button Pill" component in UI Components.
	 */
	--bce-color-btn-primary-bg: var(--bce-color-btn-accent);
	--bce-color-btn-primary-text: var(--bce-color-white);

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

	--bce-btn-padding: 24px;
	--bce-btn-radius: 16px;


	/* ============================================================
	   TYPOGRAFIE — Figma Variables, collectie "Typography"
	   ============================================================
	   Eén lettertype voor ALLES (koppen én lichaamstekst): Athletics,
	   zelf-gehost (zie css/fonts.css) — dit is dus geen kopie-fout,
	   Figma's "Font-family" groep geeft letterlijk "Athletics" voor
	   Heading, Display, Body, Eyebrow, Caption én Label.
	 */
	--bce-font-heading: 'Athletics', sans-serif;
	--bce-font-body: 'Athletics', sans-serif;

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

	/* Koppen — ALLE waarden (incl. letter-spacing/line-height/weight)
	   rechtstreeks afgelezen uit de tekst-stijlen op het TYPOGRAPHY-canvas
	   in Brand Guide (Figma toont letter-spacing daar als % van de
	   font-size — hieronder omgerekend naar px per niveau). */
	--bce-font-size-display1: 88px;
	--bce-font-size-display1-mobile: 48px;
	--bce-line-height-display1: 90%;
	--bce-letter-spacing-display1: -2.64px;         /* -3% van 88px */
	--bce-letter-spacing-display1-mobile: -1.44px;  /* -3% van 48px */
	--bce-font-weight-display1: 500;

	--bce-font-size-display2: 72px;
	--bce-font-size-display2-mobile: 38px;
	--bce-line-height-display2: 90%;
	--bce-letter-spacing-display2: -2.16px;         /* -3% van 72px */
	--bce-letter-spacing-display2-mobile: -1.14px;  /* -3% van 38px */
	--bce-font-weight-display2: 500;

	--bce-font-size-h1: 64px;
	--bce-font-size-h1-mobile: 40px;
	--bce-line-height-h1: 90%;
	--bce-letter-spacing-h1: -1.28px;        /* -2% van 64px */
	--bce-letter-spacing-h1-mobile: -0.8px;  /* -2% van 40px */
	--bce-font-weight-h1: 500;

	--bce-font-size-h2: 48px;
	--bce-font-size-h2-mobile: 32px;
	--bce-line-height-h2: 100%;
	--bce-letter-spacing-h2: -0.96px;         /* -2% van 48px */
	--bce-letter-spacing-h2-mobile: -0.64px;  /* -2% van 32px */
	--bce-font-weight-h2: 500;

	--bce-font-size-h3: 32px;
	--bce-font-size-h3-mobile: 24px;
	--bce-line-height-h3: 120%;
	--bce-letter-spacing-h3: -0.64px;         /* -2% van 32px */
	--bce-letter-spacing-h3-mobile: -0.48px;  /* -2% van 24px */
	--bce-font-weight-h3: 500;

	--bce-font-size-h4: 28px;
	--bce-font-size-h4-mobile: 22px;
	--bce-line-height-h4: 120%;
	--bce-letter-spacing-h4: normal;
	--bce-font-weight-h4: 500;

	--bce-font-size-h5: 24px;
	--bce-font-size-h5-mobile: 20px;
	--bce-line-height-h5: 120%;
	--bce-letter-spacing-h5: normal;
	--bce-font-weight-h5: 500;

	--bce-font-size-h6: 18px;
	--bce-font-size-h6-mobile: 16px;
	--bce-line-height-h6: 120%;
	--bce-letter-spacing-h6: normal;
	--bce-font-weight-h6: 700;

	/* Body — allemaal Regular (400), letter-spacing overal normal/0 */
	--bce-font-size-body-xlarge: 32px;
	--bce-font-size-body-xlarge-mobile: 20px;
	--bce-line-height-body-xlarge: 120%;
	--bce-font-size-body-large: 24px;
	--bce-font-size-body-large-mobile: 18px;
	--bce-letter-spacing-body-large: normal;
	--bce-line-height-body-large: 120%;
	--bce-font-size-body-medium: 20px;
	--bce-font-size-body-medium-mobile: 16px;
	--bce-letter-spacing-body-medium: normal;
	--bce-line-height-body-medium: 120%;
	--bce-font-size-body-small: 16px;
	--bce-font-size-body-small-mobile: 14px;
	--bce-line-height-body-small: 100%;
	--bce-font-size-caption: 14px;
	--bce-line-height-caption: 100%;
	--bce-font-size-eyebrow: 13px;
	--bce-line-height-eyebrow: 100%;

	/* UI: knoppen/labels — Medium (500), 100% line-height, letter-spacing normal */
	--bce-font-size-button-large: 16px;
	--bce-font-size-button-large-mobile: 14px;
	--bce-font-weight-button-large: 500;
	--bce-font-size-button-small: 14px;
	--bce-font-size-label-large: 16px;
	--bce-font-weight-label-large: 500;
	--bce-font-size-label-small: 14px;


	/* ============================================================
	   RUIMTE / SPACING — komt overeen met Figma-collectie "Spacing"
	   ============================================================ */
	--bce-space-xs: 8px;
	--bce-space-sm: 16px;
	--bce-space-md: 24px;
	--bce-space-lg: 40px;
	--bce-space-xl: 80px;

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


	/* ============================================================
	   AFBEELDINGEN — VASTE HOOGTES
	   ============================================================
	   Niet in Figma-variabelen bevestigd — overgenomen als placeholder,
	   check tegen het ontwerp.
	 */
	--bce-image-height-hero: 540px;
	--bce-image-height-card: 400px;


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

}