/* ============================================================
   TYPOGRAPHY — FootballCRM / SportScore CRM  ·  EMERALD redesign
   Three families:
     • Instrument Serif — DISPLAY: hero statements, headlines and
       section titles. Editorial, elegant, sentence-case (NOT
       uppercase). Italic available for emphasis.
     • Hanken Grotesk — UI / body copy, buttons, labels, kickers.
     • Geist Mono — SCORE / numerals: tables, odds, points, scores
       (tabular by default).
   ============================================================ */

:root {
  /* Families */
  --font-ui:      'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;  /* headlines + section titles */
  --font-score:   'Geist Mono', ui-monospace, 'SFMono-Regular', monospace; /* numerals, odds, scores */
  --font-num:     'Geist Mono', ui-monospace, 'SFMono-Regular', monospace; /* alias */

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* ---- Type scale (size / line-height / weight / tracking) ---- */
  /* label-xs — pill captions, table headers (UPPERCASE sans) */
  --type-label-xs-size: 11px;
  --type-label-xs-line: 1.3;
  --type-label-xs-weight: 700;

  /* label-sm — buttons, chips, field labels (sans) */
  --type-label-sm-size: 12px;
  --type-label-sm-line: 1.3;
  --type-label-sm-weight: 600;
  --type-label-sm-tracking: 0.04em;

  /* body-md — default body copy */
  --type-body-md-size: 13px;
  --type-body-md-line: 1.5;
  --type-body-md-weight: 400;

  /* body-lg — emphasized body / stat values */
  --type-body-lg-size: 15px;
  --type-body-lg-line: 1.5;
  --type-body-lg-weight: 400;

  /* headline-sm — card titles (sans, semibold) */
  --type-headline-sm-size: 15px;
  --type-headline-sm-line: 1.25;
  --type-headline-sm-weight: 700;

  /* headline-md — section titles (editorial serif) */
  --type-headline-md-size: 24px;
  --type-headline-md-line: 1.1;
  --type-headline-md-weight: 400;

  /* display-lg — page / hero headings (editorial serif) */
  --type-display-lg-size: 40px;
  --type-display-lg-line: 1.0;
  --type-display-lg-weight: 400;

  /* display-xl — big marketing headings (editorial serif) */
  --type-display-xl-size: 58px;
  --type-display-xl-line: 0.98;
  --type-display-xl-weight: 400;
  --type-display-xl-tracking: -0.005em;

  /* score — Geist Mono scoreboard numerals (Match Center) */
  --type-score-size: 64px;
  --type-score-line: 0.9;
  --type-score-tracking: -0.02em;

  /* Common tracking helpers */
  --tracking-kicker: 0.14em;   /* uppercase eyebrow / kicker labels */
  --tracking-caps:   0.04em;   /* uppercase ui labels */
  --tracking-tight:  -0.01em;
}

/* Convenience classes (optional — tokens above are the source of truth) */
.type-kicker {
  font-family: var(--font-ui);
  font-size: var(--type-label-xs-size);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-primary);
}
.type-display-xl {
  font-family: var(--font-display);
  font-size: var(--type-display-xl-size);
  font-weight: var(--fw-regular);
  line-height: var(--type-display-xl-line);
  letter-spacing: var(--type-display-xl-tracking);
  color: var(--text-strong);
}
.type-display-lg {
  font-family: var(--font-display);
  font-size: var(--type-display-lg-size);
  font-weight: var(--fw-regular);
  line-height: var(--type-display-lg-line);
  color: var(--text-strong);
}
.type-headline-md {
  font-family: var(--font-display);
  font-size: var(--type-headline-md-size);
  font-weight: var(--fw-regular);
  line-height: var(--type-headline-md-line);
  color: var(--text-strong);
}
.type-score {
  font-family: var(--font-score);
  font-size: var(--type-score-size);
  font-weight: var(--fw-semibold);
  line-height: var(--type-score-line);
  letter-spacing: var(--type-score-tracking);
  font-variant-numeric: tabular-nums;
}
.num-tabular { font-variant-numeric: tabular-nums; font-family: var(--font-score); }