/*
 * Design tokens. Names and values follow the design system page, so anything
 * quoted in the design file can be found here verbatim.
 */

:root {
	/* --- Colors: primary and accent --- */
	--color-primary: #471CA8;        /* Purple Deep */
	--color-primary-light: #884AB2;  /* Violet Fusion */
	--color-primary-mid: #605BCE;
	--color-primary-bright: #756FF4; /* Lavender Light */
	--color-secondary: #FE6F1D;      /* GeoX Orange */
	--color-accent-teal: #85C7D6;

	/* Interaction shades. Not in the design file - from the handoff's CSS guide. */
	--color-primary-hover: #3B1690;
	--color-primary-active: #2E1170;

	/* --- Colors: backgrounds --- */
	--color-bg-default: #FFFFFF;
	--color-bg-warm: #F8F8F6;
	--color-bg-blush: #FCF7F8;
	--color-surface-muted: #ECECEA;
	--color-surface-gray: #EDEDED;
	--color-surface-light: #F3F4F6;
	--color-surface-dark: #101010;
	--color-surface-dark-hover: #2A2A2A;

	/* --- Colors: text --- */
	--color-text-primary: #050E15;
	--color-text-heading: #191814;
	--color-text-dark: #00133B;
	--color-text-secondary: #101828;
	--color-text-muted: #2B303A;
	--color-text-inverse: #FFFFFF;

	/* --- Colors: borders --- */
	--color-border-default: #E5E7EB;
	--color-border-light: #EEEEEC;
	--color-border-dark: #000000;

	/* --- Colors: status --- */
	--color-success: #6CD829;
	--color-success-dark: #3DA100;
	--color-error: #DC2626;

	/* --- Typography --- */
	--font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-accent: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--text-display: 56px;
	--text-h1: 48px;
	--text-h2: 40px;
	--text-h3: 36px;
	--text-h4: 32px;
	--text-h5: 26px;
	--text-h6: 24px;
	--text-subtitle: 20px;
	--text-body-lg: 18px;
	--text-body: 16px;
	--text-body-sm: 14px;
	--text-caption: 12px;
	--text-stat: 30px;
	--text-stat-lg: 40px;

	/* Line heights and letter spacing, per type style. */
	--lh-display: 130%;
	--lh-h1: 130%;
	--lh-h2: 125%;
	--lh-h3: 110%;
	--lh-h4: 28px;
	--lh-h5: 130%;
	--lh-h6: 120%;
	--lh-subtitle: 28px;
	--lh-body: 150%;
	--lh-body-sm: 130%;
	--lh-caption: 140%;
	--lh-quote: 120%;
	--lh-tight: 130%;

	--ls-h1: -0.03em;
	--ls-h2: -0.01em;
	--ls-h5: -0.01em;
	--ls-h6: -0.03em;
	--ls-caption: 0.01em;

	/* Mobile headline sizes, so sections need no per-breakpoint overrides. */
	--text-display-fluid: clamp(32px, 4.5vw, 56px);
	--text-h1-fluid: clamp(26px, 3.6vw, 48px);
	--text-h3-fluid: clamp(24px, 2.8vw, 36px);

	/* --- Spacing --- */
	--space-4: 4px;
	--space-8: 8px;
	--space-10: 10px;
	--space-12: 12px;
	--space-14: 14px;
	--space-16: 16px;
	--space-20: 20px;
	--space-24: 24px;
	--space-32: 32px;
	--space-42: 42px;
	--space-48: 48px;
	--space-64: 64px;
	--space-80: 80px;
	--space-112: 112px;
	--space-120: 120px;

	/* Section rhythm: 112-120px desktop, 48-64px mobile. */
	--section-y: var(--space-64);

	/* --- Radius --- */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 20px;
	--radius-2xl: 32px;
	--radius-full: 9999px;

	/* --- Shadows --- */
	--shadow-card: 0 15px 26px rgb(0 0 0 / 15%);
	--shadow-subtle: 1px 0 10px rgb(0 0 0 / 37%);

	/* --- Layout --- */
	/* The design's 1440 frame carries an 80px margin either side over a 1280px
	   working width. Boxes are border-box, so the outer bound is the full 1440. */
	--container-max: 1440px;
	--margin-desktop: 80px;
	--margin-mobile: 16px;
	--container-pad: var(--margin-mobile);
	--header-height: 96px;

	/* --- Motion --- */
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--duration-enter: 600ms;
	--duration-hover: 200ms;
	--duration-state: 150ms;
	--duration-stagger: 120ms;
	--translate-distance: 30px;
	--transition: var(--duration-hover) ease-in-out;
}

@media (min-width: 768px) {
	:root {
		--container-pad: 40px;
		--section-y: var(--space-80);
	}
}

@media (min-width: 1200px) {
	:root {
		--container-pad: var(--margin-desktop);
		--section-y: var(--space-120);
	}
}

/* Mobile motion budget: shorter travel, quicker stagger. */
@media (max-width: 767px) {
	:root {
		--translate-distance: 15px;
		--duration-enter: 400ms;
		--duration-stagger: 80ms;
	}
}