/* ============================================================================
   Maktune design tokens
   ----------------------------------------------------------------------------
   Every value here is MEASURED from the shipped v3 theme, not invented. This
   file is the migration's keystone change.

   In the old theme these lived on `body.home-v3`, inside home-v3.css. That
   meant any page using any v3 component had to download the entire 11.7KB
   homepage stylesheet just to read the variables — which is why the CSS could
   never be split by route. On :root they are free.

   Two naming layers, deliberately:

     --mk-*   canonical. New code uses these.
     --v3-*   aliases pointing at the canonical tokens. Roughly 400 existing
              declarations across four stylesheets reference these names. The
              aliases let that CSS port across verbatim, so the migration does
              not become a simultaneous rename. They cost ~15 lines and remove
              an entire class of regression.

   The --v3-* layer is a migration aid. Once every ported sheet is rewritten to
   --mk-*, delete it — but not before, and not partially.
   ========================================================================== */

:root {
	/* ---------------------------------------------------------- Colour */
	--mk-navy: #0B1B3A;        /* utility bar, footer, hero band */
	--mk-navy-2: #12254A;      /* second stop of the navy gradient */
	--mk-blue: #0E2CCB;        /* primary action, category nav */
	--mk-blue-dark: #0A22A0;   /* primary hover */
	--mk-orange: #F2600C;      /* discount flags, accents */
	/* The brand coral carries white text at only 3.25:1, below the 4.5:1 floor
	   for small text — so anything that puts words ON the coral uses this
	   darker variant instead. The brand colour is unchanged everywhere it is
	   decorative (wedges, rules, large fills), because WCAG governs text. */
	--mk-orange-ink: #C74B08;  /* coral behind white TEXT (4.73:1) */
	--mk-ink: #14171F;         /* body text, headings */
	--mk-muted: #5C6474;       /* secondary text */
	/* The lightest grey that still clears 4.5:1 on white (4.58). The ported
	   sheets used #9AA2B1 / #98A0B0 / #8A93A5 here — between 2.57 and 3.09,
	   i.e. genuinely hard to read. That matters more than usual on this site:
	   the text set in it is the SKU and part number, which is exactly what a
	   customer reads back to support when ordering a spare. */
	--mk-muted-soft: #6E7684;  /* small caps labels, SKUs, struck-through price */
	--mk-line: #E3E7EE;        /* borders, dividers */
	--mk-alt: #F5F7FA;         /* alternate section background */
	--mk-green: #11833B;       /* in stock, verified purchase */
	--mk-star: #F0A93B;        /* rating fill */
	--mk-white: #fff;

	/* Not --mk-navy, and not a mistake. This is sampled from the corner pixel
	   of the parts photograph so the band and the image meet without a seam.
	   Changing it to navy reintroduces a visible edge. */
	--mk-parts-band: #001033;

	/* --------------------------------------------------------- Layout */
	/* 1240px was previously --container in the retired Morning Light palette
	   in main.css. That single dependency is why the old sheet had to load on
	   every page. Verified against the live build: at a 1440px viewport the
	   content box measures 1192px = 1240 − (2 × 24) gutter. */
	--mk-container: 1240px;
	--mk-gutter: 24px;
	--mk-container-narrow: 860px;   /* policy and editorial prose */
	--mk-measure: 560px;            /* comfortable reading column */

	/* --------------------------------------------------------- Radius */
	--mk-r: 8px;         /* the system default */
	--mk-r-sm: 6px;
	--mk-r-xs: 4px;
	--mk-r-lg: 12px;
	--mk-r-pill: 100px;  /* chips, step badges, filter pills */
	--mk-r-circle: 50%;

	/* -------------------------------------------------------- Shadows */
	/* Tinted with the navy, never neutral grey — a grey shadow reads as dirt
	   against the blue-cast surfaces. */
	--mk-shadow-sm: 0 2px 6px rgba(15, 26, 50, .06);
	--mk-shadow: 0 10px 30px rgba(11, 27, 58, .13);
	--mk-shadow-lg: 0 14px 32px rgba(15, 26, 50, .13);
	--mk-shadow-blue: 0 8px 20px rgba(14, 44, 203, .26);  /* lifted primary button */
	--mk-ring: inset 0 0 0 1.5px var(--mk-line);
	--mk-ring-ink: inset 0 0 0 1.5px var(--mk-ink);

	/* -------------------------------------------------------- Z layers */
	/* Named because the two 60s previously collided: the sticky buy bar and
	   the purchase toasts both sat at 60 and the toast host is not a DOM
	   sibling, so no selector could separate them. */
	--mk-z-base: 1;
	--mk-z-raised: 2;
	--mk-z-sticky: 60;
	--mk-z-toast: 61;
	--mk-z-header: 70;
	--mk-z-overlay: 80;
	--mk-z-drawer: 90;
	--mk-z-modal: 100;

	/* ----------------------------------------------------- Typography */
	/* Inter was the body face through v3-v5. It is gone: it is the single most
	   common face in generated and templated UI, and on a brand whose whole
	   argument is "we actually make this", reading like every other storefront
	   is a cost. Schibsted Grotesk was drawn for a news publisher — it holds up
	   at the 14-16px sizes where most of this site lives and has the numerals a
	   price-dense catalogue needs.

	   --mk-display is a REAL display face now, unlike the v3 note below it that
	   said there was none. Bricolage Grotesque carries the headline voice; it is
	   used ONLY at 24px and up, where its ink traps read as intent rather than
	   noise. Both are self-hosted in assets/fonts — latin AND latin-ext, because
	   the rupee sign lives in latin-ext and every price here needs it. */
	--mk-font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--mk-display: "Bricolage Grotesque", "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--mk-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* The scale the build actually uses, in frequency order. Half-pixel steps
	   are intentional: this is a dense retail layout.
	   NOTE: these tokens are ADDITIVE. Ported CSS keeps its literal values so
	   the migration stays pixel-identical. Do not sweep existing rules onto
	   the scale as part of the port — that is a redesign, not a migration. */
	--mk-fs-3xs: 10.5px;
	--mk-fs-2xs: 11px;
	--mk-fs-xs: 11.5px;    /* uppercase utility and eyebrow text */
	--mk-fs-sm: 12px;
	--mk-fs-base: 13.5px;  /* the most common size in the system */
	--mk-fs-md: 14px;
	--mk-fs-lg: 15px;
	--mk-fs-xl: 16px;
	--mk-fs-h4: 18px;
	--mk-fs-h3: 21px;
	--mk-fs-h2: 42px;
	--mk-fs-h1: 52px;

	--mk-lh-tight: 1.15;
	--mk-lh: 1.5;
	--mk-lh-loose: 1.7;
	--mk-tracking-tight: -.01em;   /* headings */
	--mk-tracking-caps: .07em;     /* uppercase utility text */

	/* --------------------------------------------------------- Motion */
	/* One curve for the whole system. */
	--mk-ease: cubic-bezier(.22, .61, .36, 1);
	--mk-dur: .18s;
	--mk-dur-slow: .32s;

	/* ---------------------------------------------------- Breakpoints */
	/* Recorded for reference only — custom properties cannot be used inside a
	   media query. Every @media in this theme must use one of these four:
	   1080px · 860px · 640px · 560px · 420px */
}

