/* ==========================================================================
   Design tokens. Every colour, size, space, radius, shadow and duration used
   by the theme is defined here; components never use raw values.
   See docs/03-design-system.md.
   ========================================================================== */

:root {
	/* Colour: one accent, quiet neutrals. */
	--c-brand: #5b449c;
	--c-brand-strong: #4a3585;
	--c-brand-deep: #2e2152;
	--c-brand-tint: #eeeaf6;
	--c-brand-line: #cfc5e6;
	--c-brand-on-dark: #a794e6;

	--c-ink: #111111;
	--c-ink-2: #1a1a1a;
	--c-text: #404040;
	--c-muted: #6b6b6b;
	--c-line: #e8e6ec;
	--c-line-strong: #d6d2de;
	--c-surface: #f7f6fa;
	--c-white: #ffffff;

	--c-on-dark: #f4f2f8;
	--c-on-dark-muted: #a9a4b6;
	--c-dark-line: #2c2933;

	--c-error: #b42318;
	--c-error-tint: #fef3f2;
	--c-success: #1f7a4d;
	--c-success-tint: #eef7f1;

	/* Type: system stack (zero requests); Inter is used when self-hosted. */
	--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--fs-display: clamp(2.5rem, 1.55rem + 3.9vw, 4.5rem);
	--fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
	--fs-h2: clamp(1.875rem, 1.3rem + 2.2vw, 3.125rem);
	--fs-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
	--fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	--fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--fs-small: 0.875rem;
	--fs-xs: 0.8125rem;
	--fs-eyebrow: 0.75rem;
	--fs-price: clamp(2rem, 1.7rem + 1.2vw, 2.5rem);

	--lh-display: 1.04;
	--lh-heading: 1.12;
	--lh-snug: 1.3;
	--lh-body: 1.6;

	--tr-display: -0.035em;
	--tr-h1: -0.03em;
	--tr-h2: -0.025em;
	--tr-h3: -0.012em;
	--tr-eyebrow: 0.14em;

	/* Space: 4px base. */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--sp-10: 8rem;
	--section-y: clamp(4rem, 2.8rem + 5vw, 7.5rem);

	/* Layout. */
	--container: 75rem;
	--container-narrow: 47.5rem;
	--gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
	--header-h: 3.75rem;

	/* Shape and depth. */
	--r-xs: 6px;
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 14px;
	--r-pill: 999px;
	--sh-1: 0 1px 2px rgb(17 17 17 / 0.04);
	--sh-2: 0 1px 2px rgb(17 17 17 / 0.04), 0 12px 32px -16px rgb(17 17 17 / 0.14);
	--sh-3: 0 2px 4px rgb(17 17 17 / 0.04), 0 24px 48px -20px rgb(17 17 17 / 0.22);
	--ring: 0 0 0 4px var(--c-brand-tint);

	/* Motion. */
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur-1: 120ms;
	--dur-2: 200ms;
	--dur-3: 320ms;
}

@media (min-width: 64rem) {
	:root {
		--header-h: 4.25rem;
	}
}