/*
 * Design tokens. Change the look of the whole store here first;
 * components only reference these variables.
 */
:root {
	/* Brand */
	--color-primary: #ef233c;
	--color-primary-dark: #d81d33;
	--color-primary-soft: #fff4f6;
	/* Action buttons: add to cart, view cart, checkout. Defaults to the brand colour. */
	--color-action: var(--color-primary);
	--color-action-dark: var(--color-primary-dark);
	--color-action-text: #ffffff;
	--color-secondary: #3bc9db;
	--color-accent: #fd7e14;
	--color-success: #12b886;
	--color-rating: #ffd43b;

	/* Neutrals */
	--color-text: #212529;
	--color-muted: #868e96;
	--color-faint: #adb5bd;
	--color-border: #e9ecef;
	--color-border-strong: #ced4da;
	--color-bg: #ffffff;
	--color-bg-soft: #f1f3f5;
	--color-dark: #1d2327;
	--color-on-dark: #ffffff;

	/* Typography */
	--font-body: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-heading: var(--font-body);
	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: 1.125rem;
	--fs-lg: 1.375rem;
	--fs-xl: 1.75rem;
	--fs-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* Spacing */
	--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: 4rem;
	--section-gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);

	/* Shape & depth */
	--radius-sm: 4px;
	--radius: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
	--shadow: 0 6px 24px rgb(0 0 0 / 0.08);

	/* Layout */
	--container: 1320px;
	--gutter: 16px;
	--header-search-max: 640px;
}