: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,
.notes-kicker,
.playlist-embed-kicker,
.quota-form-title,
.pop-title,
.panel-head h2,
.streams-card .panel-head h2,
.track-queue-label,
.tracked-label,
.settings-block-title,
.track-modal-section-head h3,
.playlist-modal-facts span,
.track-modal-facts span,
.track-modal-stream-stat > span,
.chart-stat-label,
.playlist-stat em,
.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,
.quota-form-title {
  color: var(--text-muted);
}

/* ── Tile / page titles ── */
.workflow-head h2,
.settings-title,
.playlist-checker-head h2,
.mail-modal-title,
.distro-modal-title,
.bento-title,
.owned-detail-meta .bento-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;
}

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

/* ── Hero / modal titles ── */
.dash-welcome {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.08;
  color: var(--text);
  background: linear-gradient(115deg, var(--text) 45%, var(--accent) 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dash-welcome span {
  font-weight: var(--fw-bold);
}

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

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

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

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

.track-modal-album,
.track-embed-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,
.note-body {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  line-height: 1.35;
  color: var(--text);
}

.grade-badge {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
}

/* ── Stats / numbers ── */
.quota-toggle strong,
.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: 17px;
  font-weight: var(--fw-bold);
}

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

.playlist-stat strong,
.artist-streams,
.track-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-semi);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ── 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,
.playlist-form input {
  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,
.playlist-form button[type="submit"] {
  font-weight: var(--fw-semi);
}

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

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

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