/* ═══════════════════════════════════════════
   WV TYPOGRAPHY — Global type classes
   ═══════════════════════════════════════════

   Authoritative source: Woodstock Vitamins Website Style Guide
   Designer sign-off: April 2026

   Additive system — does not replace existing component-specific
   heading styles. New page templates should use these classes
   instead of defining one-off heading styles per component.

   All values derived from wv-tokens.css variables.
   Do not hardcode font values — always use token variables.
   Do not modify without updating the style guide page first.
   ═══════════════════════════════════════════ */


/* ════════════════════════════════
   HEADINGS
   ════════════════════════════════ */

/* ── .wv-h1 — Page titles ──
   General Grotesque, Light 300, 70px
   Used for: hero headings, major page titles
*/
.wv-h1 {
  font-family: var(--wv-font-primary);
  font-weight: 300;
  font-size: 70px;
  line-height: var(--wv-leading-tight);
  letter-spacing: var(--wv-tracking-tight);
  color: var(--wv-color-text-primary);
  margin: 0;
}

/* ── .wv-h2 — Section headings ──
   General Grotesque, Regular 400, 40px
*/
.wv-h2 {
  font-family: var(--wv-font-primary);
  font-weight: 400;
  font-size: 40px;
  line-height: var(--wv-leading-tight);
  letter-spacing: var(--wv-tracking-tight);
  color: var(--wv-color-text-primary);
  margin: 0;
}

/* ── .wv-h3 — Subsection / card headings ──
   General Grotesque, Light 300, 40px
*/
.wv-h3 {
  font-family: var(--wv-font-primary);
  font-weight: 300;
  font-size: 40px;
  line-height: 1.75;
  letter-spacing: 0;
  color: var(--wv-color-text-primary);
  margin: 0;
}

/* ── .wv-h4 — Product / feature headings ──
   General Grotesque, Bold 700, 50px
   Used for: product names, large bold callouts
*/
.wv-h4 {
  font-family: var(--wv-font-primary);
  font-weight: 700;
  font-size: 50px;
  line-height: var(--wv-leading-tight);
  letter-spacing: var(--wv-tracking-tight);
  color: var(--wv-color-text-primary);
  margin: 0;
}

/* ── .wv-h5 — Paragraph / section headings ──
   General Grotesque, Regular 400, 24px
   Used for: policy body sections, paragraph-level headings
*/
.wv-h5 {
  font-family: var(--wv-font-primary);
  font-weight: 400;
  font-size: 24px;
  line-height: var(--wv-leading-tight);
  letter-spacing: var(--wv-tracking-tight);
  color: var(--wv-color-text-primary);
  margin: 0;
}

/* ── .wv-h6 — Small headings / compact labels ──
   General Grotesque, Demi 600, 16px
   Used for: tab labels, policy section headings, contact block titles
*/
.wv-h6 {
  font-family: var(--wv-font-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: var(--wv-tracking-tight);
  color: var(--wv-color-text-primary);
  margin: 0;
}

/* ── .wv-h-serif — Serif display heading ──
   Office Times Round, Regular 400, 55px
   Used for: quiz card, large display contexts
*/
.wv-h-serif {
  font-family: var(--wv-font-serif);
  font-weight: 400;
  font-size: 55px;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--wv-color-text-primary);
  margin: 0;
}

/* ── .wv-h-quiz — Quiz card heading ──
   Office Times Round, Regular 400, 48px
*/
.wv-h-quiz {
  font-family: var(--wv-font-serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--wv-color-text-primary);
  margin: 0;
}

/* ── .wv-eyebrow — Section context labels ──
   General Grotesque, Medium 500, 11px uppercase
   Used for: "Support", "In person", "Self-service"
*/
.wv-eyebrow {
  font-family: var(--wv-font-primary);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: var(--wv-tracking-wide);
  text-transform: uppercase;
  color: var(--wv-color-text-secondary);
  margin: 0;
}


/* ════════════════════════════════
   BODY
   ════════════════════════════════ */

/* ── .wv-body-lg — Lead / intro paragraph ──
   General Grotesque, Regular 400, 18px
   Used for: hero subheadlines, section intro copy
*/
.wv-body-lg {
  font-family: var(--wv-font-primary);
  font-weight: 400;
  font-size: 18px;
  line-height: var(--wv-leading-normal);
  letter-spacing: var(--wv-tracking-tight);
  color: var(--wv-color-text-secondary);
  margin: 0;
}

/* ── .wv-body — Standard body text ──
   General Grotesque, Regular 400, 14px
   Used for: paragraph text, descriptions, policies, form help text
*/
.wv-body {
  font-family: var(--wv-font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: var(--wv-tracking-tight);
  color: var(--wv-color-text-secondary);
  margin: 0;
}

/* ── .wv-body-bold — Emphasized body text ──
   General Grotesque, Demi 600, 18px
   Used for: inline emphasis, callout text within body copy
*/
.wv-body-bold {
  font-family: var(--wv-font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: var(--wv-leading-normal);
  letter-spacing: var(--wv-tracking-tight);
  color: var(--wv-color-text-secondary);
  margin: 0;
}

/* ── .wv-body-sm — Small supporting text ──
   General Grotesque, Regular 400, 12px
   Used for: captions, disclaimers, small notes
*/
.wv-body-sm {
  font-family: var(--wv-font-primary);
  font-weight: 400;
  font-size: 12px;
  line-height: var(--wv-leading-loose);
  color: var(--wv-color-text-secondary);
  margin: 0;
}


/* ════════════════════════════════
   LABELS
   ════════════════════════════════ */

/* ── .wv-label / .wv-label-reg — UI labels ──
   General Grotesque, Medium 500, 11px uppercase
   Used for: status pills, table headers, trust bar, badges
   .wv-label kept for backwards compatibility
*/
.wv-label,
.wv-label-reg {
  font-family: var(--wv-font-primary);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wv-color-text-secondary);
  margin: 0;
}

/* ── .wv-label-nav — Navigation labels ──
   General Grotesque, Demi 600, 15px
   Used for: "On This Page", breadcrumbs, page nav headers
*/
.wv-label-nav {
  font-family: var(--wv-font-primary);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: var(--wv-tracking-tight);
  color: var(--wv-color-text-primary);
  margin: 0;
}

/* ── .wv-label-btn — Button labels ──
   General Grotesque (not mono), Regular 400, 15px uppercase
   Used for: Add to Cart, primary CTAs, nav button text
   Note: uses --wv-font-primary not --wv-font-mono
*/
.wv-label-btn {
  font-family: var(--wv-font-primary);
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  letter-spacing: var(--wv-tracking-tight);
  text-transform: uppercase;
  color: var(--wv-color-text-primary);
  margin: 0;
}