/* ═══════════════════════════════════════════
   CARRÉ Typography System
   Bebas Neue: scores, h1, display moments only
   DM Sans: everything else
   ═══════════════════════════════════════════ */

html, body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-1);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Display — Bebas Neue only ── */
.display-score {
  font-family: var(--font-display);
  font-size: clamp(52px, 8vw, 80px);
  line-height: 1;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.display-score-mini {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-1);
}

.display-heading {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1;
  letter-spacing: 1px;
  color: var(--color-text-1);
}

/* ── DM Sans hierarchy ── */
h1 {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.5px;
  color: var(--color-text-1);
  margin: 0;
}

h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text-1);
  margin: 0;
}

h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text-1);
  margin: 0;
}

.label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.caption {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-3);
}