/* =========================================
   NBA Quizzes — Font Definitions
   nba-fonts.css
   ========================================= */

/* Google Fonts are loaded via <link> in HTML.
   This file defines all custom font-stack overrides,
   typographic scale, and text-utility classes. */

/* ── Base typographic scale ──────────────── */
.t-display {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.05em;
}
.t-heading {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
}
.t-body {
  font-family: 'Montserrat', sans-serif;
}

/* ── Size utilities ──────────────────────── */
.fs-xs  { font-size: 0.72rem; }
.fs-sm  { font-size: 0.85rem; }
.fs-md  { font-size: 1rem; }
.fs-lg  { font-size: 1.2rem; }
.fs-xl  { font-size: 1.6rem; }
.fs-2xl { font-size: 2rem; }
.fs-3xl { font-size: 2.8rem; }
.fs-4xl { font-size: 3.6rem; }
.fs-5xl { font-size: 4.5rem; }
.fs-6xl { font-size: 5.5rem; }

/* ── Weight utilities ────────────────────── */
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* ── Letter spacing ──────────────────────── */
.ls-tight  { letter-spacing: -0.02em; }
.ls-normal { letter-spacing: 0; }
.ls-wide   { letter-spacing: 0.06em; }
.ls-wider  { letter-spacing: 0.12em; }
.ls-widest { letter-spacing: 0.2em; }

/* ── Text transforms ─────────────────────── */
.tt-upper { text-transform: uppercase; }
.tt-lower { text-transform: lowercase; }
.tt-cap   { text-transform: capitalize; }

/* ── Line heights ────────────────────────── */
.lh-tight  { line-height: 1.1; }
.lh-snug   { line-height: 1.3; }
.lh-normal { line-height: 1.5; }
.lh-relaxed { line-height: 1.7; }
.lh-loose  { line-height: 2; }

/* ── Decorative text elements ────────────── */
.text-gradient-orange {
  background: linear-gradient(135deg, #F26522, #ff8c4a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-blue {
  background: linear-gradient(135deg, #1D428A, #4a7cc7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-stroke {
  -webkit-text-stroke: 2px rgba(255,255,255,0.6);
  -webkit-text-fill-color: transparent;
}
.text-stroke-orange {
  -webkit-text-stroke: 2px #F26522;
  -webkit-text-fill-color: transparent;
}

/* ── Highlight ───────────────────────────── */
.highlight {
  position: relative;
  display: inline-block;
}
.highlight::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 4px;
  background: #F26522;
  opacity: 0.5;
  border-radius: 2px;
}

/* ── Tag / pill ──────────────────────────── */
.tag {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
}
.tag-orange { background: rgba(242,101,34,0.15); color: #F26522; }
.tag-blue   { background: rgba(29,66,138,0.3); color: #6fa3e0; }
.tag-red    { background: rgba(200,16,46,0.15); color: #ff6b7a; }
.tag-green  { background: rgba(46,204,113,0.12); color: #2ecc71; }