/*
 * Design tokens: colour, spacing, and type scale. Warm, muted, restrained palette
 * matching the established brand voice (see productRegister.ts / brandVoice.ts on
 * the Next.js side - this is the same tone expressed visually). System-font
 * stacks only, no external font loading, per the performance constraint (no
 * render-blocking web font requests at catalogue scale).
 */

:root {
	/* Colour */
	--keepsakes-color-bg: #faf7f2;
	--keepsakes-color-surface: #ffffff;
	--keepsakes-color-text: #2e2a26;
	--keepsakes-color-text-muted: #6b6259;
	--keepsakes-color-border: #e4ddd2;
	--keepsakes-color-accent: #8a6a4b;
	--keepsakes-color-accent-hover: #6f5238;
	--keepsakes-color-badge-bg: #efe6d8;
	--keepsakes-color-badge-text: #6f5238;
	--keepsakes-color-focus: #2e5c8a;

	/* Type */
	--keepsakes-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--keepsakes-font-size-sm: 0.875rem;
	--keepsakes-font-size-base: 1rem;
	--keepsakes-font-size-lg: 1.125rem;
	--keepsakes-font-size-xl: 1.5rem;
	--keepsakes-font-size-2xl: 2rem;
	--keepsakes-line-height-base: 1.55;
	--keepsakes-line-height-heading: 1.25;

	/* Spacing (4px rhythm) */
	--keepsakes-space-1: 0.25rem;
	--keepsakes-space-2: 0.5rem;
	--keepsakes-space-3: 0.75rem;
	--keepsakes-space-4: 1rem;
	--keepsakes-space-6: 1.5rem;
	--keepsakes-space-8: 2rem;
	--keepsakes-space-12: 3rem;

	/* Layout */
	--keepsakes-container-width: 1200px;
	--keepsakes-radius: 6px;
	--keepsakes-shadow-card: 0 1px 3px rgba(46, 42, 38, 0.08);
}