:root {
	/* --- Palette: warm, handmade, nursery. Warmth carried by accent + type,
	   not by a washed-out body. Contrast verified (body ≥ 4.5:1). --- */
	--bg: #f6efe4;            /* warm cream (nursery wall) */
	--bg-deep: #efe5d6;       /* alternating section band */
	--surface: #fffdfa;       /* cards */
	--surface-2: #f1e9dc;     /* muted surface / swatch wells */
	--ink: #2a2320;           /* headings / primary text (~13:1 on bg) */
	--ink-soft: #5f564d;      /* secondary text (~6:1 on bg) */
	--line: rgba(42, 35, 32, 0.12);
	--line-strong: rgba(42, 35, 32, 0.22);

	--accent: #b5645b;        /* dusty terracotta — the committed brand color */
	--accent-strong: #9e4f47; /* hover / pressed */
	--accent-ink: #8c463e;    /* terracotta as text on cream (~6:1) */
	--accent-wash: #f4e5e1;   /* tint fill */
	--sage: #7f9070;          /* eucalyptus — sparing secondary */
	--sage-wash: #e7ece0;
	--gold: #c19a4c;          /* warm highlight, used rarely */

	--success: #4a7c59;
	--error: #a4443b;

	/* --- Typography --- */
	--font-display: 'Alegreya', Georgia, 'Times New Roman', serif;
	--font-body: 'Alegreya', Georgia, 'Times New Roman', serif;
	--font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-script: 'Caveat', 'Segoe Script', cursive;

	--fs-hero: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
	--fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	--fs-h2: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem);
	--fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
	--fs-lead: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
	--fs-body: 1.0625rem;
	--fs-sm: 0.875rem;
	--fs-xs: 0.78rem;

	/* --- Radii --- */
	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 22px;
	--r-xl: 30px;
	--r-pill: 999px;

	/* --- Shadows (warm-tinted, soft) --- */
	--shadow-sm: 0 4px 14px -6px rgba(74, 54, 44, 0.20);
	--shadow-md: 0 16px 40px -18px rgba(74, 54, 44, 0.28);
	--shadow-lg: 0 30px 70px -30px rgba(74, 54, 44, 0.34);
	--shadow-focus: 0 0 0 3px rgba(181, 100, 91, 0.35);

	/* --- Spacing / layout --- */
	--container: 1200px;
	--container-narrow: 720px;
	--gutter: clamp(18px, 4vw, 44px);
	--section-y: clamp(56px, 8vw, 120px);

	/* --- Motion --- */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-1: 140ms;
	--dur-2: 260ms;
	--dur-3: 460ms;

	/* --- z-scale --- */
	--z-sticky: 20;
	--z-header: 30;
	--z-purchasebar: 35;
	--z-modal: 40;
	--z-toast: 60;

	/* --- Legacy aliases (kept so any older rule still resolves) --- */
	--color-background: var(--bg);
	--color-surface: var(--surface);
	--color-surface-muted: var(--surface-2);
	--color-text: var(--ink);
	--color-text-muted: var(--ink-soft);
	--color-border: var(--line);
	--color-accent: var(--accent);
	--color-accent-hover: var(--accent-strong);
	--color-error: var(--error);
	--radius-small: var(--r-sm);
	--radius-medium: var(--r-md);
	--radius-card: var(--r-lg);
	--radius-pill: var(--r-pill);
}
