/**
 * === Design Tokens Typography v5 — Final Limited System ===
 *
 * Mô tả: Source of truth duy nhất cho toàn bộ typography tokens.
 *        2 fonts + 13 size tokens + 4 weights + 4 line-heights + 4 letter-spacings.
 *        Tách khỏi design-tokens.css để dễ maintain và reference độc lập.
 *
 * Flow:
 *   1. Load font families (2 only — primary 99% + accent < 1%)
 *   2. Load 13 size tokens theo use-case cụ thể (không phải generic scale)
 *   3. Load 4 weight tokens (giới hạn — không dùng 300/800/900)
 *   4. Load 4 line-height tokens theo context display/heading/UI/body
 *   5. Load 4 letter-spacing tokens
 *
 * Use-case matrix: xem phase-00b-typography-design-system.md § Use-Case Mapping Matrix
 * Customizer overrides: xem inc/design-system/class-design-system.php
 *
 * IMPORTANT: Không thêm token mới mà không có approval.
 *            Mọi typography mới phải pick từ 13 size tokens có sẵn.
 */

:root {
  /* =========================================================
     Font Families (2 only — giới hạn tuyệt đối)
     primary: Be Vietnam Pro — render Vietnamese tốt, free, modern sans
     accent:  Merriweather  — rare quote/emphasis (< 1% UI), serif thuần
     FIX: Old theme dùng "Merriweather Sans" với fallback serif — bug đã sửa
     ========================================================= */
  --font-primary: "Be Vietnam Pro", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent:  "Merriweather", Georgia, serif;
  --font-thuanhai-heading: "Montserrat", sans-serif;

  /* =========================================================
     13 Size Tokens — mỗi token = 1 use-case UI cụ thể
     Fluid clamp: min(mobile) → preferred(fluid) → max(desktop)
     ========================================================= */

  /* Hero H1 homepage — "Sáng Y đức..." — dùng DUY NHẤT 1 chỗ */
  --text-hero-h1:    clamp(40px, 6vw, 72px);

  /* H1 page hero — archive, single post page title */
  --text-display:    clamp(32px, 4vw, 56px);

  /* H2 section — "Tin tức & Hoạt động", "Dịch vụ y tế"... */
  --text-section-h2: clamp(28px, 3.5vw, 44px);

  /* H3 card — post card title, service card, doctor card */
  --text-card-h3:    clamp(20px, 2vw, 28px);

  /* H4 sub-section — accordion question, sidebar heading */
  --text-h4:         clamp(18px, 1.5vw, 22px);

  /* Hero intro paragraph, lead text — body-lg dẫn dắt */
  --text-body-lg:    clamp(16px, 1.2vw, 18px);

  /* Body text default — paragraph, card body (fixed, không fluid) */
  --text-body:       15px;

  /* Meta info — date, category label, card footer, news date */
  --text-caption:    13px;

  /* Eyebrow labels, copyright, footer fine print */
  --text-micro:      12px;

  /* All button labels — CTA pill, link button (same as body intentionally) */
  --text-button:     15px;

  /* Navigation menu items */
  --text-nav:        14px;

  /* Stat overlay big number — "10,000+" hero stats */
  --text-stat-lg:    clamp(32px, 3vw, 44px);

  /* Stat mini — col 3 image card stat block */
  --text-stat-sm:    clamp(24px, 2vw, 32px);

  /* =========================================================
     Weight Scale (4 only — giới hạn tuyệt đối)
     KHÔNG dùng: 300 (light), 800, 900 — không load font file thêm
     ========================================================= */
  --weight-regular:  400;  /* Body text, paragraph default */
  --weight-medium:   500;  /* Subtitles, chip labels, nav links, eyebrow */
  --weight-semibold: 600;  /* Button labels, card H3, CTA labels */
  --weight-bold:     700;  /* H1 hero, H2 section, stat numbers */

  /* =========================================================
     Line-Height (4 only — theo visual context)
     ========================================================= */
  --lh-tight:   1.1;   /* H1 hero display — compact, impactful */
  --lh-heading: 1.25;  /* H2-H3 sections — readable heading */
  --lh-snug:    1.45;  /* UI elements — buttons, chips, nav, small headings */
  --lh-body:    1.65;  /* Paragraph body — comfortable long-form reading */

  /* =========================================================
     Letter-Spacing (4 only — theo visual context)
     ========================================================= */
  --tracking-heading: -0.015em;  /* H1, H2 — tight tracking cho large text */
  --tracking-normal:   0;         /* Body text, default (no override needed) */
  --tracking-button:   0.02em;   /* Button labels — slight wide cho clarity */
  --tracking-eyebrow:  0.08em;   /* Eyebrow / UPPERCASE labels — wide tracking */
}