/**
 * BBL design tokens.
 *
 * Web / Divi is the source of truth. Flutter primitives are included
 * as extras for palettes and type weights not exposed in Divi.
 *
 * Divi colors: Primary #064370, Secondary #2682C6, Tertiary #A8CDE8,
 * Highlight #F38304, Text Primary #434343, Text Secondary #999999,
 * Background Chalk #F6F6F6, Outline #999999, Link #2EA3F2.
 */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

:root {
	/* Colors — Divi */
	--bbl-color-primary: #064370;
	--bbl-color-secondary: #2682c6;
	--bbl-color-tertiary: #a8cde8;
	--bbl-color-highlight: #f38304;
	--bbl-color-text-primary: #434343;
	--bbl-color-text-secondary: #999999;
	--bbl-color-bg-chalk: #f6f6f6;
	--bbl-color-outline: #999999;
	--bbl-color-link: #2ea3f2;
	--bbl-color-heading: #434343;

	/* Colors — Flutter primitives */
	--bbl-color-crux-100: #faddd0;
	--bbl-color-crux-200: #f4bba1;
	--bbl-color-crux-300: #ef9971;
	--bbl-color-crux-400: #e97742;
	--bbl-color-crux-500: #e45513;
	--bbl-color-crux-600: #9d3a0c;
	--bbl-color-crux: var(--bbl-color-crux-500);

	--bbl-color-momentum-100: #fde6cd;
	--bbl-color-momentum-200: #face9a;
	--bbl-color-momentum-300: #f8b568;
	--bbl-color-momentum-400: #f69c36;
	--bbl-color-momentum-500: #f38304;
	--bbl-color-momentum-600: #bd6500;

	--bbl-color-aero-100: #d4e6f4;
	--bbl-color-aero-200: #a8cde8;
	--bbl-color-aero-300: #7db4dd;
	--bbl-color-aero-400: #519bd1;
	--bbl-color-aero-500: #2682c6;
	--bbl-color-aero-600: #1a6196;

	--bbl-color-basalt-100: #cdd9e2;
	--bbl-color-basalt-200: #9bb4c6;
	--bbl-color-basalt-300: #6a8ea9;
	--bbl-color-basalt-400: #38698d;
	--bbl-color-basalt-500: #064370;
	--bbl-color-basalt-600: #011524;

	--bbl-color-chalk-0: #ffffff;
	--bbl-color-chalk-100: #f6f6f6;
	--bbl-color-chalk-200: #f2f2f2;
	--bbl-color-chalk-300: #c1c1c1;
	--bbl-color-chalk-400: #999999;
	--bbl-color-chalk-500: #434343;
	--bbl-color-chalk-600: #000000;

	--bbl-color-dolomit-100: #e8eff3;
	--bbl-color-dolomit-200: #d1dee8;
	--bbl-color-dolomit-300: #bacedc;
	--bbl-color-dolomit-400: #a3bdd1;
	--bbl-color-dolomit-500: #8cadc5;
	--bbl-color-dolomit-600: #54758c;

	--bbl-color-overlay-basalt-100: rgba(1, 21, 36, 0.2);
	--bbl-color-overlay-basalt-200: rgba(1, 21, 36, 0.4);
	--bbl-color-overlay-basalt-300: rgba(1, 21, 36, 0.6);
	--bbl-color-overlay-basalt-400: rgba(1, 21, 36, 0.8);

	--bbl-color-error: #ff2200;
	--bbl-color-success: #19bc0d;
	--bbl-color-on-highlight: #ffffff;
	--bbl-color-on-primary: #ffffff;

	/* Type — Divi clamp tokens, Flutter weights */
	--bbl-font: "Poppins", sans-serif;
	--bbl-weight-regular: 400;
	--bbl-weight-medium: 500;
	--bbl-weight-semibold: 600;
	--bbl-type-hero: clamp(2rem, 5vw, 4rem);
	--bbl-type-section: clamp(2rem, 5vw, 4rem);
	--bbl-type-subhead: clamp(1.1rem, 1.3vw, 2rem);
	--bbl-type-button: clamp(0.9375rem, calc(0.9rem + 0.15vw), 1.0625rem);
	--bbl-type-text: clamp(1rem, calc(0.96rem + 0.2vw), 1.125rem);
	--bbl-type-caption: clamp(0.675rem, calc(0.75rem + 0.15vw), 1rem);
	--bbl-type-h1: clamp(2.5rem, calc(1.9rem + 2.6vw), 4.5rem);
	--bbl-type-body: clamp(1.3rem, 1.3vw, 2rem);
	--bbl-type-body-small: clamp(1rem, 0.75vw, 1.75rem);
	--bbl-lh-subhead: 1.5;

	/* Space / radius — Divi */
	--bbl-space-s: 12px;
	--bbl-space-m: 16px;
	--bbl-space-l: 24px;
	--bbl-space-xl: 32px;
	--bbl-radius-m: 12px;
	--bbl-radius-pill: 9999px;
}
