/*
 * Base layer: reset, typography, containers, grid, spacing, focus, motion.
 * Mobile-first: unconditional rules target the 390px mobile reference (responsive-spec.md);
 * min-width media queries layer on tablet (768px) / desktop (1024px+) per DEVELOPMENT_RULES.md §9.
 * All values reference tokens.css custom properties — see DESIGN_RULES.md §1 (never hardcode).
 */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}
img, picture, video { display: block; max-width: 100%; height: auto; }
/* svg is deliberately excluded from the max-width:100% reset above: nested inside a flex
   container (e.g. .icon-btn in the header), a percentage max-width on an SVG can resolve
   against the wrong containing-block pass and collapse it to a few px — every icon SVG in
   this theme sets its own explicit width/height instead (components.css), so it doesn't need
   the responsive-image reset. Confirmed via live DOM testing during Milestone 1 QA. */
svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }

/* ---------- Responsive type scale ----------
 * Art-direction pass 2026-08-13: scaled up across the board — the mockups' whole premise is
 * "typography becomes the hero, headlines dominate sections" (repeated verbatim across three
 * separate direction messages), and the previous scale (44px desktop H1) read as a standard
 * WooCommerce/blog heading size next to the mockups' oversized editorial-serif headlines.
 * Line-height-heading also tightened in tokens.css to suit larger display type (loose leading
 * reads awkward at this size — standard editorial-serif practice). */
:root {
  --font-size-h1: 36px;
  --font-size-h2: 26px;
  --font-size-h3: 20px;
  --font-size-body: 15px;
  --font-size-label: 11px;
}
@media (min-width: 1024px) {
  :root {
    --font-size-h1: 64px;
    --font-size-h2: 38px;
    --font-size-h3: 24px;
    --font-size-body: 16px;
    --font-size-label: 12px;
  }
}

h1, .h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-heading);
}
h2, .h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-heading);
}
h3, .h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-heading);
}
body, p, .body-text {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}
strong, b, .text-emphasis { font-weight: var(--font-weight-emphasis); }
.label, .eyebrow {
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-muted);
}
.wordmark {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wordmark);
}

/* ---------- Containers & grid ---------- */
.container {
  width: 100%;
  max-width: var(--breakpoint-xl);
  margin-inline: auto;
  padding-inline: var(--space-5); /* 20px mobile — DESIGN_RULES §4 page side padding */
}
@media (min-width: 768px) {
  .container { padding-inline: var(--space-7); } /* 32px tablet */
}
@media (min-width: 1024px) {
  .container { padding-inline: var(--space-9); } /* 60px desktop */
}

.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(1, 1fr); }
.grid--4 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
/* Product-card grids: 2-col mobile → 3-col tablet/desktop (DESIGN_RULES §12), wider gap
 * per §4/§7. Bug fix 2026-07-22 (Milestone 2A QA): this utility only ever set `gap` and was
 * never given a column template, because Milestone 1 built it without a real product grid to
 * exercise it — with no `grid-template-columns`, cards stacked one-per-row at full container
 * width, ballooning the Best Sellers section to ~5000px tall. Caught in live browser QA. */
.grid--cards {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4); /* 16px mobile */
}
@media (min-width: 768px) {
  .grid--cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid--cards { gap: var(--space-7); } /* 32px desktop */
}

/* ---------- Global spacing utility (scale only — DESIGN_RULES §4) ---------- */
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-7); }

/* ---------- Focus states (accessibility-spec.md / DESIGN_RULES §11) ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-action-primary);
  outline-offset: 2px;
  border-radius: var(--radius-small);
}

/* ---------- Reduced motion (DESIGN_RULES §9 motion ceiling applies only when motion is allowed at all) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Screen-reader only utility (used by skip link, live regions) ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  background: var(--color-background-accent);
  color: var(--color-text-on-accent);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-small);
  z-index: var(--z-toast);
  transition: top var(--animation-duration) var(--animation-easing);
}
.skip-link:focus-visible {
  top: var(--space-4);
}