/*
 * Reset + complete typography implementation (Phase 3A — docs/COMPONENT-LIBRARY.md).
 * Every rule here references assets/css/tokens.css — no hardcoded colour,
 * size, spacing, or font value. Component-specific styling lives in
 * assets/css/components/*.css and assets/css/layout.css, not here.
 */

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

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

body {
	margin: 0;
	background: var(--color-surface-sunken);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
}

img, svg, video, canvas { display: block; max-width: 100%; }

/* --- Headings --- */

h1, h2, h3,
.bholats-display-xl, .bholats-display-lg,
.bholats-h1, .bholats-h2, .bholats-h3, .bholats-h4, .bholats-h5, .bholats-h6 {
	font-family: var(--font-display);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-4);
}

.bholats-display-xl { font-size: var(--text-display-xl); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.bholats-display-lg { font-size: var(--text-display-lg); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }

/* h1/h2 use the same bold weight + tight tracking as .bholats-display-lg —
   this is the site's one "page/section title" treatment (Phase 3I —
   docs/UI-DESIGN-AUDIT.md). Previously only a bare `h1`/`h2` selector, at
   the lighter semibold/tracking-snug weight below, meaning any page that
   never added its own override (the Shop/category/brand/search archives,
   built in Phase 3D before the bolder treatment existed) rendered a
   visibly smaller, lighter page title than Cart/Account/single-product/
   static pages — confirmed via side-by-side screenshot comparison, not
   assumed. Promoting the bold treatment here, instead of leaving it
   duplicated across account.css/cart.css/static-pages.css, is the fix:
   every page now gets it by default, and those three files' now-redundant
   overrides were removed. */
h1, .bholats-h1 { font-size: var(--text-display-lg); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h2, .bholats-h2 { font-size: var(--text-h2); font-weight: var(--font-weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
h3, .bholats-h3 { font-size: var(--text-h3); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); font-family: var(--font-body); }

/* h4-h6 use the body face — display face is reserved for identity moments
   (H1-H3) per docs/DESIGN-SYSTEM.md §0; smaller headings are UI-density text. */
h4, .bholats-h4 { font-size: var(--text-h4); line-height: var(--leading-snug); font-family: var(--font-body); font-weight: var(--font-weight-semibold); }
h5, .bholats-h5 { font-size: var(--text-h5); line-height: var(--leading-normal); font-family: var(--font-body); font-weight: var(--font-weight-semibold); }
h6, .bholats-h6 {
	font-size: var(--text-h6);
	line-height: var(--leading-normal);
	font-family: var(--font-body);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--color-text-secondary);
}

/* --- Body text roles --- */

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

.bholats-text-sm { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.bholats-text-xs { font-size: var(--text-xs); line-height: var(--leading-normal); }

.bholats-caption {
	font-size: var(--text-caption);
	line-height: var(--leading-normal);
	color: var(--color-text-secondary);
}

.bholats-helper-text {
	font-size: var(--text-helper);
	line-height: var(--leading-normal);
	color: var(--color-text-secondary);
	display: block;
	margin-top: var(--space-2);
}

.bholats-helper-text--error { color: var(--color-error); }
.bholats-helper-text--success { color: var(--color-success); }

/* --- Data / technical text --- */

.bholats-data-text {
	font-family: var(--font-data);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-normal);
}

/* --- Price & specification typography (also see components/commerce.css for
   the full priced/discount/savings component markup) --- */

.bholats-price-lg {
	font-family: var(--font-body);
	font-size: var(--text-price-lg);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	font-variant-numeric: tabular-nums;
}

.bholats-price-card {
	font-family: var(--font-body);
	font-size: var(--text-price-card);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	font-variant-numeric: tabular-nums;
}

.bholats-price-sm {
	font-family: var(--font-body);
	font-size: var(--text-price-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	font-variant-numeric: tabular-nums;
}

.bholats-spec-label {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	font-weight: var(--font-weight-regular);
}

.bholats-spec-value {
	font-family: var(--font-data);
	font-size: var(--text-sm);
	color: var(--color-text-primary);
}

/* --- Button typography (shared by every button variant in components/buttons.css) --- */

.bholats-btn-text {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	letter-spacing: var(--tracking-normal);
}

/* --- Links & focus --- */

/* --color-brand-blue on --color-surface-sunken measures 4.45:1 — just under
   WCAG AA's 4.5:1 for normal text (confirmed via axe-core, docs/FOUNDATION-QA.md).
   --color-brand-deep (12.8:1 on the same background) is used for body-copy
   links instead; --color-brand-blue remains correct for buttons/CTAs, where
   it sits behind white text at high contrast, not as text-on-light itself. */
a { color: var(--color-brand-deep); }

/* Shared focus-visible ring for every interactive element project-wide —
   component files must not redefine or suppress this. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/* --- Shared animation primitives (referenced by buttons.css, feedback.css —
   defined once here so no component file duplicates a @keyframes rule) --- */

@keyframes bholats-spin {
	to { transform: rotate(360deg); }
}

@keyframes bholats-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

@keyframes bholats-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* --- Reduced motion (respected project-wide, per docs/DESIGN-SYSTEM.md) --- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Utility (page-shell only — not a component) --- */

.bholats-main {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-6) var(--space-4);
}

.bholats-dev-note {
	background: var(--color-warning-bg);
	color: var(--color-warning);
	border: var(--border-width-sm) solid var(--color-warning);
	border-radius: var(--radius-sm);
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-sm);
	margin-bottom: var(--space-6);
}