/**
 * Design tokens — the only place with color literals (README §3, 01 Design System, D-10, D-22).
 * Brand values are the defaults; the plugin prints the store's branding over them (#fs-brand).
 */
:root {
	/* Neutrals (README §3). */
	--fs-ground: #f3f2f2;
	--fs-ground-2: #eae9e9;
	--fs-ground-3: #d7d3d3;
	--fs-ink: #201e1d;
	--fs-ink-2: #605d5d;
	--fs-ink-3: #9b9797;
	--fs-line: rgba(32, 30, 29, 0.16);
	--fs-line-2: rgba(32, 30, 29, 0.35);
	/* Values used by the storefront design (02 Home) beyond the README set. */
	--fs-line-soft: rgba(32, 30, 29, 0.1);
	--fs-line-field: rgba(32, 30, 29, 0.4);
	--fs-hover: rgba(32, 30, 29, 0.07);
	--fs-selection: rgba(236, 48, 19, 0.3);

	/* Surfaces on ink (announcement bar, footer, drawer top). */
	--fs-inverse-text: var(--fs-ground);
	--fs-inverse-text-2: var(--fs-ground-3);
	--fs-inverse-text-3: var(--fs-ink-3);
	--fs-inverse-line: #444141;

	/* Brand (D-22). */
	--fs-brand: #ec3013;
	--fs-brand-hover: #dd2b0f;
	--fs-brand-active: #ae1800;
	--fs-brand-ink: #7c1405;
	--fs-brand-tint: #fff2ef;
	--fs-brand-on-ink: #ff9783;
	/*
	 * Filled brand surfaces that carry text. Light text on --fs-brand is 3.76:1 (below AA);
	 * until D-38 is decided, text-bearing fills use the active shade (6.41:1).
	 */
	--fs-brand-fill: var(--fs-brand-active);
	--fs-on-brand: var(--fs-ground);

	/* Semantic (README §3). Always paired with a text label. */
	--fs-success: #146b3a;
	--fs-success-tint: #e8f3ec;
	--fs-success-ink: #0f4f2b;
	--fs-warning: #9a6400;
	--fs-warning-tint: #fdf3e2;
	--fs-warning-ink: #6f4800;
	--fs-danger: #b3261e;
	--fs-danger-tint: #fdecea;
	--fs-danger-ink: #8a1c16;
	--fs-info: #14477d;
	--fs-info-tint: #e9eff7;
	--fs-info-ink: #0f3760;

	/* Typography — store scale (01 Design System, D-10). */
	--fs-font-display: "Archivo", system-ui, sans-serif;
	--fs-font-body: "Archivo", system-ui, sans-serif;
	/* Personalization typography and vinyl colors (D-63). */
	--fs-font-custom-sport: "Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
	--fs-font-custom-block: "Archivo", system-ui, sans-serif;
	--fs-font-custom-retro: "Zilla Slab", georgia, serif;
	--fs-vinyl-white: #f7f6f4;
	--fs-vinyl-black: #1a1818;
	--fs-vinyl-gold: #c9a13b;
	--fs-vinyl-red: #c8251d;
	--fs-text-display: 4rem;
	--fs-text-h1: 2.625rem;
	--fs-text-h2: 2rem;
	--fs-text-h3: 1.5625rem;
	--fs-text-lead: 1.0625rem;
	--fs-text-body: 0.9375rem;
	--fs-text-small: 0.875rem;
	--fs-text-meta: 0.8125rem;
	--fs-text-caption: 0.75rem;
	--fs-text-label: 0.6875rem;
	--fs-track-label: 0.2em;
	--fs-track-nav: 0.08em;
	--fs-track-bar: 0.12em;
	--fs-track-logo: -0.04em;

	/* Spacing (4px base). */
	--fs-space-1: 0.25rem;
	--fs-space-2: 0.5rem;
	--fs-space-3: 0.75rem;
	--fs-space-4: 1rem;
	--fs-space-5: 1.25rem;
	--fs-space-6: 1.5rem;
	--fs-space-8: 2rem;
	--fs-space-10: 2.5rem;
	--fs-space-12: 3rem;
	--fs-space-14: 3.5rem;

	/* Layout. */
	--fs-content-max: 80rem;
	--fs-gutter: 1rem;
	--fs-tap: 2.75rem;
	--fs-header-search-max: 26.25rem;
	--fs-mega-promo: 20rem;

	/* Elevation: only modals and drawers (D-10). */
	--fs-shadow-modal: 0 12px 32px rgba(45, 43, 43, 0.22);
	--fs-scrim: rgba(32, 30, 29, 0.5);

	/* Motion. */
	--fs-t-hover: 120ms ease-out;
	--fs-t-drawer: 180ms ease-out;
	--fs-radius: 0;
	--fs-focus: 2px solid var(--fs-brand);
}

@media (min-width: 768px) {
	:root {
		--fs-gutter: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--fs-t-hover: 0ms linear;
		--fs-t-drawer: 0ms linear;
	}
}