/* =============================================================================
   Sportsafe design tokens
   =============================================================================

   Two layers, deliberately.

   LAYER 1 is the Bricks global variable set, exported verbatim from
   `bricks_global_variables` on live (87 variables, 31 July 2026). It exists so that
   content and plugin CSS still referencing `var(--primary-700)` or `var(--space-2xl)`
   keeps rendering during the twelve weeks of migration. Phase 0 of the rebuild plan
   requires this. Delete the whole layer at decommission, once nothing references it.

   LAYER 2 is the design system the new theme actually uses. Where a value is the
   same, it points at layer 1 so there is one source of truth.

   Two deliberate departures from layer 1, both from the design direction:

   1. TYPE IS FIXED, NOT FLUID. The Bricks scale is `clamp()` on `vi` units, which is
      where the measured 16.96px, 10.24px, 30.08px and 12.8px come from. It is also
      partly broken: `--text-xs` is `clamp(0.64rem, -0.06vi + 0.65rem, 0.6rem)`, a
      negative slope whose maximum is below its minimum. Layer 2 uses nine fixed
      sizes and steps down at breakpoints instead of interpolating.

   2. RADIUS IS ZERO. Layer 1 keeps the radius scale so old markup does not collapse,
      but no new component may use it.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   LAYER 1 — Bricks compatibility. Exported, not authored. Do not add to this.
   -------------------------------------------------------------------------- */
:root {
	/* Colour: primary */
	--primary-main-900: #273582;
	--primary-950: #1c234f;
	--primary-800: #2a39a3;
	--primary-700: #2c44c9;
	--primary-600: #3558db;
	--primary-500: #4a75e7;
	--primary-400: #6d99ed;
	--primary-300: #9cbcf4;
	--primary-200: #c4d6f9;
	--primary-100: #dee7fb;
	--primary-50: #f0f5fe;

	/* Colour: secondary */
	--secondary-950: #9f1517;
	--secondary-900: #84181a;
	--secondary-800: #9f1517;
	--secondary-main-700: #cd1619;
	--secondary-600: #e51d20;
	--secondary-500: #f73c3f;
	--seconday-400: #fe6b6d;  /* misspelling is in the source data, kept for parity */
	--secondary-300: #ffa1a3;
	--secondary-200: #ffc8c9;
	--secondary-100: #ffe1e1;
	--secondary-50: #fff1f1;

	--white: #ffffff;
	--two-col-viewport-padding: calc((100% - 1400px) / 2);

	/* Space: fluid, and worth keeping. Spacing may interpolate; type may not. */
	--space-4xs: clamp(0.33rem, calc(-0.03vw + 0.33rem), 0.31rem);
	--space-3xs: clamp(0.41rem, calc(0.04vw + 0.4rem), 0.44rem);
	--space-2xs: clamp(0.51rem, calc(0.16vw + 0.48rem), 0.62rem);
	--space-xs: clamp(0.64rem, calc(0.35vw + 0.57rem), 0.88rem);
	--space-s: clamp(0.8rem, calc(0.65vw + 0.67rem), 1.24rem);
	--space-m: clamp(1rem, calc(1.11vw + 0.78rem), 1.75rem);
	--space-l: clamp(1.25rem, calc(1.81vw + 0.89rem), 2.47rem);
	--space-xl: clamp(1.56rem, calc(2.87vw + 0.99rem), 3.5rem);
	--space-2xl: clamp(1.95rem, calc(4.44vw + 1.07rem), 4.95rem);
	--space-3xl: clamp(2.44rem, calc(6.75vw + 1.09rem), 7rem);
	--space-4xl: clamp(3.05rem, calc(10.13vw + 1.02rem), 9.89rem);

	/* Radius: retained for old markup only. No new component may use these. */
	--radius-xs: clamp(0.25rem, calc(0vw + 0.25rem), 0.25rem);
	--radius-s: clamp(0.38rem, calc(-0.19vw + 0.54rem), 0.5rem);
	--radius-m: clamp(0.63rem, calc(-0.19vw + 0.79rem), 0.75rem);
	--radius-l: clamp(1rem, calc(-0.37vw + 1.32rem), 1.25rem);
	--radius-xl: clamp(1.63rem, calc(-0.56vw + 2.11rem), 2rem);
	--radius-full: 999rem;
}


