: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 (auth pages). Sidebar brand lives in nav.css so it can
   match the dusk.ac landing (Geist, 13px, -0.03em). ── */
.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 ── */
.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;
}

/* Titles that sit in the 36px modal caption, next to the kicker. */
.mail-modal-title,
.distro-modal-title {
  margin: 0;
  font-size: 13px;
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-snug);
  line-height: 1.2;
  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 {
  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,
.artist-id {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--text-faint);
}

/* ── List / card names ── */
.artist-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 {
  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 {
  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);
}