/*
 * Unlicensed Labs design tokens.
 *
 * The handover's component sheet (store.css) consumes 30 custom properties and
 * defines none of them — the token stylesheet was never shipped, so this file
 * reconstructs it. Values come from the handover's own palette and type notes,
 * not from invention.
 *
 * FOUR consumed tokens are deliberately NOT defined here:
 *   --hdr-h                 store.css sets it itself (132px / 64px scrolled /
 *                           172px narrow). Redefining it here would fight the
 *                           sticky header's shrink-on-scroll.
 *   --cat, --tile-accent    Per-instance. Set inline on each category card and
 *                           product tile from that record's `accent` field.
 *                           Hoisting them to :root would hard-code one colour
 *                           across a catalogue whose whole visual system is
 *                           per-formulation colour.
 *   --hdr-px, --tab-px      Measured and set by JS at runtime; store.css already
 *                           carries inline fallbacks, e.g. var(--hdr-px,132px).
 */

:root {

	/* --- Brand ---------------------------------------------------------- */
	--accent: #C8FF00;            /* LaB Green */
	--accent-press: #C3D530;      /* pressed / active — LaB Green stepped down */
	--accent-soft: rgba(200, 255, 0, .12);   /* hover wash behind menu items */

	--ul-midnight: #0B0F14;
	--ul-white: #FFFFFF;
	--ul-sterile-grey: #E5E7EB;   /* pale hover on inverted buttons */
	--ul-form-amber: #F0B72B;     /* low-stock warning only, not decoration */

	/* --- Surfaces ------------------------------------------------------- */
	--surface-page: #0B0F14;
	--surface-card: #131922;
	--surface-sunken: #070A0E;

	/* --- Text ----------------------------------------------------------- */
	--text-primary: #FFFFFF;
	--text-secondary: #D1D5DB;
	--text-muted: #9CA3AF;

	/* --- Lines and shadows ---------------------------------------------- */
	--border-hairline: rgba(255, 255, 255, .12);
	--shadow-card: 0 1px 0 rgba(255, 255, 255, .04), 0 8px 24px rgba(0, 0, 0, .38);
	--shadow-overlay: 0 18px 48px rgba(0, 0, 0, .62);

	/* --- Type ------------------------------------------------------------
	 * The fallback chains matter more than usual: the label builder measures
	 * text against these exact faces (UL_Label_Geometry::ADVANCE), so the
	 * fallbacks are the nearest metric match, not the nearest look.
	 */
	--font-display: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-body: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-label: 'Roboto Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
	--font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--track-caps: .14em;          /* every uppercase run tracks out this far */
	--track-display: -.02em;      /* display lockups track in */

	/* --- Geometry -------------------------------------------------------- */
	--radius-xs: 2px;
	--radius-sm: 3px;
	--radius-md: 4px;
	--radius-lg: 6px;
	--content-max: 1180px;

	/* --- Motion ---------------------------------------------------------- */
	--transition-interactive: 180ms ease;
}

/* Honour a reduced-motion preference globally rather than per-component, so a
   new component can't forget to. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--transition-interactive: 0ms linear;
	}

	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	background: var(--surface-page);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--surface-page);
	color: var(--text-secondary);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: var(--track-display);
	text-wrap: balance;
}

a { color: inherit; }

img, svg { max-width: 100%; }

img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Minimum 44px touch target on every control, per the handover. */
button, [role="button"], input[type="submit"], input[type="button"] {
	min-height: 44px;
}

/* Focus ring, exactly as specified: a midnight gap then LaB Green, so it reads
   on both the page and the card surfaces. */
:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--ul-midnight), 0 0 0 4px var(--accent);
	border-radius: var(--radius-xs);
}

/* Visible only to screen readers until focused — used by the skip link. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed !important;
	top: 12px; left: 12px;
	z-index: 100;
	width: auto; height: auto;
	margin: 0; padding: 12px 18px;
	clip: auto;
	clip-path: none;
	background: var(--accent);
	color: var(--ul-midnight);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--radius-md);
}