/**
 * BBMRI-ERIC design tokens. Brand colours come from the Global Styles palette
 * (accent-3 navy, accent-5 green, accent-2/accent-4 orange); everything in
 * ui.css reads from these variables so the look can be tuned in one place.
 */
:root {
	/* Brand */
	--bb-navy: #003674;
	--bb-navy-700: #002a5a;
	--bb-navy-900: #001a3a;
	--bb-green: #abc78a;
	--bb-green-600: #83986c;
	--bb-green-800: #4a6331; /* AA on white, for green text */
	--bb-orange: #e95713;
	--bb-orange-300: #fab27d;

	/* Neutrals */
	--bb-ink: #1f2933;
	--bb-text: #3c3c3d;
	--bb-muted: #5f6b7a;
	--bb-line: #e3e8ef;
	--bb-surface: #ffffff;
	--bb-surface-alt: #f4f7fb;
	--bb-navy-tint: #eaf0f8;
	--bb-surface-alt-gray: #f1f1f1;


	/* Typography */
	--bb-font-display: var(--wp--preset--font-family--corpidoffice, "CorpidOffice"), system-ui, sans-serif;
	--bb-font-text: var(--wp--preset--font-family--manrope, "Manrope"), system-ui, -apple-system, "Segoe UI", sans-serif;
	--bb-text-sm: 0.9375rem;
	--bb-text-base: 1.0625rem;
	--bb-leading: 1.65;
	--bb-h1: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);
	--bb-h2: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
	--bb-h3: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem);
	--bb-stat: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);

	/* Shape and depth */
	--bb-radius-sm: 8px;
	--bb-radius: 16px;
	--bb-radius-lg: 24px;
	--bb-radius-pill: 999px;
	--bb-shadow-sm: 0 1px 2px rgba(0, 26, 58, 0.06), 0 1px 3px rgba(0, 26, 58, 0.08);
	--bb-shadow: 0 4px 12px rgba(0, 26, 58, 0.08), 0 2px 4px rgba(0, 26, 58, 0.04);
	--bb-shadow-lg: 0 16px 36px rgba(0, 26, 58, 0.14), 0 4px 10px rgba(0, 26, 58, 0.06);

	/* Spacing */
	--bb-space-1: 0.5rem;
	--bb-space-2: 1rem;
	--bb-space-3: 1.5rem;
	--bb-space-4: 2rem;
	--bb-space-5: 3rem;
	--bb-space-6: clamp(3rem, 2rem + 4vw, 5rem);

	/* Motion */
	--bb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--bb-dur: 200ms;
}