/*
 * Striker Style — design tokens (design.md v3 "Kit Room" §2–§5).
 * Mirrors theme.json. Change both together.
 */
:root {
	/* Colour */
	--c-ink: #111111;
	--c-canvas: #ffffff;
	--c-cloud: #f5f5f5;
	--c-stage: #f9f9f9;
	--c-charcoal: #39393b;
	--c-mute: #6b6b6e;
	--c-stone: #a3a3a6;
	--c-hairline: #cacacb;
	--c-hairline-soft: #e5e5e5;
	--c-field: #757575;
	--c-sale: #d30005;
	--c-success: #007d48;
	--c-warning: #9a5b00;
	--c-warning-bg: #fff6e5;
	--c-error: #c41e1e;
	--c-error-bg: #fdeded;
	--c-focus: #1151ff;
	--c-disabled-bg: #e5e5e5;
	--c-disabled-text: #757575;

	/* Type */
	--f-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
	--f-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--fs-display: clamp(3rem, 1.95rem + 4.3vw, 6rem);
	--fs-h1: clamp(2.25rem, 1.85rem + 1.6vw, 3.25rem);
	--fs-h2: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
	--fs-h1-product: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
	--fs-h3: 1.5rem;
	--fs-body: 1rem;
	--fs-caption: 0.875rem;
	--fs-label: 0.75rem;
	--fs-price-lg: 1.5rem;

	/* Layout */
	--w-max: 1440px;
	--w-text: 720px;
	--gutter: clamp(16px, 3.3vw, 48px);
	--section: 40px;
	--header-h: 56px;
	--utility-h: 36px;

	/* Spacing (8 px base) */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	--s-9: 96px;

	/* Shape */
	--r-none: 0;
	--r-field: 8px;
	--r-search: 24px;
	--r-pill: 9999px;

	/* Elevation */
	--sh-sticky: inset 0 -1px 0 #e5e5e5;
	--sh-overlay: 0 16px 40px rgba(17, 17, 17, 0.18);

	/* Motion */
	--t-fast: 120ms;
	--t-base: 200ms;
	--t-slow: 280ms;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	/* Z-index */
	--z-header: 100;
	--z-sticky-atc: 150;
	--z-dropdown: 200;
	--z-overlay: 900;
	--z-drawer: 1000;
	--z-modal: 1100;
	--z-toast: 1200;
}

@media (min-width: 600px) {
	:root {
		--section: 48px;
	}
}

@media (min-width: 1024px) {
	:root {
		--header-h: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--t-fast: 0.01ms;
		--t-base: 0.01ms;
		--t-slow: 0.01ms;
	}
}

/* Icon masks (outline set, 1.75 stroke) used by CSS pseudo-elements. */
:root {
	--i-plus: url("../icons/plus.svg");
	--i-minus: url("../icons/minus.svg");
	--i-check: url("../icons/check.svg");
	--i-truck: url("../icons/truck.svg");
	--i-card: url("../icons/card.svg");
	--i-shield: url("../icons/shield.svg");
	--i-help: url("../icons/help.svg");
	--i-return: url("../icons/return.svg");
}