:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fs-micro: 10px;
  --fs-caption: 11.5px;
  --fs-body: 13px;
  --fs-body-lg: 14px;
  --fs-title: 15px;
  --fs-title-lg: 17.5px;
  --fs-display: 30px;
  --fs-stat: 20px;
  --fs-stat-lg: 24px;
  --fs-hero: 21px;
  --ls-tight: -0.032em;
  --ls-snug: -0.014em;
  --ls-label: 0.12em;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--text);
}

/* ── Brand ── */
.topbar .brand-inline,
.brand h1 {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  color: var(--text);
}

/* ── Kickers / section labels (quiet) ── */
.bento-kicker,
.pop-title,
.panel-head h2,
.streams-card .panel-head h2,
.track-queue-label,
.playlist-modal-facts span,
.track-modal-facts span,
.track-modal-stream-stat > span,
.chart-stat-label,
.track-modal-kv > span {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text-faint);
}

.streams-card .panel-head h2,
.panel-head h2,
.pop-title,
.track-modal-section-head h3 {
  color: var(--text-muted);
}

/* ── Tile / page titles ── */
.workflow-head h2,
.playlist-checker-head h2,
.mail-modal-title,
.distro-modal-title,
.notifications-modal-title {
  margin: 4px 0 0;
  font-size: var(--fs-title-lg);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  color: var(--text);
  text-transform: none;
}

.playlist-toolbar-label {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-snug);
  color: var(--text);
}

/* ── Hero / modal titles ── */
.track-modal-name,
.playlist-modal-name {
  font-size: var(--fs-hero);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-tight);
  line-height: 1.18;
  color: var(--text);
}

/* ── Supporting copy ── */
.subtitle,
.panel-meta,
.playlist-modal-desc {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: 1.45;
  color: var(--text-muted);
}

.panel-meta,
.queue-count {
  color: var(--text-muted);
}

.playlist-modal-owner,
.track-modal-artists {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

.track-modal-album,
.playlist-track-artists,
.tracker-item-sub,
.artist-id {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--text-faint);
}

/* ── List / card names ── */
.tracker-item-name,
.artist-name,
.playlist-track-name {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  line-height: 1.35;
  color: var(--text);
}

/* ── Stats / numbers ── */
.chart-stat strong,
.track-modal-stream-stat strong,
.playlist-modal-facts strong,
.track-modal-facts strong {
  font-size: var(--fs-stat);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--text);
}

.streams-card .chart-stat strong {
  font-size: 20px;
  font-weight: var(--fw-bold);
}

.chart-stat-pct {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
}

.artist-streams,
.playlist-track-streams {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.track-modal-kv strong {
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

/* ── Forms / controls ── */
.field > label,
.choice-field legend {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

input[type="text"],
input[type="password"],
select {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--text);
}

.totp-input {
  font-size: 22px;
  font-weight: var(--fw-semi);
}

.auth-wrap button[type="submit"],
.done-link,
.playlist-track-btn {
  font-weight: var(--fw-semi);
}

/* ── Empty states ── */
.artist-empty,
.playlist-empty {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--text-faint);
}

/* ── Nav / filters ── */
.playlist-filter button {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}

.playlist-filter button.is-active {
  font-weight: var(--fw-semi);
  color: var(--text);
}