/*
 * Design tokens.
 *
 * Palette and type scale are lifted from the Elementor kit (post 8), which is
 * the authoritative source. Fluid clamp() sizing replaces the kit's four
 * breakpoint-specific overrides per heading.
 */

@font-face {
	font-family: 'Geist';
	src: url('../fonts/Geist-Variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Geist Mono';
	src: url('../fonts/GeistMono-Variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Palette */
	--c-primary: #868f74;
	--c-secondary: #364635;
	--c-text: #1e2224;
	--c-accent: #736f53;
	--c-gold: #b8a758;
	--c-dk-blue: #1f2f3a;
	--c-beige: #c2beb3;
	--c-lt-beige: #ebe9e3;
	--c-white: #ffffff;
	--c-night: #252a2d;
	--c-lt-brown: #8a7f72;
	--c-lt-gold: #d9c9a3;
	--c-lt-green: #c9d3c0;
	--c-lt-blue: #d8e6e8;
	--c-nav: #3d4423;
	--c-menu: #2a3326;
	--c-sunrise: #eece3f;
	--c-pine: #6c7845;

	/* Semantic */
	--c-body-bg: var(--c-white);
	--c-body-text: var(--c-text);
	--c-link: var(--c-secondary);
	--c-link-hover: var(--c-primary);
	--c-rule: rgb(30 34 36 / 12%);
	--c-muted: rgb(30 34 36 / 62%);

	/* Type families. Geist and Geist Mono are self-hosted variable WOFF2. */
	--font-display: 'Geist', system-ui, sans-serif;
	--font-body: 'Geist', system-ui, -apple-system, sans-serif;
	--font-sans: var(--font-body);
	--font-mono: 'Geist Mono', ui-monospace, sfmono-regular, monospace;

	/* Scale, derived from kit px values 66/42/38/18/16/15/12 */
	--fs-hero: clamp(2.5rem, 1.5rem + 4vw, 4.125rem);
	--fs-h1: clamp(2rem, 1.4rem + 2.4vw, 2.625rem);
	--fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.375rem);
	--fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--fs-lead: 1.125rem;
	--fs-body: 1rem;
	--fs-sm: 0.9375rem;
	--fs-xs: 0.75rem;

	--lh-tight: 1.1;
	--lh-heading: 1.2;
	--lh-body: 1.6;

	--tracking-tight: -0.01em;
	--tracking-wide: 0.08em;

	/* Spacing, 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;

	/* Fluid vertical rhythm for sections */
	--section-y: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
	--gutter: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);

	/* Measure */
	--w-content: 68rem;
	--w-wide: 90rem;
	--w-prose: 42rem;
	/* Same left edge as `.wpx-container--wide` (header logo). */
	--inset: max(var(--gutter), calc((100vw - var(--w-wide)) / 2 + var(--gutter)));

	/* Motion */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur-fast: 150ms;
	--dur: 300ms;
	--dur-slow: 600ms;

	/* Elevation */
	--shadow-1: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 12px rgb(0 0 0 / 8%);
	--shadow-2: 0 10px 15px rgb(0 0 0 / 20%);

	--radius: 0;
	--radius-pill: 999px;

	--z-header: 100;
	--z-panel: 200;
	--z-overlay: 300;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 1ms;
		--dur: 1ms;
		--dur-slow: 1ms;
	}
}