:root {
  --font-display: 'Oxanium', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-ar: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-hud: var(--font-display);
  --font-heading: var(--font-display);
  --font-ui: var(--font-display);
  --font-pixel: var(--font-display);
}

html {
  font-family: var(--font-body);
}

[dir='rtl'] body {
  font-family: var(--font-ar);
}

h1, h2, h3, h4, h5, h6,
.display-md,
.page-heading-pixel,
.card-title,
.btn-arena,
.stat-number,
.sidebar-item span,
.brand-name,
.hero-headline,
.section-title,
.nav-label {
  font-family: var(--font-display);
}

[dir='rtl'] h1,
[dir='rtl'] h2,
[dir='rtl'] h3,
[dir='rtl'] .hero-headline,
[dir='rtl'] .section-title,
[dir='rtl'] .card-title {
  font-family: var(--font-ar);
}

.stat-number,
.score-value,
.rank-points {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

// Bootstrap's default .text-muted is too dark on the arena background.
.text-muted {
  color: #FFFFFF !important;
}
