/* ═══════════════════════════════════════════════════════
   FONTS.CSS
   Google Fonts import · Font variables · Base typography
   To swap fonts — edit only this file.
═══════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:ital,wght@0,300;0,400;0,600;0,700;1,400&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap");

/* ── FONT VARIABLES ──────────────────────────────────── */
:root {
  --font-display: "Bebas Neue", sans-serif;   /* headlines, scores, display text */
  --font-body:    "Barlow Condensed", sans-serif; /* body copy, nav, labels */
  --font-serif:   "DM Serif Display", serif;  /* italic accents, pull quotes */
  --font-mono:    "JetBrains Mono", monospace; /* badges, timestamps, meta */
}

/* ── TYPE SCALE ──────────────────────────────────────── */
:root {
  /* Fixed sizes */
  --fs-micro:   9px;   /* odds-footer, banner-label */
  --fs-xs:     10px;   /* ticker-sport, game-live-badge */
  --fs-sm:     11px;   /* sidebar meta, small mono labels */
  --fs-caption:12px;   /* pagination, filter buttons, sb-detail */
  --fs-sub:    13px;   /* banner-sub, footer-links */
  --fs-label:  14px;   /* badges, timestamps, nav buttons — самый частый */
  --fs-desc:   15px;   /* hero-desc */
  --fs-ticker: 16px;   /* ticker items, body base */
  --fs-body:   18px;   /* body copy, poll options, descriptions */
  --fs-player: 20px;   /* top-player-name, nav-picks icon */
  --fs-title:  22px;   /* card titles, widget headers */
  --fs-heading:24px;   /* section-title mobile */
  --fs-score:  26px;   /* game-team-score, otd-year */
  --fs-display:28px;   /* widget-header, must-watch-time */
  --fs-section:30px;   /* section-title desktop, tp-val */
  --fs-stat:   36px;   /* persona-stat-val */
  --fs-name:   38px;   /* persona-name mobile */
  --fs-video:  40px;   /* video-info-title */
  --fs-page:   48px;   /* scoreboard h1 */
  --fs-icon:   52px;   /* banner emoji icon */

  /* Responsive (clamp) */
  --fs-hero-title:  clamp(32px, 3.8vw, 54px); /* hero-title */
  --fs-persona:     clamp(44px, 5vw, 68px);    /* persona-name */
  --fs-otd-year:    clamp(80px, 12vw, 140px);  /* otd-detail-year */
  --fs-otd-title:   clamp(32px, 4vw, 56px);    /* otd-detail-title */
  --fs-vid-title:   clamp(26px, 3vw, 40px);    /* video-info-title responsive */
}

/* ── BASE TYPOGRAPHY ─────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}