/* -----------------------------------------------------------------------------
   LAYER 2 — the design system. New code uses only these.
   -------------------------------------------------------------------------- */
:root {

	/* --- Ink and ground ---------------------------------------------------
	   A near-black with a slight blue bias so it sits with the brand navy rather
	   than fighting it. --ink-3 is the lightest text permitted; it was darkened
	   twice during design review to clear WCAG AA at 12.5px. */
	--ink: #14171f;
	--ink-2: #5a6373;
	--ink-3: #636c7a;
	--edge: #e4e7ec;
	--edge-2: #f0f2f5;
	--surface: #ffffff;
	--wash: #f7f8fa;
	--deep: #101736;

	/* --- Brand ------------------------------------------------------------
	   Identical values to layer 1. What changes is where they are allowed to
	   appear, which the stylesheet and code review enforce, not the token.

	   RED IS THE PRIMARY ACTION AND NOTHING ELSE. Not prices, not badges, not
	   headings, not the shop tab. If two red things are visible at once, one is
	   wrong. On live today it appears up to twelve times per screen, including on
	   the price of all 2,493 products. */
	--navy: var(--primary-main-900);
	--red: var(--secondary-main-700);

	/* The only colour carrying information rather than brand: the in-stock dot. */
	--in-stock: #1a7f4b;

	/* --- Type -------------------------------------------------------------
	   Nine sizes. Fixed, never interpolated, so no fractional size can appear.
	   Narrow viewports step DOWN the scale rather than scaling between values. */
	--font-sans: "Sportsafe Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--t-display: 46px;
	--t-h1: 38px;
	--t-h2: 30px;
	--t-h3: 21px;
	--t-h4: 17px;
	--t-body: 16px;
	--t-small: 14px;
	--t-caption: 12.5px;
	--t-label: 10.5px;

	--w-regular: 400;
	--w-medium: 560;
	--w-semi: 620;
	--w-bold: 660;

	--lh-tight: 1.06;
	--lh-heading: 1.14;
	--lh-body: 1.62;

	--track-display: -0.032em;
	--track-heading: -0.026em;
	--track-label: 0.15em;

	/* --- Space ------------------------------------------------------------
	   4px base. Every value is a multiple, so vertical rhythm is even without
	   anyone having to think about it. */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-6: 24px;
	--s-8: 32px;
	--s-12: 48px;
	--s-16: 64px;
	--s-24: 96px;

	--section-y: var(--s-24);
	--gutter: var(--s-6);

	/* --- Layout ------------------------------------------------------------ */
	--container: 1280px;
	--measure: 68ch;
	--header-h: 66px;

	/* --- Form ------------------------------------------------------------
	   Radius 0 and shadow 0 everywhere. The mega menu panel is the single
	   exception, because it genuinely floats above the page. */
	--radius: 0;
	--shadow-none: none;
	--shadow-panel: 0 18px 44px -20px rgb(16 23 54 / 0.28);

	--hairline: 1px solid var(--edge);
	--focus: 2px solid var(--navy);
}

@media (max-width: 820px) {
	:root {
		--t-display: 30px;
		--t-h1: 30px;
		--t-h2: 21px;
		--section-y: var(--s-16);
	}
}

@media (max-width: 560px) {
	:root {
		--t-display: 21px;
		--t-h1: 21px;
		--t-h2: 17px;
		--t-h3: 17px;
		--section-y: var(--s-12);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--motion: 0ms;
	}
}