/**
 * typography.css
 * Font loading and type-scale application only.
 * Color, spacing, and component styling live in their own files.
 *
 * Fonts are loaded from Google Fonts here for development convenience.
 * Phase 24 (PWA / offline) will vendor these into /fonts and switch
 * these @import lines for local @font-face rules so the app works
 * fully offline — nothing else in the codebase needs to change when
 * that happens.
 */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600&family=Vazirmatn:wght@400;500;700&display=swap');

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

html[lang='fa'] body {
  font-family: var(--font-fa);
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

html[lang='fa'] h1,
html[lang='fa'] h2,
html[lang='fa'] h3,
html[lang='fa'] .font-display {
  /* Orbitron has no Persian glyphs; fall back to the Persian body face
     for headings so Farsi UI never silently renders in a Latin font. */
  font-family: var(--font-fa);
  letter-spacing: 0;
  font-weight: 700;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

small, .text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

/* Tabular numerals for ratings/runtime so columns of numbers align */
.font-numeric {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}