:root {
	--color-bg: #f7f3ee;
	--color-surface: #f7f3ee;
	--color-surface-muted: #efe8e0;
	--color-white: #fffcf8;
	--color-ink: #2c2623;
	--color-heading: #2c2623;
	--color-text: #3d3531;
	--color-muted: #5a524c;
	--color-border: #e4d9d0;
	--color-border-light: #ebe3da;

	--color-primary: #8b3f34;
	--color-primary-hover: #6f3229;
	--color-accent: var(--color-primary);
	--color-accent-hover: var(--color-primary-hover);
	--color-accent-soft: #f3e8e2;
	--color-accent-muted: #c48a7c;

	--color-success: #2f5d45;
	--color-warning: #7a5a1c;
	--color-error: #8b2e2e;

	--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-sans: 'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--text-display: clamp(2.4rem, 6.5vw, 4rem);
	--text-h1: clamp(1.875rem, 4vw, 2.5rem);
	--text-h2: clamp(1.5rem, 3vw, 2rem);
	--text-h3: clamp(1.2rem, 2.2vw, 1.375rem);
	--text-h4: 1.0625rem;
	--text-body-lg: clamp(1.0625rem, 1.6vw, 1.1875rem);
	--text-body: 1.0625rem;
	--text-small: 0.9375rem;
	--text-caption: 0.8125rem;
	--text-button: 0.9375rem;

	--leading-tight: 1.15;
	--leading-snug: 1.35;
	--leading-normal: 1.65;
	--leading-relaxed: 1.8;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;

	--content-width: 65ch;
	--container-max: 1280px;
	--container-x: clamp(1.15rem, 4.5vw, 2.75rem);
	--section-y: clamp(3.25rem, 8vw, 7rem);
	--section-y-sm: clamp(2.25rem, 5.5vw, 4rem);

	--radius-sm: 10px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-xl: 20px;
	--radius-full: 14px;

	--transition-fast: 0.15s ease;
	--transition-base: 0.22s ease;
	--transition-slow: 0.35s ease;

	--header-height: 4.5rem;

	--shadow-subtle: 0 1px 0 var(--color-border);
	--shadow-card: 0 12px 40px rgb(44 38 35 / 0.08);
	--shadow-card-hover: 0 16px 48px rgb(44 38 35 / 0.12);
	--shadow-header: 0 1px 0 rgb(44 38 35 / 0.06);

	--bp-sm: 480px;
	--bp-md: 768px;
	--bp-lg: 1024px;
	--bp-xl: 1280px;
}

@media (max-width: 767px) {
	:root {
		--text-display: clamp(1.65rem, 7.4vw, 2.05rem);
		--text-h1: clamp(1.4rem, 6vw, 1.75rem);
		--text-h2: clamp(1.28rem, 4.8vw, 1.5rem);
		--text-h3: 1.125rem;
		--text-body-lg: 1.0625rem;
		--section-y: 2.35rem;
		--section-y-sm: 1.65rem;
		--container-x: 1.2rem;
		--header-height: 4.15rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--header-height: 4.75rem;
	}
}