:root {
	/* —— Typography —— */
	--font-primary: 'Inter', sans-serif;
	--font-size-xs: 13px;
	--font-size-sm: 14px;
	--font-size-base: 16px;
	--font-size-md: 20px;
	--font-size-lg: 28px;
	--font-size-xl: 36px;
	--font-size-hero: 42px;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	--line-height-tight: 0.9;
	--line-height-snug: 1.25;
	--line-height-normal: 1.5;

	/* —— Spacing (4px grid) —— */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-section-y: var(--space-16);
	--space-gutter-x: var(--space-6);
	--space-gutter-x-md: var(--space-8);
	--space-header-offset-y: var(--space-5);
	--space-header-inset-x: var(--space-gutter-x);
	--space-header-inset-x-md: var(--space-gutter-x-md);
	--space-container-y-compact: var(--space-8);

	/* —— Radii —— */
	--radius-pill: 9999px;
	--radius-full: 50%;

	/* —— Brand palette (backgrounds) —— */
	--bg-white: #ffffff;
	--bg-red: #f16063;
	--bg-green: #4caf69;
	--bg-orange: #f5a623;
	--bg-teal: #1aa6a6;
	--bg-lavender-light: #f1eefb;
	--bg-gray-light: #ededed;
	--bg-blue: #2196f3;
	--bg-blue-light: #dcebfc;
	--bg-green-light: #e3f5e8;
	--bg-red-light: #fde8e8;
	--bg-blue-mid: #4ba9ff;
	--bg-gray: #e8e8e8;
	--bg-dark: #343434;
	--bg-purple: #8b5fbf;

	/* Surface tints (cards, panels) */
	--bg-surface-neutral: #f2f2f8;
	--bg-surface-blue: #eef3ff;
	--bg-surface-blue-soft: #edf2ff;
	--bg-surface-blue-muted: #e4ebfa;
	--bg-blue-sky: #85baea;

	/* —— Brand palette (text) —— */
	--text-blue: #2196f3;
	--text-white: #ffffff;
	--text-dark: #1a1a1a;
	--text-muted: #8c8c90;
	--text-red: #f16063;
	--text-purple: #8b5fbf;
	--text-orange: #f5a623;
	--text-teal: #1aa6a6;
	--text-green: #4caf69;

	/* —— Interactive / borders —— */
	--color-blue-hover: #1c86dd;
	--color-dark-hover: #454545;
	--color-purple-hover: #7a4fac;
	--color-red-hover: #d94a4d;
	--color-border-muted: #9aa5b1;
	--border-width-ui: 1.5px;

	/* —— Alpha —— */
	--alpha-white-15: rgba(255, 255, 255, 0.15);
	--alpha-white-16: rgba(255, 255, 255, 0.16);
	--alpha-white-32: rgba(255, 255, 255, 0.32);
	--alpha-white-50: rgba(255, 255, 255, 0.5);
	--alpha-white-70: rgba(255, 255, 255, 0.7);
	--alpha-white-85: rgba(255, 255, 255, 0.85);
	--alpha-black-05: rgb(0 0 0 / 0.05);
	--alpha-black-10: rgba(0, 0, 0, 0.1);
	--alpha-black-12: rgba(0, 0, 0, 0.12);
	--alpha-black-16: rgba(0, 0, 0, 0.16);
	--alpha-black-25: rgba(0, 0, 0, 0.25);
	--alpha-text-dark-10: rgba(26, 26, 26, 0.1);
	--alpha-text-dark-12: rgba(26, 26, 26, 0.12);

	/* —— Shadows —— */
	--shadow-card-sm: 0 8px 24px var(--alpha-black-12);
	--shadow-card-md: 0 12px 24px var(--alpha-text-dark-10);
	--shadow-card-lg: 0 12px 32px var(--alpha-black-16);
	--shadow-card-xl: 0 16px 32px var(--alpha-text-dark-12);
	--shadow-dropdown: 0 10px 15px var(--alpha-black-10);
	--shadow-icon: 0 4px 10px var(--alpha-black-25);

	/* —— Gradients —— */
	--gradient-blue-vertical: linear-gradient(180deg, #4caaff 0%, #cde7ff 100%);
	--gradient-red-vertical: linear-gradient(180deg, #f16063 0%, #ffc2c4 100%);
	--gradient-purple-vertical: linear-gradient(180deg, #8b5fbf 0%, #d9c9f5 100%);
	--gradient-green-vertical: linear-gradient(180deg, #4caf69 0%, #c8ecd4 100%);
	--gradient-diagonal-blue: linear-gradient(135deg, var(--bg-gray-light) 0%, var(--bg-blue-light) 100%);
	--gradient-brand: linear-gradient(
		135deg,
		var(--bg-blue-mid) 0%,
		var(--bg-blue) 55%,
		var(--color-blue-hover) 100%
	);
	--gradient-radial-blue: radial-gradient(
		circle at 35% 30%,
		#6fbfff 0%,
		var(--bg-blue) 70%
	);

	/* —— Layout —— */
	--layout-lead-max: 560px;
}