/**
 * Design tokens. Every colour, size and spacing value used elsewhere
 * is defined here. Other files must not hardcode these values.
 *
 * Breakpoints are NOT variables (CSS cannot use them in @media):
 *   640px  tablet   |   768px  product page columns   |   1024px  desktop
 */
:root {
	/* Colour */
	--primary-color: #2f5d46;
	--primary-color-dark: #244a37;
	--text-color: #1d1d1f;
	--text-muted-color: #5c5c61;
	--background-color: #ffffff;
	--surface-color: #f6f5f1;
	--border-color: #e4e2da;
	--focus-color: #1a5fb4;

	/* Layout */
	--container-width: 70rem;
	--container-narrow-width: 40rem;
	--gutter: var(--space-5);
	--border-radius: 0.5rem;

	/* Spacing scale (4px base) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4.5rem;
	--space-9: 6rem;

	/* Typography */
	--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--line-height-base: 1.6;
	--line-height-tight: 1.2;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--font-size-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	--font-size-3xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 650;
}