/* Design tokens. Values come from the client's mockup (mockups/Main.dc.html); see plans/v0.1.0/sprint-02c. */
:root {
	/* Colour */
	--bg: #fff;
	--surface: #F6F3F7;
	--ink: #16121C;
	--ink-soft: #2C2436;
	--accent: #7A2A63;
	--accent-deep: #5E1F4C;
	--accent-tint: #E9A3D6;
	--accent-wash: #F3EAF1;
	--muted: #5B5363;
	--line: #E8E2EA;
	--line-strong: #D9D2DB;
	--on-dark: #E9E1EA;
	--on-dark-muted: #B9B0BC;
	--white: #fff;
	--line-on-dark: rgba(233, 225, 234, 0.16);

	/* Type: Inter everywhere */
	--font-display: "Inter", system-ui, sans-serif;
	--font-body: "Inter", system-ui, sans-serif;
	--fs-h1: clamp(2rem, 1.2rem + 4vw, 4rem);
	--fs-page-h1: clamp(1.875rem, 1.1rem + 3.6vw, 3.5rem);
	--fs-h2: clamp(1.625rem, 1.1rem + 2.4vw, 2.25rem);
	--fs-h3: 1.25rem;
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-numeral: clamp(4rem, 11vw, 10rem);

	/* Spacing */
	--space-xs: 8px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 48px;
	--space-xl: 96px;
	--space-section: clamp(3.5rem, 2rem + 5vw, 5.5rem);

	/* Layout */
	--gutter: clamp(20px, 2.2vw, 4rem);
	--wrap: min(clamp(1176px, 84vw, 2160px), 100% - 2 * var(--gutter));
	--wrap-vw: min(clamp(1176px, 84vw, 2160px), 100vw - 2 * var(--gutter));
	--header-h: 4.875rem;

	/* Shape */
	--r-btn: 8px;
	--r-input: 8px;
	--r-card: 14px;
	--r-panel: 16px;
	--r-pill: 999px;

	/* Depth */
	--shadow-raised: 0 20px 50px rgba(22, 18, 28, 0.14);

	/* Motion */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--t-fast: 0.15s;
}

/* Phones: side margins scale with the screen (20px on a 375px phone) so layouts keep their proportions. */
@media (max-width: 639px) {
	:root {
		--gutter: clamp(16px, 5.333vw, 25.6px);
		--header-h: clamp(64px, 20.8vw, 100px);
	}
}