:root {
  /* --- Backgrounds --- */
  --bg: #fff;
  --surface: #f0f0f0; /* chip/tag/card backgrounds */
  --surface-2: #f5f5f5; /* alternate light surface, hover bg */

  /* --- Text --- */
  --ink: #1a1a1a; /* primary text, headings (#1a1a1a, #111) */
  --ink-2: #333; /* hover-state ink (btn:hover bg, etc.) */
  --muted-2: #666; /* secondary text (#555, #666, #777, #888) */
  --muted: #999; /* tertiary text, placeholders, labels (#999, #aaa, #bbb) */

  /* --- Borders / dividers --- */
  --line: #e8e8e8; /* light borders, spinner ring (#e8e8e8, #e0e0e0, #eee) */
  --line-strong: #d0d0d0; /* heavier borders, separators (#ddd, #d0d0d0, #ccc) */

  /* --- Shadows --- */
  --shadow-1: rgba(0, 0, 0, 0.07); /* subtle card shadow (0.07, 0.08) */
  --shadow-2: rgba(0, 0, 0, 0.12); /* elevated shadow */

  /* --- Accent (purple/indigo) --- */
  --accent: #4f46e5; /* indigo — mood chips, interactive highlights (#6b5bd6, #6a2a8a, #4a4a8a) */
  --accent-bg: #f0eefc; /* light purple tints (#ece9fb, #f0e8f8, #f0eefc, #faf9ff) */

  /* --- Info (blue) --- */
  --info: #2563eb; /* info/link text (#1a6fc4, #2563eb, #55c, #1a5a7a) */
  --info-bg: #eef0f7; /* light blue tints (#e8edf8, #e8f4ff, #e8f4f8, #eef, #f0f4ff) */
  --info-border: #d0dcf0; /* blue borders */

  /* --- Semantic: danger --- */
  --danger: #c00; /* error text, delete actions (#c00, #b00020, #e63946, #e84545) */
  --danger-bg: #fef2f2; /* error message backgrounds (#fef2f2, #fff5f5) */
  --danger-border: #fecaca; /* error borders */

  /* --- Semantic: success --- */
  --success: #1a7a3c; /* success text (#1b6b3a, #2e7d32, #4a9a6a, #166534) */
  --success-bg: #f0fdf4; /* success backgrounds (#e8f5e9, #ecfdf5, #f0fbf4, #f0f8e8, #f7fef9, #e8f8ee) */
  --success-border: #a8e6bf; /* success borders (#a8e6bf, #6ee7a0, #d8f3e3, #bbf7d0) */

  /* --- Semantic: warning --- */
  --warn: #fde68a; /* warning chip/highlight color */
  --warn-bg: #fef3c7; /* warning message background */
  --warn-ink: #92400e; /* warning text on light warning bg */

  /* --- Platform brand (chip backgrounds only; logo-SVG internals stay literal) --- */
  --platform-apple: #fc3c44; /* Apple Music chip */
  --platform-bandcamp: #1da0c3; /* Bandcamp chip */

  /* --- Radius --- */
  --radius-s: 4px; /* small controls (4px, 5px → 4px) */
  --radius-m: 6px; /* medium controls */
  --radius-l: 8px; /* buttons, modals */
  --radius-xl: 12px; /* cards, large panels (10px, 12px, 14px → 12px) */
  --radius-pill: 999px; /* pill buttons/chips (99px, 999px) */
  --radius-circle: 50%; /* spinners, avatars */

  /* --- Spacing scale (define-only — not replacing literals this card) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

/*
  ============================================================
  LITERAL → TOKEN MAPPING (canonical reference for implementers)
  ============================================================

  Color consolidations (approved 2026-07-09; expanded 2026-07-09 taxonomy pass):
    #fff                              → var(--bg)
    #1a1a1a, #111, #2a2a2a, #3c4043   → var(--ink)
    #333, #444                        → var(--ink-2)
    #555, #666, #777, #888, #6b6b6b   → var(--muted-2)
    #999, #999999, #aaa, #bbb, #b0b0b0 → var(--muted)
    #f0f0f0, #eee, #f2f2f2, #f3f3f3   → var(--surface)
    #f5f5f5, #fafafa, #f8f8f8, #f9f9f9 → var(--surface-2)
    #e8e8e8, #e0e0e0, #e5e5e5, #ebebeb, #ececec → var(--line)
    #ddd, #d0d0d0, #ccc, #d8d8d8, #dcdcdc, #dadce0 → var(--line-strong)
    rgba(0,0,0,0.06), rgba(0,0,0,0.07), rgba(0,0,0,0.08) → var(--shadow-1)
    rgba(0,0,0,0.12)                  → var(--shadow-2)
    DEFERRED — KEEP LITERAL this card. Only the EXACT alphas above tokenize; every
    other rgba stays literal (effect-layer, ~25 distinct alphas, negligible theming
    value, and collapsing them would flatten elevation/scrim intent). Revisit with
    dark-mode work. Covers:
      - stronger box-shadow alphas (0.14–0.3 on modals/FABs/dropdowns) — an elevation-3
        tier, not yet a token
      - rgba(0,0,0,ALPHA) background scrims (e.g. modal overlay 0.45–0.48)
      - rgba(255,255,255,ALPHA) light overlays/hovers on dark surfaces (nav bar, player)
    #4f46e5, #6b5bd6, #6a2a8a, #4a4a8a → var(--accent)
    #ece9fb, #f0e8f8, #f0eefc, #faf9ff → var(--accent-bg)
    #1a6fc4, #2563eb, #55c, #1a5a7a   → var(--info)
    #e8edf8, #e8f4ff, #e8f4f8, #eef, #f0f4ff, #eef0f7 → var(--info-bg)
    #d0dcf0                           → var(--info-border)
    #c00, #b00020, #e63946, #e84545, #b91c1c, #c0392b, #c73030, #e00, #e53e3e → var(--danger)
    #fef2f2, #fff5f5, #fde8e8, #fdf0ee → var(--danger-bg)
    #fecaca, #f5c0c0, #fca5a5, #f0c9c4 → var(--danger-border)
    #1a7a3c, #166534, #1b6b3a, #2e7d32, #4a9a6a → var(--success)
    #f0fdf4, #e8f5e9, #ecfdf5, #f0fbf4, #f0f8e8, #f7fef9, #e8f8ee → var(--success-bg)
    #bbf7d0, #a8e6bf, #6ee7a0, #d8f3e3 → var(--success-border)
    #fde68a, #ffc857, #ffe58f, #fcd34d, #f6e3c1 → var(--warn)
    #fef3c7, #fff3e0, #fff8e1, #fffbe6, #fffbeb, #fffbf0, #fffaf0, #fff4cc, #fffedb → var(--warn-bg)
    #92400e, #7a5800, #7a5f00, #8a4a00, #8a6000, #b7791f, #d97706 → var(--warn-ink)
    #fc3c44 (.chip-apple / .fm-chip-apple bg)   → var(--platform-apple)
    #1da0c3 (.chip-bandcamp / .fm-chip-bandcamp bg) → var(--platform-bandcamp)

  NOTE — some hexes serve two roles; assign by USAGE CONTEXT, not value:
    - #1271ff, #2cf2ff, #3c16d3, #eb743b, #ba478f, #e8512a appear ONLY inside
      inlined platform logo SVGs (gradient stops / path fills) → KEEP LITERAL (brand artwork).
    - #7dd3fc (light blue) → nearest is --info; confirm at implementation.
    - #16351f (near-black green, welcome) → --success if used as text, else --ink.

  Radius consolidations:
    4px, 5px   → var(--radius-s)
    6px, 7px   → var(--radius-m)   (7px is a one-off; consolidate to nearest)
    8px        → var(--radius-l)
    10px, 12px, 14px → var(--radius-xl)
    99px, 999px → var(--radius-pill)
    50%        → var(--radius-circle)

  Brand colors — KEEP LITERAL (never tokenize):
    #1db954             Spotify green
    #4285f4             Google blue
    #ea4335             Google red
    #fbbc05             Google yellow
    #34a853             Google green
    #ff0000             YouTube red (when used as brand color)
    Platform logo SVG internals (see NOTE above): #1271ff #2cf2ff #3c16d3 #eb743b #ba478f #e8512a

  Chart palette — KEEP LITERAL (Okabe-Ito colorblind-safe; stats.html only; must not theme-shift):
    #0072b2 #009e73 #117733 #332288 #56b4e9 #88ccee #cc79a7 #d55e00 #ddcc77 #e69f00 #f0e442 #999999
    (2026-07-09 decision: keep literal. cssVar() helper can read them if ever needed.)

  Chart.js colors in JS:
    Use cssVar() helper — see public/tokens.css cssVar notes below.
    Example: backgroundColor: cssVar('--accent')
*/