:root {
	/* Color */
	--color-bg: #F5F3EE;
	--color-surface: #FFFFFF;
	--color-ink: #26282B;
	--color-heading: #1F2D2A;
	--color-accent: #B5502E;
	--color-accent-hover: #9A4325;
	--color-primary: #1F2D2A;
	--color-primary-hover: #16211F;
	--color-muted: #6E6A63;
	--color-border: #E3DFD6;
	--color-badge-sale: #B5502E;
	--color-badge-soldout: #26282B;
	--color-success: #3E7C4F;
	--color-overlay: rgba(31, 45, 42, .45);

	/* Typography */
	--font-heading: 'Sora', sans-serif;
	--font-body: 'Inter', sans-serif;
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.5rem;
	--text-2xl: 2rem;
	--text-3xl: 2.75rem;
	--text-hero: clamp(2.5rem, 5vw, 4rem);
	--leading-tight: 1.15;
	--leading-body: 1.6;
	--tracking-overline: .12em;

	/* Spacing */
	--space-1: .25rem;
	--space-2: .5rem;
	--space-3: .75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-24: 6rem;
	--section-pad: clamp(3rem, 8vw, 6rem);
	--container-max: 1360px;
	--container-pad: clamp(1rem, 4vw, 2.5rem);

	/* Shape */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-pill: 999px;
	--shadow-card: 0 2px 8px rgba(31, 45, 42, .06);
	--shadow-drawer: 0 8px 40px rgba(31, 45, 42, .18);
	--transition: 180ms ease;

	/* Z-index */
	--z-header: 100;
	--z-backdrop: 200;
	--z-drawer: 210;

	/* Drawer motion (slower/eased vs. --transition's 180ms micro-interactions) */
	--transition-drawer: 280ms cubic-bezier(0.22, 1, 0.36, 1);
	--transition-drawer-close: 220ms cubic-bezier(0.22, 1, 0.36, 1);
}