/*
 * BeBusy design tokens
 * ------------------------------------------------------------------
 * Merkkleuren (navy + mint) zijn exact gemeten uit het officiële BeBusy-logo.
 * Hover-, oppervlak- en randkleuren zijn daarvan afgeleid.
 * Fonts zijn nog TIJDELIJK (systeemfont) tot er officiële fonts zijn.
 * Alle componenten lezen uitsluitend deze variabelen.
 */

:root {
	/* Kleur — uit officieel logo */
	--brand-primary: #061e3f;          /* Deep Navy (logo) */
	--brand-primary-hover: #0d2a52;
	--brand-accent: #45d8aa;           /* Mint (logo) */
	--brand-accent-hover: #34c899;
	--brand-background: #ffffff;
	--brand-surface: #f5f7fa;
	--brand-surface-hover: #edf1f6;
	--brand-text: #061e3f;
	--brand-muted: #5b6b80;
	--brand-border: #e3e8ef;
	--brand-on-primary: #ffffff;
	--brand-on-primary-muted: rgba(255, 255, 255, 0.68);
	--brand-focus: #061e3f;           /* navy op licht; footer gebruikt accent */

	/* Typografie — TIJDELIJK (systeemfont, geen extra download) */
	--font-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Vorm */
	--radius-button: 999px;
	--radius-card: 14px;

	/* Layout */
	--bb-container: 1200px;
	--bb-gutter: 24px;
	--bb-header-h: 76px;
	--bb-logo-h: 44px;

	/* Beweging & diepte */
	--bb-transition: 160ms ease;
	--bb-shadow-dropdown: 0 18px 48px -12px rgba(6, 30, 63, 0.18), 0 2px 6px rgba(6, 30, 63, 0.06);
}

@media (max-width: 639.98px) {
	:root {
		--bb-gutter: 16px;
		--bb-header-h: 64px;
		--bb-logo-h: 36px;
	}
}