/* Design tokens — source of truth: docs/DESIGN-SYSTEM.md. Keep in sync. */
:root {
	/* Primary brand colors */
	--wf-purple: #37298E;
	--wf-gold: #A2844C;

	/* Pastel accent set */
	--wf-aqua: #97D7E8;
	--wf-pink: #F8B7C6;
	--wf-cream: #F5E2C9;
	--wf-lilac: #A089BE;
	--wf-mauve: #DEBBD7;
	--wf-turquoise: #B2DFE5;

	/* Neutrals */
	--wf-ink: #2B2333;
	--wf-ink-soft: #332E3B;
	--wf-paper: #FBF6EC;
	--wf-border: #E4DEEA;
	--wf-dark: #231A4A;
	--wf-white: #FFFFFF;

	/* Typography */
	--wf-font-display: "Fraunces", ui-serif, Georgia, serif;
	--wf-font-body: "Poppins", ui-sans-serif, sans-serif;

	--wf-text-h1: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
	--wf-text-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
	--wf-text-h3: clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem);
	--wf-text-body: 1rem;
	--wf-text-small: 0.875rem;

	/* Spacing */
	--wf-space-xs: 0.5rem;
	--wf-space-sm: 1rem;
	--wf-space-md: 1.5rem;
	--wf-space-lg: 2.5rem;
	--wf-space-xl: 4rem;
	--wf-space-2xl: 6rem;

	/* Layout */
	--wf-container: 1200px;
	--wf-container-narrow: 760px;
	--wf-gap: var(--wf-space-md);

	/* Radii & shadows */
	--wf-radius-sm: 0.5rem;
	--wf-radius-md: 1rem;
	--wf-radius-lg: 1.5rem;
	--wf-radius-full: 999px;

	--wf-shadow-sm: 0 1px 3px rgba(43, 35, 51, 0.08);
	--wf-shadow-md: 0 8px 24px rgba(43, 35, 51, 0.12);
	--wf-shadow-lg: 0 20px 48px rgba(43, 35, 51, 0.16);

	/* Motion */
	--wf-duration-fast: 150ms;
	--wf-duration-base: 300ms;
	--wf-duration-slow: 600ms;
	--wf-ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* Product card tones (all pass AA with white text) */
	--wf-tone-1: #37298E;
	--wf-tone-2: #B3416B;
	--wf-tone-3: #86692F;
	--wf-tone-4: #231A4A;
	--wf-tone-5: #5E4AB8;
	--wf-tone-6: #7B4F99;
}