[data-theme="dark"] #theme-toggle {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f0ece4' stroke-width='1.5' stroke-linecap='round'><circle cx='8' cy='8' r='3'/><path d='M8 1v2M8 13v2M1 8h2M13 8h2M3.22 3.22l1.42 1.42M11.36 11.36l1.42 1.42M11.36 4.64l1.42-1.42M3.22 12.78l1.42-1.42'/></svg>");
}

[data-theme="light"] #theme-toggle {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%230a0a0a' d='M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z'/></svg>");
}

[data-theme="dark"] {
  --bg:            #0a0a0a;
  --bg-surface:    #111111;
  --text-primary:  #f0ece4;
  --text-muted:    rgba(240, 236, 228, 0.35);
  --text-faint:    rgba(240, 236, 228, 0.15);
  --border:        rgba(240, 236, 228, 0.08);
  --border-strong: rgba(240, 236, 228, 0.18);
  --player-bg:     rgba(10, 10, 10, 0.95);
  --accent:        #00C8D4;
}

[data-theme="light"] {
  --bg:            #f5f2ec;
  --bg-surface:    #eeeae2;
  --text-primary:  #0a0a0a;
  --text-muted:    rgba(10, 10, 10, 0.4);
  --text-faint:    rgba(10, 10, 10, 0.15);
  --border:        rgba(10, 10, 10, 0.08);
  --border-strong: rgba(10, 10, 10, 0.2);
  --player-bg:     rgba(245, 242, 236, 0.95);
  --accent:        #00C8D4;
}