/*
 * Design tokens. Single source of truth for the site's look.
 * Pages and components use these variables and never hard-code values.
 * Direction: b4-focused, clean and modern, one red accent (see DESIGN.md).
 */
:root {
	/* Color */
	--color-bg: #ffffff;
	--color-surface: #f6f9fd;
	--color-text: #101e36;
	--color-text-muted: #52617a;
	--color-primary: #d52d43;
	--color-primary-contrast: #ffffff;
	--color-border: #e6ebf2;
	--color-success: #14a66b;

	/* Typography */
	--font-body: "Manrope", Arial, sans-serif;
	--font-heading: "Manrope", sans-serif;
	--font-logo: var(--font-heading);
	--text-logo: 2rem;
	--tracking-logo: -1.4px;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.25rem;
	--text-xl: 1.75rem;
	--text-2xl: 2.5rem;
	--text-hero: clamp(2.5rem, 5vw, 3.84rem);
	--weight-heading: 700;
	--line-height: 1.6;

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 3rem;
	--space-6: 5rem;
	--gutter: clamp(24px, 4vw, 64px);

	/* Layout and shape */
	--container: 1376px;
	--radius: 0.5rem;

	/* Motion */
	--ease-out: cubic-bezier(.23, 1, .32, 1);
}