refactor(ui): css: use of variables colors only

static/css/base/variables.css

@@ -424,4 +424,5 @@
 
     --color-music-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     --color-music-background: var(--color-bg-surface);
+    --color-music-public-bg: rgba(74, 144, 217, 0.12);
 }

static/css/views/admin.css

@@ -1003,7 +1003,7 @@ details[open] summary {
 }
 .storage-backend-option input[type="radio"]:checked + .storage-backend-option__card {
     border-color: var(--color-accent);
-    background: var(--color-accent-subtle);
+    background: var(--color-bg-subtle);
 }
 .storage-backend-option input[type="radio"]:checked + .storage-backend-option__card i {
     color: var(--color-accent);
@@ -1058,20 +1058,20 @@ details[open] summary {
     color: var(--color-text-secondary);
 }
 .badge-migration--running {
-    background: var(--color-accent-subtle);
+    background: var(--color-bg-subtle);
     color: var(--color-accent);
 }
 .badge-migration--paused {
-    background: var(--color-warning-bg, #fff8e1);
+    background: var(--color-warning-bg);
-    color: var(--color-warning-text, #b28704);
+    color: var(--color-warning-text);
 }
 .badge-migration--completed {
-    background: var(--color-success-bg, #e8f5e9);
+    background: var(--color-success-bg);
-    color: var(--color-success-text, #2e7d32);
+    color: var(--color-success-text);
 }
 .badge-migration--failed {
-    background: var(--color-danger-bg, #fce4ec);
+    background: var(--color-danger-bg);
-    color: var(--color-danger-text, #c62828);
+    color: var(--color-danger-text);
 }
 
 .migration-progress-bar {

static/css/views/music.css

@@ -28,7 +28,7 @@
     align-items: center;
     justify-content: center;
     margin-bottom: 24px;
-    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.25);
+    box-shadow: 0 8px 32px var(--color-shadow-2xl);
 }
 
 .music-empty-state-icon i {
@@ -230,7 +230,7 @@
     justify-content: center;
     color: var(--color-danger-text);
     font-size: 48px;
-    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
+    box-shadow: 0 8px 24px var(--color-shadow-3xl);
 }
 
 .music-playlist-info {
@@ -1024,7 +1024,7 @@
 }
 .music-track-remove-btn:hover {
     color: var(--color-danger-text);
-    background: rgba(231, 76, 60, 0.08);
+    background: var(--color-danger-bg);
 }
 
 /* ========== Cover art ========== */
@@ -1063,7 +1063,7 @@
     gap: 4px;
     padding: 2px 8px;
     font-size: 0.72rem;
-    background: rgba(74, 144, 217, 0.12);
+    background: var(--color-music-public-bg);
     color: var(--color-text);
     border-radius: 12px;
     margin-top: 4px;
@@ -1073,7 +1073,7 @@
 }
 #music-toggle-public-btn.active {
     color: var(--color-text);
-    background: rgba(74, 144, 217, 0.1);
+    background: var(--color-item-active);
 }
 
 /* ========== Shares management dialog ========== */
@@ -1290,8 +1290,7 @@
     outline: none;
 }
 .music-picker-search input:focus {
-    border-color: var(--color-primary);
+    border-color: var(--color-accent);
-    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
 }
 
 /* ── file list ── */
@@ -1323,10 +1322,10 @@
     color: var(--color-text);
 }
 .music-picker-item:hover {
-    background: var(--color-bg-hover);
+    background: var(--color-item-hover);
 }
 .music-picker-item.selected {
-    background: rgba(102, 126, 234, 0.08);
+    background: var(--color-item-selected);
 }
 
 .music-picker-item input[type="checkbox"] {

static/css/views/share-public.css

@@ -108,7 +108,7 @@ FIXME: use components/buttons.css ?
     width: 100%;
     padding: 0.75rem 1.5rem;
     background: var(--color-primary);
-    color: #fff;
+    color: var(--color-bg-surface);
     border: none;
     border-radius: 8px;
     font-size: 0.95rem;