:root {
	/* Colors */
	--color-bg: #f5f4f0;
	--color-surface: #ffffff;
	--color-ink: #111218;
	--color-slate: #2e3d47;
	--color-text: #33343b;
	--color-muted: #55565e;
	--color-border: #dad8d0;
	--color-accent: #ec2227;
	--color-on-dark: #f5f4f0;
	--color-on-dark-muted: #c9ced2;
	--color-photo-bg: #3a3b3d;

	/* Font families */
	--font-display: "Bricolage Grotesque", sans-serif;
	--font-body: "Instrument Sans", system-ui, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, monospace;

	/* Font sizes */
	--fs-micro: 0.75rem;
	--fs-eyebrow: 0.8125rem;
	--fs-small: 0.875rem;
	--fs-ui: 0.9375rem;
	--fs-base: 1rem;
	--fs-lead: clamp(1.0625rem, 1.2vw + 0.75rem, 1.25rem);
	--fs-h1: clamp(3rem, 6.4vw, 5.75rem);

	/* Line heights and tracking */
	--lh-tight: 0.95;
	--lh-body: 1.5;
	--tracking-h1: -0.035em;
	--tracking-mono: 0.08em;

	/* Radii */
	--radius-sm: 0.5rem;
	--radius-md: 1rem;
	--radius-lg: 1.5rem;
	--radius-pill: 999px;

	/* Spacing */
	--space-1: 0.5rem;
	--space-2: 0.75rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 1.75rem;
	--space-6: 4rem;
	--space-section-top: clamp(3rem, 7vw, 5.5rem);
	--space-section-bottom: clamp(2.5rem, 5vw, 4.5rem);
	--gutter: clamp(1.25rem, 5vw, 5rem);
	--container-max: 1600px;
	--hero-gap: clamp(2rem, 4.5vw, 4rem);
	--control-height: 3.25rem;

	/* Extended palette */
	--color-on-dark-soft: #d3d2cc;
	--color-on-dark-dim: #b5b4ae;
	--color-border-soft: #e7e5de;
	--color-divider-dark: #2e2f37;
	--color-on-dark-label: #8e8d88;

	/* Extended type scale */
	--fs-text: 1.0625rem;
	--fs-lead-lg: 1.1875rem;
	--fs-brand: 1.25rem;
	--fs-h2: clamp(2.25rem, 4vw, 3.5rem);
	--fs-h2-lg: clamp(2.25rem, 4vw, 3.75rem);
	--fs-h3: 1.75rem;
	--fs-h4: 1.625rem;
	--fs-stat: 2.75rem;

	/* Extended radii */
	--radius-card: 1.25rem;
	--radius-xl: 2rem;

	/* Layout spacing */
	--space-section: clamp(3.325rem, 7.6vw, 6.65rem);
	--space-section-sm: clamp(1.25rem, 2.5vw, 1.75rem);
	--space-card: clamp(1.5rem, 2.5vw, 2rem);
	--space-panel: clamp(1.5rem, 4vw, 3.5rem);
	--space-grid-gap: clamp(1rem, 2vw, 1.5rem);
	--space-title-gap: 1.5rem;
	--space-stack-lg: var(--space-title-gap);
}

html body {
	--wp--preset--color--vivid-red: var(--color-accent);
}

@media (min-width: 901px) {
	:root {
		--space-title-gap: 3rem;
	}
}