/* =====================
   GLOBAL TYPOGRAPHY SYSTEM
===================== */

:root {
  /* Font Families Unified */
  --font-serif: "SVN-Ginger", serif;
  --font-sans: "Outfit", sans-serif;

  /* Legacy Font Fallbacks */
  --serif: var(--font-serif);
  --sans: var(--font-sans);

  /* Typography Scale (5 Sizes with Fluid Responsiveness) */
  --text-caption: 14px; /* Menu, Chú thích, Nút bấm */
  --text-body: 16px;    /* Văn bản chính */
  --text-lead: clamp(18px, 2vw, 24px);    /* Tiêu đề phụ, Lead */
  --text-heading: clamp(32px, 4vw, 48px); /* Tiêu đề H2, H3 */
  --text-hero: clamp(48px, 6vw, 80px);    /* Chữ siêu lớn đầu trang */
}

/* Base Typographic Classes */
.font-serif {
  font-family: var(--font-serif) !important;
}

.font-sans {
  font-family: var(--font-sans) !important;
}

.text-caption { font-size: var(--text-caption); }
.text-body { font-size: var(--text-body); }
.text-lead { font-size: var(--text-lead); }
.text-heading { font-size: var(--text-heading); }
.text-hero { font-size: var(--text-hero); }