/**
 * Design tokens — DESIGN-REFERENCE.md §3–4, §11.
 * Fonts are provisional style matches until licensed families are chosen.
 */

:root {
	/* Colors — sampled */
	--color-cream: #f3eee7;
	--color-near-black: #10100d;
	--color-brand-red: #ab2114;
	--color-ink: #16100c;
	--color-map-surface: #e6e1dc;
	--color-logo-cream: #fcf2dd;
	--color-logo-red: #b53b2d;

	/* Colors — supporting */
	--color-white: #ffffff;
	--color-body-muted: #5c534c;
	--color-outline: #1a1a1a;
	--color-hero-scrim: rgb(16 16 13 / 0.45);
	--color-focus: #ab2114;
	--color-focus-ring: rgb(171 33 20 / 0.45);

	/* Typography */
	--font-display: "Cormorant Garamond", "Times New Roman", Times, serif;
	--font-sans: "Source Sans 3", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.25rem;
	--text-xl: 1.5rem;
	--text-2xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
	--text-3xl: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
	--text-hero: clamp(2.5rem, 1.5rem + 3.5vw, 4rem);

	--leading-tight: 1.2;
	--leading-snug: 1.35;
	--leading-body: 1.65;
	--tracking-nav: 0.14em;
	--tracking-btn: 0.12em;
	--tracking-eyebrow: 0.16em;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* Layout */
	--container-max: 72rem;
	--container-pad: clamp(1.25rem, 4vw, 3rem);
	--header-height: 5.75rem;
	--header-height-lg: 7rem;
	--radius-sm: 0.25rem;
	--radius-md: 0.375rem;
	--radius-lg: 0.5rem;
	--radius-pill: 999px;
	--surface-elevated: #fffaf4;
	--border-subtle: rgb(22 16 12 / 0.14);

	/* Motion */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;

	/* Surfaces for shell */
	--header-bg: rgb(16 16 13 / 0.92);
	--header-fg: var(--color-white);
	--footer-bg: var(--color-near-black);
	--footer-fg: var(--color-cream);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration-base: 0ms;
	}
}