/* Hallmark · macrostructure: Catalogue · F6 knobs: ratio=1/1, density=4-up, action=Add · F3 knobs: cols=3+footnote, rules=every-row, nums=tabular
 * theme: custom · vibe: "gauge card, workshop counter, anodized aluminum, spec-true" · paper: oklch(97.5% 0.006 235) · accent: oklch(48% 0.14 235)
 * display: Cabinet Grotesk · body: IBM Plex Sans · outlier: IBM Plex Mono (machine-set data role) · axes: light / grotesk-sans / cool
 * genre: editorial · nav: N12 banner+retract · footer: Ft4 dense colophon · enrichment: none (real supplier photography)
 * studied: no · context: inferred · Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5
 */

:root {
	/* ---- color: cool technical paper, anodized-blue anchor (hue 235) ---- */
	--color-paper:        oklch(97.5% 0.006 235);
	--color-paper-2:      oklch(94.8% 0.008 235);
	--color-paper-3:      oklch(91.5% 0.010 235);
	--color-ink:          oklch(21% 0.012 240);
	--color-ink-2:        oklch(33% 0.011 240);
	--color-muted:        oklch(45% 0.010 238);
	--color-rule:         oklch(80% 0.010 235);
	--color-rule-2:       oklch(87% 0.008 235);
	--color-rule-strong:  oklch(63% 0.010 237);
	--color-accent:       oklch(48% 0.14 235);
	--color-accent-deep:  oklch(40% 0.13 238);
	--color-accent-ink:   oklch(97.5% 0.006 235);
	--color-focus:        oklch(52% 0.19 235);
	--color-error:        oklch(50% 0.19 25);
	--color-success:      oklch(45% 0.10 150);

	/* ---- type ---- */
	--font-display: "Cabinet Grotesk", "Avenir Next", ui-sans-serif, sans-serif;
	--font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, monospace;

	/* 1.25 major-third scale on a 16px base */
	--text-xs:   0.8rem;
	--text-sm:   0.9rem;
	--text-base: 1rem;
	--text-md:   1.25rem;
	--text-lg:   1.5625rem;
	--text-xl:   1.9531rem;
	--text-2xl:  2.4414rem;
	--text-display-s: clamp(1.75rem, 2.5vw + 0.75rem, 2.75rem);
	--text-display:   clamp(2.25rem, 4vw + 1rem, 4.25rem);

	/* ---- space: 4pt scale ---- */
	--space-2xs: 0.25rem;
	--space-xs:  0.5rem;
	--space-sm:  0.75rem;
	--space-md:  1rem;
	--space-lg:  1.5rem;
	--space-xl:  2.5rem;
	--space-2xl: 4rem;
	--space-3xl: 6rem;

	/* ---- motion ---- */
	--ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-micro: 120ms;
	--dur-short: 220ms;
	--dur-long:  420ms;

	/* ---- structure ---- */
	--rule-hair: 1px;
	--radius-sm: 2px;
	--radius-md: 4px;
	--banner-h: 40px;
	--bar-h: 64px;

	--z-base: 1;
	--z-raised: 10;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-modal: 400;
	--z-toast: 500;
	--z-tooltip: 600;
}