/*
 * Typography — font scale, headings, body text, lead paragraphs, eyebrow labels.
 * Depends on: variables.css, base.css
 *
 * @package Vinelec
 */

/* =================================================================
   HEADINGS
   ================================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--clr-white);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: clamp(20px, 2vw, 26px); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

/* =================================================================
   HERO TITLE (overrides h1 defaults)
   ================================================================= */

.title {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: 26px;
}

.title .accent {
  color: var(--clr-primary);
}

/* =================================================================
   LEAD PARAGRAPH
   ================================================================= */

.lead {
  max-width: 480px;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--clr-text);
  font-weight: var(--fw-regular);
  margin-bottom: var(--space-lg);
}

/* =================================================================
   EYEBROW LABEL
   ================================================================= */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--clr-primary-soft);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--clr-primary-soft);
  flex-shrink: 0;
}

/* =================================================================
   BODY TEXT HELPERS
   ================================================================= */

.text-muted   { color: var(--clr-muted); }
.text-light   { color: var(--clr-text-light); }
.text-primary { color: var(--clr-primary-soft); }
.text-accent  { color: var(--clr-accent); }

/* =================================================================
   STAT NUMBERS
   ================================================================= */

.stat .num {
  font-family: var(--font-heading);
  font-size: var(--fs-stat);
  font-weight: var(--fw-medium);
  line-height: 1;
  margin-bottom: var(--fs-xs);
  letter-spacing: -0.01em;
}

.stat .num.is-green {
  color: var(--clr-accent);
}

.stat .lbl {
  font-size: 13.5px;
  line-height: var(--lh-normal);
  color: var(--clr-text);
}