/*
 * Design tokens — the single place to change colours, fonts and spacing.
 * Values are placeholders matched to the Shopify screenshots; swap them for
 * the exported Shopify theme's values once those are available.
 */
:root {
	/* Brand */
	--color-primary: #7256e3;       /* purple used by the shipping bar */
	--color-primary-light: #8c5ef1;
	--color-primary-dark: #5a41c4;
	--color-text: #1a1a1a;
	--color-text-muted: #6b6b6b;
	--color-bg: #ffffff;
	--color-border: #e6e6e6;
	--color-white: #ffffff;

	/* Type — Barlow family (Google Fonts): condensed for headings/labels,
	   semi-condensed for body copy, matching the Shopify design. */
	--font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
	--font-body: 'Barlow Semi Condensed', 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Layout */
	--container-max: 1400px;
	--container-pad: 20px;

	/* Footer */
	--footer-bg: #f5f5f5;
	--footer-text: #232222;
	--footer-input-border: #b9b0ea;

	/* Header */
	--header-bg: #f5f5f5;
	--header-height: 58px;
	--header-icon: var(--color-primary);
	--header-search-bg: #fafafa;
	--header-search-border: var(--footer-input-border);
	--header-search-glow: rgba(139, 118, 233, 0.22);
	--header-search-text: #46464b;
	--header-search-icon: #1c1c22;
	--header-badge-bg: var(--color-primary);
	--header-badge-text: var(--color-white);
	--drawer-width: 420px;
	--drawer-tile-bg: #eeeeee;
	--drawer-rule: var(--color-primary);
	--drawer-social-bg: #eeeeee;
	--cart-drawer-width: 420px;

	/* Page titles */
	--page-title-gap: 40px;

	/* Home banners */
	--banner-gap: 12px;
	--banner-radius: 0px;

	/* Home categories */
	--category-button-bg: var(--color-white);
	--category-button-text: var(--color-primary);

	/* Shipping bar */
	--sb-bg: var(--color-primary);
	--sb-text: var(--color-white);
	--sb-track: var(--color-primary-light);
	--sb-fill: rgba(255, 255, 255, 0.92);
	--sb-marker: rgba(255, 255, 255, 0.16);
	--sb-marker-icon: var(--color-white);
	--sb-marker-unlocked: var(--color-white);
	--sb-marker-unlocked-icon: var(--color-primary);
	--sb-tooltip-bg: #1e1747;
	--sb-tooltip-text: var(--color-white);
	--sb-width: 400px;
}

@media (max-width: 599px) {
	:root {
		--container-pad: 14px;
	}
}