/* ---------------------------------------------------------------------------
   Compatibility aliases. See the header note. Delete only when every ported
   stylesheet has been rewritten to --mk-*.
   ------------------------------------------------------------------------- */
:root {
	--v3-navy: var(--mk-navy);
	--v3-navy-2: var(--mk-navy-2);
	--v3-blue: var(--mk-blue);
	--v3-blue-dark: var(--mk-blue-dark);
	--v3-orange: var(--mk-orange);
	--v3-orange-ink: var(--mk-orange-ink);
	--v3-ink: var(--mk-ink);
	--v3-muted: var(--mk-muted);
	--v3-line: var(--mk-line);
	--v3-alt: var(--mk-alt);
	--v3-green: var(--mk-green);
	--v3-r: var(--mk-r);
	--v3-ease: var(--mk-ease);
	--star: var(--mk-star);
	--container: var(--mk-container);

	/* The only three Morning Light names the ported sheets still reference.
	   --body and --mono resolve to the same stacks they always did, so this is
	   a rename, not a restyle. Everything else in that palette is gone.

	   --display (Fraunces) and Anton are referenced by NOTHING and are
	   deliberately absent — that removes two font families from the download.
	   The single remaining mention of --display in the codebase is a comment in
	   product.css warning against using it. */
	--body: var(--mk-font);
	--mono: var(--mk-font-mono);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--mk-dur: 0s;
		--mk-dur-slow: 0s;
	}
}