/**
 * Design tokens — Gideon Alliance Design System.
 * Display: Playfair Display. Body/UI: Roboto. Logos are image assets, not a webfont.
 */

:root {
	--color-brand-primary: #7851A9;
	--color-brand-accent: #95ACFD;
	--color-text-primary: #1E1B2E;
	--color-white: #ffffff;
	--color-bg-light: #f7f7f7;
	--color-hero-1: #070118;
	--color-hero-2: #2a0e3b;
	--color-hero-3: #28124b;
	--color-hero-4: #5737b5;
	--color-hero-5: #71266a;
	--color-ambient-blue: #cedaed;
	--color-ambient-lavender: #c5b9e2;
	--color-ambient-rose: #f0d2e1;
	--color-success: #34c759;
	--color-warning: #f5a623;
	--color-error: #e5484d;
	--color-disabled: #cfcfd6;
	--color-info: #3b82f6;

	--gradient-hero: linear-gradient(
		160deg,
		var(--color-hero-1) 0%,
		var(--color-hero-2) 28%,
		var(--color-hero-3) 52%,
		var(--color-hero-4) 78%,
		var(--color-hero-5) 100%
	);
	--gradient-button-primary: linear-gradient(
		90deg,
		#5f3a8f 0%,
		#7851A9 42%,
		#6d6ec8 72%,
		#95ACFD 100%
	);
	--gradient-button-on-dark: linear-gradient(
		90deg,
		#fbfaff 0%,
		#f3eefc 48%,
		#e8eefc 100%
	);
	--gradient-button-hero: var(--gradient-button-on-dark);
	--gradient-page-ambient: radial-gradient(ellipse 90% 48% at 100% 8%, rgba(197, 185, 226, 0.42) 0%, transparent 60%),
		radial-gradient(ellipse 85% 40% at 0% 36%, rgba(206, 218, 237, 0.46) 0%, transparent 58%),
		radial-gradient(ellipse 75% 36% at 88% 62%, rgba(240, 210, 225, 0.32) 0%, transparent 54%),
		radial-gradient(ellipse 60% 32% at 10% 86%, rgba(197, 185, 226, 0.26) 0%, transparent 52%),
		#faf8fc;
	--gradient-outline: linear-gradient(
		135deg,
		rgba(197, 185, 226, 0.9) 0%,
		rgba(149, 172, 253, 0.65) 50%,
		rgba(120, 81, 169, 0.55) 100%
	);

	--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--font-body: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

	--text-h1: 2.25rem; /* 36px */
	--text-h2: 2rem; /* 32px */
	--text-h3: 1.5rem; /* 24px */
	--text-h4: 1.25rem;
	--text-body-lg: 1rem; /* 16px lead */
	--text-body: 0.9375rem; /* 15px */
	--text-small: 0.875rem;
	--text-eyebrow: 0.6875rem; /* 11px */
	--text-nav: 0.875rem; /* 14px */
	--text-button: 0.8125rem; /* 13px */
	--font-weight-display: 500;
	--font-weight-body: 400;
	--font-weight-ui: 500;
	--font-weight-eyebrow: 700;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 40px;
	--space-8: 48px;
	--space-9: 64px;
	--space-10: 80px;
	--space-11: 96px;
	--space-12: 120px;
	--space-13: 160px;

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 20px;
	--radius-2xl: 24px;
	--radius-3xl: 32px;
	--radius-button: 16px;

	--shadow-button: 0 10px 28px rgba(120, 81, 169, 0.12);

	--container-max: 1280px;
	--gutter: 24px;
	--grid-gap: 16px;
	--grid-columns: 4;

	--focus-ring: 2px solid var(--color-brand-primary);
	--touch-min: 44px;
	--header-bar-height: 80px;
	--header-inset-top: 14px;

	--bp-tablet: 768px;
	--bp-desktop: 1024px;
	--bp-large: 1440px;
}

@media (min-width: 768px) {
	:root {
		--gutter: 40px;
		--grid-gap: 24px;
		--grid-columns: 8;
		--text-body: 1rem; /* 16px */
		--text-body-lg: 1.125rem; /* 18px */
		--text-eyebrow: 0.75rem; /* 12px */
		--text-button: 0.875rem; /* 14px */
	}
}

@media (min-width: 1024px) {
	:root {
		--gutter: 64px;
		--grid-columns: 12;
		--text-h1: 3rem; /* 48px */
		--text-h2: 2.5rem; /* 40px */
		--text-h3: 1.75rem; /* 28px */
		--text-body: 1rem;
		--text-body-lg: 1.125rem;
		--text-eyebrow: 0.8125rem; /* 13px */
		--text-button: 0.875rem;
	}
}