/* ============================================================
   VietnameseTypographyFixes.css
   Global Vietnamese typography guard — loaded LAST in App.razor.

   Strategy:
   - "Be Vietnam Pro" for ALL text that may contain Vietnamese
     (labels, tags, descriptions, buttons, meta, flow text)
   - Monospace ONLY for pure numeric/code displays
     (timers, countdowns, word-count numbers)
   - letter-spacing: 0 globally to prevent diacritics from splitting

   This file uses high-specificity selectors + !important to
   override any JetBrains Mono usage in page-specific CSS files.
============================================================ */

:root {
    --font-vietnamese-ui: "Be Vietnam Pro", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-vietnamese-display: "Be Vietnam Pro", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-vietnamese-mono: "Cascadia Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;

    --font-sans: var(--font-vietnamese-ui);
    --font-primary: var(--font-vietnamese-ui);
    --font-heading: var(--font-vietnamese-display);
    --test-font-ui: var(--font-vietnamese-ui);
    --test-font-passage: var(--font-vietnamese-ui);
}

html,
body {
    font-family: var(--font-vietnamese-ui);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Kill letter-spacing globally — prevents diacritics from splitting */
body * {
    letter-spacing: 0 !important;
}

/* Form elements inherit parent font */
body button,
body input,
body select,
body textarea,
body optgroup {
    font-family: inherit;
}

/* Headings and display text */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    font-family: var(--font-vietnamese-display) !important;
}

/* ============================================================
   Monospace — ONLY for pure numeric/code displays.
   These elements never contain Vietnamese text.
============================================================ */
body code,
body kbd,
body samp,
body pre,
body .mono,
body .timer-display,
body .countdown,
body .ct-v,
body .ct-l,
body .wc-l {
    font-family: var(--font-vietnamese-mono) !important;
}

/* ============================================================
   Vietnamese-safe overrides — high specificity to beat
   page-specific CSS that sets JetBrains Mono on UI elements.

   Rule: if an element can display localized text (Vietnamese),
   it MUST use Be Vietnam Pro, not monospace.
============================================================ */

/* Tags, badges, kickers, pills, chips
   e.g. "TỰ CHỌN", "NGẪU NHIÊN", "ĐỀ XUẤT CHO BẠN" */
body [class*="tag"],
body [class*="badge"],
body [class*="kicker"],
body [class*="pill"],
body [class*="chip"] {
    font-family: var(--font-vietnamese-ui) !important;
}

/* Meta info, descriptions, subtitles
   e.g. "12' · ~10 câu", "5 modules đã chọn" */
body [class*="meta"],
body [class*="desc"],
body [class*="subtitle"],
body [class*="-sub"] {
    font-family: var(--font-vietnamese-ui) !important;
}

/* Flow/sequence indicators
   e.g. "Speaking → Grammar → Listening" */
body [class*="flow"],
body [class*="step"],
body [class*="sequence"] {
    font-family: var(--font-vietnamese-ui) !important;
}

/* Stats, summary, footer text
   e.g. "Tổng ~2h 39'", "~100 câu" */
body [class*="stats"],
body [class*="summary"]:not(summary),
body [class*="foot"] {
    font-family: var(--font-vietnamese-ui) !important;
}

/* Buttons, CTAs */
body [class*="cta"],
body [class*="btn"],
body [class*="button"] {
    font-family: var(--font-vietnamese-ui) !important;
}

/* Filter, section, tab labels */
body [class*="filter"],
body [class*="section"],
body [class*="tab"] {
    font-family: var(--font-vietnamese-ui) !important;
}

/* Reset, action, link elements */
body [class*="reset"],
body [class*="action"] {
    font-family: var(--font-vietnamese-ui) !important;
}

/* Format labels, notices, hints
   e.g. "Part 1", "Câu 1-5", "Lưu ý" */
body [class*="format"],
body [class*="notice"],
body [class*="hint"] {
    font-family: var(--font-vietnamese-ui) !important;
}

/* Titles, headings, names, labels */
body [class*="title"],
body [class*="heading"],
body [class*="headline"],
body [class*="hero"],
body [class*="name"],
body [class*="label"],
body [class*="value"] {
    font-family: var(--font-vietnamese-display) !important;
}

/* Score cards, progress indicators */
body [class*="score"],
body [class*="progress"] {
    font-family: var(--font-vietnamese-ui) !important;
}

/* Toolbar labels */
body [class*="toolbar"] {
    font-family: var(--font-vietnamese-ui) !important;
}

/* Part tabs and question labels */
body [class*="part-tab"],
body [class*="part-btn"],
body [class*="question"] {
    font-family: var(--font-vietnamese-ui) !important;
}

/* Preview elements in Practice page */
body [class*="preview"] {
    font-family: var(--font-vietnamese-ui) !important;
}

/* Card elements */
body [class*="card"] {
    font-family: var(--font-vietnamese-ui) !important;
}

/* Module elements */
body [class*="module"] {
    font-family: var(--font-vietnamese-ui) !important;
}

/* Path elements */
body [class*="path"] {
    font-family: var(--font-vietnamese-ui) !important;
}

/* Builder elements */
body [class*="builder"] {
    font-family: var(--font-vietnamese-ui) !important;
}

/* Count displays — these are numeric but may have Vietnamese suffix */
body [class*="count"] {
    font-family: var(--font-vietnamese-ui) !important;
}