/* Base: fonts, reset, type scale, focus, motion. Values come from tokens.css. */

/* Self-hosted latin subsets from @fontsource (SIL OFL 1.1), guidelines p.15.
   unicode-range is the subset's own range, so a face downloads only when text
   in that range is on the page. */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

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

:root { interpolate-size: allow-keywords; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

html:has(dialog[open]) { overflow: hidden; }

body {
	margin: 0;
	background: var(--color-ground);
	color: var(--color-text);
	font-family: var(--stack-body);
	font-size: var(--body-m);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}

img,
svg { display: block; max-width: 100%; }
img { height: auto; }
/* <picture> only chooses the file; the <img> inside is what lays out */
picture { display: contents; }
source { display: none; }

h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; }

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

/* Type scale, guidelines p.10 (mobile first, desktop from 768) */
h1, h2, h3, h4 { font-family: var(--stack-display); color: inherit; text-wrap: balance; }
h1 { font-size: var(--h1-m); font-weight: var(--fw-bold); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
h2 { font-size: var(--h2-m); font-weight: var(--fw-bold); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
h3 { font-size: var(--h3-m); font-weight: var(--fw-medium); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
h4 { font-size: var(--h4-m); font-weight: var(--fw-medium); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); }
h5, h6 { font-family: var(--stack-body); font-weight: var(--fw-semibold); }
h5 { font-size: var(--h5-m); line-height: var(--lh-h5); }
h6 { font-size: var(--h6-m); line-height: var(--lh-h6); letter-spacing: var(--tr-h6); }

@media (min-width: 768px) {
	body { font-size: var(--body); }
	h1 { font-size: var(--h1); }
	h2 { font-size: var(--h2); }
	h3 { font-size: var(--h3); }
	h4 { font-size: var(--h4); }
	h5 { font-size: var(--h5); }
	h6 { font-size: var(--h6); }
}

/* Caption: always uppercase, 12px floor (p.10) */
.caption {
	font-family: var(--stack-body);
	font-size: var(--caption);
	font-weight: var(--fw-medium);
	line-height: var(--lh-caption);
	letter-spacing: var(--tr-caption);
	text-transform: uppercase;
}

/* Links: Signal Blue role; deeper step on light grounds for AA */
a {
	color: var(--color-link);
	text-decoration-thickness: var(--hairline);
	text-underline-offset: 0.2em;
	transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
a:hover { text-decoration-thickness: var(--rule-accent); }

/* Focus: 2px Signal Blue ring with the 3px 22% halo (p.14) */
:focus-visible {
	outline: var(--rule-accent) solid var(--color-focus);
	outline-offset: var(--focus-offset);
	box-shadow: var(--focus);
}
:focus:not(:focus-visible) { outline: none; }
.site-main:focus { outline: none; }

/* Dark regions remap colour roles only (header, hero, bands, footer) */
.theme-dark {
	--color-ground: var(--color-dark-ground);
	--color-surface: var(--color-dark-surface);
	--color-text: var(--color-dark-text);
	--color-text-muted: var(--color-dark-text-muted);
	--color-border: var(--color-dark-border);
	--color-link: var(--color-dark-link);
	background: var(--color-ground);
	color: var(--color-text);
}

/* Numbers line up (CLAUDE.md §3) */
.price,
.rating,
.product-card__specs,
.spec-sheet,
.compare__table,
.chip__count,
.header-cart__count { font-variant-numeric: tabular-nums; }

/* Browser surfaces carry the palette too */
::selection { background: var(--blue-700); color: var(--white); }
html {
	caret-color: var(--color-focus);
	accent-color: var(--color-focus);
	scrollbar-color: var(--n-400) transparent;
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Accessibility helpers */
.visually-hidden {
	position: absolute !important;
	width: var(--hairline);
	height: var(--hairline);
	margin: calc(var(--hairline) * -1);
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 100;
	padding: var(--space-3) var(--space-4);
	background: var(--white);
	color: var(--n-900);
	font-weight: var(--fw-semibold);
	border-radius: var(--r-control);
	transform: translateY(calc(-100% - var(--space-4)));
	transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: none; }

/* Page-to-page transitions: a short crossfade; the header holds still. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: var(--dur-base);
		animation-timing-function: var(--ease);
	}
	.site-header { view-transition-name: site-header; }
}

/* Content is always visible; [data-reveal] only marks the one authored
   scroll moment (the order timeline in pages/home.css). */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	:focus-visible { outline-color: Highlight; }
}

/* Print: an order confirmation or a spec sheet prints as content only, dark
   on white, with no site chrome or controls */
@media print {
	.skip-link,
	.announcement-bar,
	.site-header,
	.site-footer,
	.cart-drawer,
	.breadcrumbs,
	.notice__action,
	form button { display: none !important; }
	body,
	.theme-dark { background: var(--white); color: var(--n-900); }
	a { color: inherit; text-decoration: none; }
	img { break-inside: avoid; }
}