/* ============================================================
   runut · Typography Tokens
   ------------------------------------------------------------
   One family — Nunito — used across the system. Rounded,
   geometric, friendly: a direct echo of the wordmark. We lean
   on heavy weights (800 / 900) for display & metrics to carry
   the same confident, motivational energy as the logo.

   Metrics (pace, distance, time) use tabular figures so digits
   don't jump while a run is in progress.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans: "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI",
               system-ui, -apple-system, sans-serif;
  --font-display: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  /* Numeric / metric voice = same family, tabular figures */
  --font-numeric: "Nunito", ui-rounded, system-ui, sans-serif;

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;
  --weight-black:    900;

  /* ---- Type scale (px → rem @16) ---- */
  --text-display-xl: 3.5rem;   /* 56 */
  --text-display:    2.75rem;  /* 44 */
  --text-h1:         2rem;     /* 32 */
  --text-h2:         1.625rem; /* 26 */
  --text-h3:         1.375rem; /* 22 */
  --text-h4:         1.125rem; /* 18 */
  --text-body-lg:    1.125rem; /* 18 */
  --text-body:       1rem;     /* 16 */
  --text-body-sm:    0.875rem; /* 14 */
  --text-label:      0.875rem; /* 14 */
  --text-caption:    0.75rem;  /* 12 */
  --text-overline:   0.6875rem;/* 11 */

  /* Big metric readouts */
  --text-metric-xl:  4rem;     /* 64 — active-run hero number */
  --text-metric:     2.5rem;   /* 40 */
  --text-metric-sm:  1.5rem;   /* 24 */

  /* ---- Line heights ---- */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-overline:0.12em;  /* uppercase eyebrows / labels */
}

/* ---- Optional utility classes (handy for cards & kits) ---- */
.t-display-xl { font: var(--weight-black) var(--text-display-xl)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
.t-display    { font: var(--weight-extrabold) var(--text-display)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
.t-h1 { font: var(--weight-extrabold) var(--text-h1)/var(--leading-snug) var(--font-sans); letter-spacing: var(--tracking-tight); }
.t-h2 { font: var(--weight-bold) var(--text-h2)/var(--leading-snug) var(--font-sans); }
.t-h3 { font: var(--weight-bold) var(--text-h3)/var(--leading-snug) var(--font-sans); }
.t-h4 { font: var(--weight-bold) var(--text-h4)/var(--leading-normal) var(--font-sans); }
.t-body-lg { font: var(--weight-regular) var(--text-body-lg)/var(--leading-relaxed) var(--font-sans); }
.t-body    { font: var(--weight-regular) var(--text-body)/var(--leading-normal) var(--font-sans); }
.t-body-sm { font: var(--weight-regular) var(--text-body-sm)/var(--leading-normal) var(--font-sans); }
.t-label   { font: var(--weight-semibold) var(--text-label)/1.2 var(--font-sans); }
.t-caption { font: var(--weight-medium) var(--text-caption)/1.3 var(--font-sans); color: var(--text-muted); }
.t-overline {
  font: var(--weight-extrabold) var(--text-overline)/1.2 var(--font-sans);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-accent);
}
.t-metric {
  font: var(--weight-black) var(--text-metric)/1 var(--font-numeric);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}