/**
 * Design tokens — the single source of truth for color, spacing, radius,
 * shadow, type, and motion. Every other stylesheet reads these instead of
 * hardcoding values, so the whole palette/scale can be re-tuned from here.
 *
 * Palette: warm blush-white base, dusty rose primary accent, sage secondary,
 * muted lavender as a tile tint, deep warm charcoal for text and CTAs.
 * Type: Fraunces (soft old-style serif display, elegant without luxury-serif
 * coldness) + Mulish (humanist sans body/UI), enqueued from Google Fonts in
 * inc/enqueue.php with system-stack fallbacks here.
 */

:root {
	/* --- Color --- */
	--color-bg: #fbf4ef;
	--color-bg-alt: #f5e6de;
	--color-surface: #ffffff;
	--color-text: #3b322e;
	--color-text-muted: #8a7a72;
	--color-accent-primary: #c26d7e;
	--color-accent-primary-dark: #a85668;
	--color-accent-secondary: #a3b18a;
	--color-accent-tertiary: #ddd3e8;
	--color-border: #ecdcd2;
	--color-success: #6b9080;
	--color-sale: #bc4749;
	--color-focus: #8a97c9;

	/* --- Spacing --- */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 12px;
	--space-lg: 16px;
	--space-xl: 24px;
	--space-2xl: 32px;
	--space-3xl: 48px;
	--space-4xl: 64px;

	/* --- Radius --- */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-pill: 999px;
	/* Arch: boudoir-mirror shape used on hero media and category tiles. */
	--radius-arch: 999px 999px var(--radius-lg) var(--radius-lg);

	/* --- Shadow --- */
	--shadow-soft: 0 2px 12px rgba(59, 50, 46, 0.07);
	--shadow-hover: 0 14px 32px rgba(59, 50, 46, 0.13);

	/* --- Typography --- */
	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-body: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.375rem;
	--text-xl: 1.75rem;
	--text-2xl: 2.25rem;
	--text-3xl: 3rem;
	--text-hero: clamp(2.4rem, 5.5vw, 3.75rem);

	--leading-tight: 1.12;
	--leading-normal: 1.55;
	--leading-relaxed: 1.7;

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	/* --- Motion --- */
	--ease-soft: cubic-bezier(0.25, 0.8, 0.5, 1);
	--duration-fast: 150ms;
	--duration-medium: 250ms;

	/* --- Layout --- */
	--container-width: 1240px;
	--header-height: 72px;

	/* --- Signature: scalloped lace-hem section edges --- */
	--scallop-size: 24px;
	--scallop-height: 13px;
}

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