/*
 * Design tokens — generated 1:1 from docs/DESIGN-SYSTEM.md.
 * This file defines variables only. Component styling (buttons, product
 * cards, header, etc.) is added during the visual-implementation phase.
 *
 * Fonts are self-hosted from ../fonts/ — official Google Fonts source files,
 * SIL Open Font License 1.1 (self-hosting explicitly permitted). See
 * docs/FONT-LICENSING.md for source/licence verification. Latin subset only,
 * only the weights docs/DESIGN-SYSTEM.md actually specifies.
 */

@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/space-grotesk/spacegrotesk-600-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/space-grotesk/spacegrotesk-700-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter/inter-400-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter/inter-500-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter/inter-600-latin.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono/ibmplexmono-400-latin.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono/ibmplexmono-500-latin.woff2") format("woff2");
}

:root {
	/* Brand */
	--color-brand-ink: #0B1F2B;
	--color-brand-deep: #003050;
	--color-brand-blue: #0077C3;
	--color-brand-bright: #0090E0;

	/* Neutrals */
	--color-surface: #FFFFFF;
	--color-surface-sunken: #F5F8FA;
	--color-surface-muted: #EAF0F3;
	--color-border: #DCE4E8;
	--color-border-strong: #B9C6CD;

	/* Text */
	--color-text-primary: #0B1F2B;
	--color-text-secondary: #4B5D66;
	--color-text-muted: #7C8B92;
	--color-text-on-brand: #FFFFFF;

	/* Semantic */
	--color-success: #19714E; /* corrected from #1E8A5F (4.32:1 on white, 3.86:1 on --color-success-bg) — both now ≥5.3:1. Found via axe-core during Phase 3A, docs/COMPONENT-LIBRARY.md §14. */
	--color-success-bg: #E8F5EE;
	--color-warning: #9B6008; /* corrected from #B8720A (3.45:1) to meet WCAG AA 4.5:1 on --color-warning-bg — confirmed via axe-core, docs/FOUNDATION-QA.md */
	--color-warning-bg: #FBF1E2;
	--color-error: #C0392B;
	--color-error-bg: #FBEAE8;
	--color-sale: #BB2626; /* corrected from #D42B2B (4.19:1 on its own 12%-tint badge background) — now ≥5.1:1 in every usage context. Found via axe-core during Phase 3A, docs/COMPONENT-LIBRARY.md §14. */

	/* Typography */
	--font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
	--font-body: "Inter", "Segoe UI", system-ui, sans-serif;
	--font-data: "IBM Plex Mono", ui-monospace, monospace;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Type scale — extended in Phase 3A (docs/COMPONENT-LIBRARY.md) to add h4-h6,
	   caption/helper roles, and the display/price sizes docs/DESIGN-SYSTEM.md §2
	   already specified but this file hadn't defined yet. */
	--text-display-xl: clamp(2.25rem, 1.9rem + 1.5vw, 3rem);
	--text-display-lg: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
	--text-h1: 1.75rem;
	--text-h2: 1.375rem;
	--text-h3: 1.125rem;
	--text-h4: 1rem;
	--text-h5: 0.9375rem;
	--text-h6: 0.8125rem;
	--text-base: 1rem;
	--text-sm: 0.875rem;
	--text-xs: 0.75rem;
	--text-caption: 0.75rem;
	--text-helper: 0.8125rem;
	--text-price-lg: 1.375rem;
	--text-price-card: 1.125rem;
	--text-price-sm: 0.9375rem;

	--leading-tight: 1.2;
	--leading-snug: 1.3;
	--leading-normal: 1.5;
	--leading-relaxed: 1.6;
	--leading-loose: 1.7;

	--tracking-tight: -0.02em;
	--tracking-snug: -0.01em;
	--tracking-normal: 0;
	--tracking-wide: 0.02em;
	--tracking-wider: 0.04em;

	/* Spacing (4px base unit) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;

	/* Radii */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-full: 999px;

	/* Shadows */
	--shadow-xs: 0 1px 1px rgba(11, 31, 43, 0.04);
	--shadow-sm: 0 1px 2px rgba(11, 31, 43, 0.06);
	--shadow-md: 0 2px 6px rgba(11, 31, 43, 0.08), 0 1px 2px rgba(11, 31, 43, 0.04);
	--shadow-lg: 0 12px 24px rgba(11, 31, 43, 0.12), 0 4px 8px rgba(11, 31, 43, 0.06);
	--shadow-focus: 0 0 0 3px rgba(0, 144, 224, 0.35);

	/* Border system */
	--border-width-sm: 1px;
	--border-width-md: 2px;
	--border-default: var(--border-width-sm) solid var(--color-border);
	--border-strong: var(--border-width-sm) solid var(--color-border-strong);

	/* Transitions — spring-style ease-out, never `transition: all` (project guardrail) */
	--duration-fast: 120ms;
	--duration-base: 180ms;
	--duration-slow: 280ms;
	--ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);

	/* Z-index scale */
	--z-base: 0;
	--z-raised: 10;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-overlay: 300;
	--z-modal: 400;
	--z-toast: 500;
	--z-tooltip: 600;

	/* Icon sizing */
	--icon-xs: 14px;
	--icon-sm: 16px;
	--icon-md: 20px;
	--icon-lg: 24px;
	--icon-xl: 32px;

	/* Layout */
	--container-max: 1320px;
	--container-narrow: 720px;
	--container-pad-mobile: var(--space-4);
	--container-pad-tablet: var(--space-6);
	--container-pad-desktop: var(--space-8);

	/* Comfortable long-form reading width — one value for every place body
	   copy/prose appears (static pages, product description/spec/review
	   tabs, archive intro text). Phase 3I: previously 60ch/68ch/70ch/72ch/
	   80ch were each used in a different stylesheet with no documented
	   standard (docs/SPACING-SYSTEM-AUDIT.md) — 70ch was already the most
	   common value and sits in the generally-recommended 60–75 characters-
	   per-line range, so it was promoted to a token instead of picking a
	   new number. */
	--reading-width: 70ch;
}

/*
 * Breakpoints — reference only. CSS custom properties cannot drive @media
 * conditions without a build step, so these are not consumable as var() —
 * every component file below reuses these exact literal px values so the
 * scale stays consistent project-wide (docs/COMPONENT-LIBRARY.md).
 *
 *   xs:   360px  (small phones)
 *   sm:   480px
 *   md:   768px  (tablet — docs/DESIGN-SYSTEM.md §4)
 *   lg:   1024px (desktop — docs/DESIGN-SYSTEM.md §4)
 *   xl:   1280px
 *   xxl:  1440px (wide desktop — docs/DESIGN-SYSTEM.md §4)
 */