/**
 * === Typography Utility Classes ===
 *
 * Mô tả: Helper classes áp dụng trực tiếp use-case typography tokens lên element.
 *        Mỗi class bundle đầy đủ: font + size + weight + line-height + tracking
 *        theo use-case matrix trong docs/design/typography-use-case-matrix.md.
 *        Optional — semantic CSS với token trong component files được ưu tiên hơn.
 *
 * Flow:
 *   1. Load sau design-tokens-typography.css (dependency chain)
 *   2. Apply class trực tiếp lên HTML element để override computed font
 *   3. Mỗi class là independent — không inherit từ class khác
 *
 * @package BVYHCT
 */

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

/**
 * Hero H1 — duy nhất 1 chỗ trên homepage hero
 */
.text-hero-h1 {
  font-family: var(--font-primary);
  font-size: var(--text-hero-h1);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
}

/**
 * Display — H1 page hero (archive, single)
 */
.text-display {
  font-family: var(--font-primary);
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
}

/**
 * Section H2 — tiêu đề section lớn
 */
.text-section-h2 {
  font-family: var(--font-primary);
  font-size: var(--text-section-h2);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
}

/**
 * Card H3 — tiêu đề card, service card, post card
 */
.text-card-h3 {
  font-family: var(--font-primary);
  font-size: var(--text-card-h3);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-normal);
}

/**
 * H4 — sub-section, FAQ question, accordion
 */
.text-h4 {
  font-family: var(--font-primary);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-normal);
}

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

/**
 * Body Large — hero intro paragraph, lead text
 */
.text-body-lg {
  font-family: var(--font-primary);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-normal);
}

/**
 * Body — paragraph mặc định, card body
 */
.text-body {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-normal);
}

/**
 * Caption — meta info, date, category, card footer
 */
.text-caption {
  font-family: var(--font-primary);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
}

/* ============================================================
   SPECIAL USE-CASE
   ============================================================ */

/**
 * Eyebrow — uppercase label trên heading, chip badge
 */
.text-eyebrow {
  font-family: var(--font-primary);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/**
 * Button — tất cả CTA labels
 */
.text-button {
  font-family: var(--font-primary);
  font-size: var(--text-button);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-button);
}

/**
 * Nav — navigation menu items, tab pill labels
 */
.text-nav {
  font-family: var(--font-primary);
  font-size: var(--text-nav);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
}

/**
 * Stat number — big stats overlay ("10,000+")
 */
.text-stat {
  font-family: var(--font-primary);
  font-size: var(--text-stat-lg);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.02em;
}

/**
 * Stat small — col-3 mini stats
 */
.text-stat-sm {
  font-family: var(--font-primary);
  font-size: var(--text-stat-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.02em;
}

/**
 * Accent quote — RARE italic quote, emphasis (dùng Merriweather)
 */
.text-accent-quote {
  font-family: var(--font-accent);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-normal);
  font-style: italic;
}