diff --git a/justfile b/justfile
index 4657613a..7282a748 100644
--- a/justfile
+++ b/justfile
@@ -55,3 +55,7 @@ front-fmt:
 
 front-lint:
     biome lint static/
+
+# check CSS rules
+front-rules:
+    stylelint static/css/
diff --git a/static/css/base/forms.css b/static/css/base/forms.css
index 892110fb..ab28128c 100644
--- a/static/css/base/forms.css
+++ b/static/css/base/forms.css
@@ -56,5 +56,5 @@
 }
 
 .danger:hover {
-    background-color: var(--color-danger-hover);
+    background-color: var(--color-danger-bg-hover);
 }
diff --git a/static/css/base/variables.css b/static/css/base/variables.css
index 10c67cdf..e635079f 100644
--- a/static/css/base/variables.css
+++ b/static/css/base/variables.css
@@ -118,6 +118,9 @@
     --color-overlay-darkest: rgba(0, 0, 0, 0.92);
 
     /* Items */
+    --color-item: var(--color-bg-surface);
+    --color-item-hover: var(--color-bg-hover);
+    --color-item-active: #f8d2ae;
     --color-item-selected: #fff8f6;
     --color-item-hover-accent: #fff0ec;
     --color-item-hover-blue: #f0f8ff;
@@ -418,4 +421,7 @@
     --color-bg-off-white: #fafbfd;
     --color-danger-shadow: rgba(220, 38, 38, 0.2);
     --color-danger-shadow-lg: rgba(220, 38, 38, 0.3);
+
+    --color-music-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --color-music-background: var(--color-bg-surface);
 }
diff --git a/static/css/components/dialogs.css b/static/css/components/dialogs.css
index 0e5a2e34..6ed90bf9 100644
--- a/static/css/components/dialogs.css
+++ b/static/css/components/dialogs.css
@@ -501,7 +501,7 @@
 .playlist-track-count {
     margin-left: auto;
     font-size: 12px;
-    color: #718096;
+    color: var( --color-text-muted);
 }
 
 /* Custom confirm dialog */
diff --git a/static/css/components/filesView.css b/static/css/components/filesView.css
index 6298e087..523dc6b8 100644
--- a/static/css/components/filesView.css
+++ b/static/css/components/filesView.css
@@ -36,7 +36,7 @@
 }
 
 .file-item {
-    background-color: var(--color-bg-surface);
+    background-color: var(--color-item);
 }
 
 .file-item.selected {
@@ -44,7 +44,7 @@
 }
 
 .file-item:hover {
-    background-color: var(--color-bg-hover);
+    background-color: var(--color-item-hover);
     border-color: var(--color-border-medium);
 }
 
@@ -101,7 +101,7 @@
     width: 100%;
     border-radius: 10px;
     overflow: hidden;
-    background-color: var(--color-bg-surface);
+    background-color: var(--color-item);
     box-shadow: 0 1px 3px var(--color-shadow-xs);
 }
 
@@ -269,7 +269,7 @@
     width: 22px;
     height: 22px;
     border-radius: 6px;
-    background: var(--color-bg-surface);
+    background: var(--color-item);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -426,7 +426,7 @@
     grid-template-columns: var(--dragged-files-list-columns);
     column-gap: 12px;
     align-items: center;
-    background-color: var(--color-bg-surface);
+    background-color: var(--color-item);
     display: flex;
     padding: 4px;
     width: 360px;
@@ -447,8 +447,8 @@
 }
 
 .dragged-items div.fading {
-    -webkit-mask-image: linear-gradient(to bottom, var(--color-bg-surface) 10%, transparent);
-    mask-image: linear-gradient(to bottom, var(--color-bg-surface) 10%, transparent);
+    -webkit-mask-image: linear-gradient(to bottom, var(--color-item) 10%, transparent);
+    mask-image: linear-gradient(to bottom, var(--color-item) 10%, transparent);
 }
 
 .dragged-items-badge {
diff --git a/static/css/themes/dark.css b/static/css/themes/dark.css
index 718c9e63..3aaa9001 100644
--- a/static/css/themes/dark.css
+++ b/static/css/themes/dark.css
@@ -79,8 +79,9 @@
     --color-sidebar-bg-to: #0c1322;
 
     /* Items */
-    --color-item-selected: #1a1520;
-    --color-item-hover-accent: #21262d;
+    --color-item-active: #5a5047;
+    --color-item-selected: #39281a;
+    --color-item-hover-accent: #3d342c;
 
     /* Primary */
     /* TODO: rename into primary-blue ? */
diff --git a/static/css/views/music.css b/static/css/views/music.css
index 813ef073..5a1f0f36 100644
--- a/static/css/views/music.css
+++ b/static/css/views/music.css
@@ -23,7 +23,7 @@
     width: 96px;
     height: 96px;
     border-radius: 50%;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: var(--color-music-gradient);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -33,20 +33,20 @@
 
 .music-empty-state-icon i {
     font-size: 40px;
-    color: #fff;
+    color: var(--color-danger-text);
 }
 
 .music-empty-state-title {
     margin: 0 0 8px;
     font-size: 20px;
     font-weight: 600;
-    color: var(--color-text, #2d3748);
+    color: var(--color-text);
 }
 
 .music-empty-state-desc {
     margin: 0 0 28px;
     font-size: 14px;
-    color: var(--color-text-muted, #718096);
+    color: var(--color-text-muted);
     max-width: 360px;
     line-height: 1.5;
 }
@@ -71,15 +71,15 @@
 .music-sidebar {
     width: 280px;
     min-width: 280px;
-    border-right: 1px solid var(--border-color, #e2e8f0);
+    border-right: 1px solid var(--color-border);
     display: flex;
     flex-direction: column;
-    background: var(--bg-secondary, #f8fafc);
+    background: var(--color-bg-surface);
 }
 
 .music-sidebar-header {
     padding: 14px 16px;
-    border-bottom: 1px solid var(--border-color, #e2e8f0);
+    border-bottom: 1px solid var(--color-border);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -89,7 +89,7 @@
     margin: 0;
     font-size: 12px;
     font-weight: 600;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
@@ -99,8 +99,8 @@
     height: 28px;
     border-radius: 6px;
     border: none;
-    background: var(--color-accent-gradient, linear-gradient(135deg, #ff5e3a, #ff2d55));
-    color: #fff;
+    background: var(--color-accent-gradient);
+    color: var(--color-danger-text);
     font-size: 13px;
     cursor: pointer;
     display: flex;
@@ -109,12 +109,12 @@
     transition:
         transform 0.15s,
         box-shadow 0.15s;
-    box-shadow: 0 2px 8px var(--color-accent-shadow, rgba(255, 94, 58, 0.25));
+    box-shadow: 0 2px 8px var(--color-accent-shadow);
 }
 
 .music-sidebar-add-btn:hover {
     transform: translateY(-1px);
-    box-shadow: 0 4px 12px var(--color-accent-shadow, rgba(255, 94, 58, 0.35));
+    box-shadow: 0 4px 12px var(--color-accent-shadow);
 }
 
 .music-playlist-list {
@@ -134,22 +134,22 @@
 }
 
 .music-playlist-item:hover {
-    background: var(--hover-bg, #e2e8f0);
+    background: var(--color-bg-hover);
 }
 
 .music-playlist-item.active {
-    background: var(--active-bg, #dbeafe);
+    background: var(--color-bg-alt);
 }
 
 .music-playlist-icon {
     width: 36px;
     height: 36px;
     border-radius: 8px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: var(--color-music-gradient);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #fff;
+    color: var(--color-danger-text);
     font-size: 14px;
     flex-shrink: 0;
 }
@@ -162,7 +162,7 @@
 .music-playlist-item-name {
     display: block;
     font-weight: 500;
-    color: var(--text-primary, #1e293b);
+    color: var(--color-text);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -171,7 +171,7 @@
 .music-playlist-item-count {
     display: block;
     font-size: 12px;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
 }
 
 .music-main {
@@ -187,20 +187,20 @@
     justify-content: center;
     height: 100%;
     text-align: center;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
 }
 
 .music-welcome i {
     font-size: 64px;
     margin-bottom: 20px;
-    color: var(--text-muted, #cbd5e1);
+    color: var(--color-text-muted);
 }
 
 .music-welcome h3 {
     margin: 0 0 8px;
     font-size: 20px;
     font-weight: 600;
-    color: var(--text-primary, #1e293b);
+    color: var(--color-text);
 }
 
 .music-welcome p {
@@ -224,11 +224,11 @@
     height: 140px;
     min-width: 140px;
     border-radius: 12px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: var(--color-music-gradient);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #fff;
+    color: var(--color-danger-text);
     font-size: 48px;
     box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
 }
@@ -241,13 +241,13 @@
     margin: 0 0 8px;
     font-size: 28px;
     font-weight: 700;
-    color: var(--text-primary, #1e293b);
+    color: var(--color-text);
 }
 
 .music-playlist-info p {
     margin: 0;
     font-size: 14px;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
 }
 
 .music-playlist-actions {
@@ -276,7 +276,7 @@
 }
 
 .music-track-list {
-    background: var(--bg-secondary, #f8fafc);
+    background: var(--color-item);
     border-radius: 12px;
     overflow: hidden;
 }
@@ -285,10 +285,10 @@
     display: flex;
     align-items: center;
     padding: 12px 16px;
-    border-bottom: 1px solid var(--border-color, #e2e8f0);
+    border-bottom: 1px solid var(--color-border);
     font-size: 12px;
     font-weight: 600;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
@@ -297,7 +297,7 @@
     display: flex;
     align-items: center;
     padding: 10px 16px;
-    border-bottom: 1px solid var(--border-color, #e2e8f0);
+    border-bottom: 1px solid var(--color-border);
     cursor: pointer;
     transition: background 0.15s ease;
 }
@@ -307,11 +307,11 @@
 }
 
 .music-track:hover {
-    background: var(--hover-bg, #f1f5f9);
+    background: var(--color-item-hover);
 }
 
 .music-track.selected {
-    background: var(--active-bg, #dbeafe);
+    background: var(--color-item-selected);
 }
 
 .music-track-col {
@@ -321,7 +321,7 @@
 .music-track-num {
     width: 40px;
     text-align: center;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
     font-size: 14px;
 }
 
@@ -334,7 +334,7 @@
 }
 
 .music-track-icon {
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
     font-size: 14px;
 }
 
@@ -343,12 +343,12 @@
     overflow: hidden;
     text-overflow: ellipsis;
     font-weight: 500;
-    color: var(--text-primary, #1e293b);
+    color: var(--color-text);
 }
 
 .music-track-artist {
     flex: 1;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
     font-size: 14px;
     white-space: nowrap;
     overflow: hidden;
@@ -357,7 +357,7 @@
 
 .music-track-album {
     flex: 1;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
     font-size: 14px;
     white-space: nowrap;
     overflow: hidden;
@@ -367,7 +367,7 @@
 .music-track-duration {
     width: 60px;
     text-align: right;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
     font-size: 14px;
     font-variant-numeric: tabular-nums;
 }
@@ -379,13 +379,13 @@
     justify-content: center;
     padding: 60px 20px;
     text-align: center;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
 }
 
 .music-empty i {
     font-size: 48px;
     margin-bottom: 16px;
-    color: var(--text-muted, #cbd5e1);
+    color: var(--color-text-muted);
 }
 
 .music-empty p {
@@ -398,7 +398,7 @@
     align-items: center;
     justify-content: center;
     padding: 40px;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
     font-size: 14px;
     gap: 8px;
 }
@@ -414,7 +414,7 @@
     justify-content: center;
     padding: 40px;
     text-align: center;
-    color: var(--error-color, #ef4444);
+    color: var(--color-error-text);
 }
 
 .music-error i {
@@ -433,32 +433,6 @@
     }
 }
 
-/* Dark theme */
-[data-theme="dark"] .music-sidebar {
-    background: var(--bg-secondary, #1e293b);
-    border-color: var(--border-color, #334155);
-}
-
-[data-theme="dark"] .music-playlist-item-name {
-    color: var(--text-primary, #f1f5f9);
-}
-
-[data-theme="dark"] .music-welcome h3 {
-    color: var(--text-primary, #f1f5f9);
-}
-
-[data-theme="dark"] .music-playlist-info h2 {
-    color: var(--text-primary, #f1f5f9);
-}
-
-[data-theme="dark"] .music-track-name {
-    color: var(--text-primary, #f1f5f9);
-}
-
-[data-theme="dark"] .music-track-list {
-    background: var(--bg-secondary, #1e293b);
-}
-
 /* Responsive */
 @media (max-width: 768px) {
     .music-content {
@@ -470,7 +444,7 @@
         width: 100%;
         min-width: 100%;
         border-right: none;
-        border-bottom: 1px solid var(--border-color, #e2e8f0);
+        border-bottom: 1px solid var(--color-border);
         max-height: 200px;
     }
 
@@ -504,14 +478,14 @@
     left: 0;
     right: 0;
     height: 90px;
-    background: var(--bg-primary, #fff);
-    border-top: 1px solid var(--border-color, #e2e8f0);
+    background: var(--color-music-background);
+    border-top: 1px solid var(--color-border);
     display: flex;
     align-items: center;
     padding: 0 16px;
     gap: 16px;
     z-index: 1000;
-    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 -4px 20px var(--color-shadow);
     transform: translateY(100%);
     transition: transform 0.3s ease;
 }
@@ -537,11 +511,11 @@
     width: 56px;
     height: 56px;
     border-radius: 8px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: var(--color-music-gradient);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #fff;
+    color: var(--color-danger-text);
     font-size: 20px;
     flex-shrink: 0;
 }
@@ -554,7 +528,7 @@
 
 .player-track-name {
     font-weight: 500;
-    color: var(--text-primary, #1e293b);
+    color: var(--color-text);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -563,7 +537,7 @@
 
 .player-track-artist {
     font-size: 12px;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -592,7 +566,7 @@
     cursor: pointer;
     padding: 8px;
     border-radius: 50%;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
     font-size: 16px;
     transition: all 0.2s ease;
     display: flex;
@@ -601,22 +575,22 @@
 }
 
 .player-btn:hover {
-    color: var(--text-primary, #1e293b);
-    background: var(--hover-bg, #f1f5f9);
+    color: var(--color-text);
+    background: var(--color-bg-hover);
 }
 
 .player-btn.active {
-    color: var(--primary-color, #667eea);
+    color: var(--color-text);
 }
 
 .player-btn-main {
-    background: var(--primary-color, #667eea);
-    color: #fff !important;
+    background: var(--color-text);
+    color: var(--color-danger-text) !important;
     font-size: 21px;
 }
 
 .player-btn-main:hover {
-    background: var(--primary-color-dark, #5a67d8);
+    background: var(--color-text-dark);
     transform: scale(1.05);
 }
 
@@ -635,7 +609,7 @@
 
 .player-time {
     font-size: 11px;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
     font-variant-numeric: tabular-nums;
     min-width: 40px;
 }
@@ -651,7 +625,7 @@
 .player-progress-bar {
     flex: 1;
     height: 4px;
-    background: var(--border-color, #e2e8f0);
+    background: var(--color-border);
     border-radius: 2px;
     cursor: pointer;
     position: relative;
@@ -660,7 +634,7 @@
 
 .player-progress-fill {
     height: 100%;
-    background: var(--primary-color, #667eea);
+    background: var(--color-text);
     border-radius: 2px;
     transition: width 0.1s linear;
     width: 0;
@@ -672,12 +646,12 @@
     left: 0;
     width: 12px;
     height: 12px;
-    background: var(--primary-color, #667eea);
+    background: var(--color-text);
     border-radius: 50%;
     transform: translate(-50%, -50%);
     opacity: 0;
     transition: opacity 0.2s ease;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 4px var(--color-shadow-xl);
 }
 
 .player-progress-bar:hover .player-progress-handle {
@@ -719,7 +693,7 @@
     height: 4px;
     -webkit-appearance: none;
     appearance: none;
-    background: var(--border-color, #e2e8f0);
+    background: var(--color-border);
     border-radius: 2px;
     cursor: pointer;
 }
@@ -729,7 +703,7 @@
     appearance: none;
     width: 12px;
     height: 12px;
-    background: var(--primary-color, #667eea);
+    background: var(--color-text);
     border-radius: 50%;
     cursor: pointer;
 }
@@ -737,7 +711,7 @@
 #player-volume-input::-moz-range-thumb {
     width: 12px;
     height: 12px;
-    background: var(--primary-color, #667eea);
+    background: var(--color-text);
     border-radius: 50%;
     cursor: pointer;
     border: none;
@@ -750,10 +724,10 @@
     right: 16px;
     width: 320px;
     max-height: 400px;
-    background: var(--bg-primary, #fff);
-    border: 1px solid var(--border-color, #e2e8f0);
+    background: var(--color-music-background);
+    border: 1px solid var(--color-border);
     border-radius: 12px;
-    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 8px 30px var(--color-shadow-md);
     display: flex;
     flex-direction: column;
     z-index: 1001;
@@ -767,9 +741,9 @@
     right: 60px;
     width: 14px;
     height: 14px;
-    background: var(--bg-primary, #fff);
-    border-right: 1px solid var(--border-color, #e2e8f0);
-    border-bottom: 1px solid var(--border-color, #e2e8f0);
+    background: var(--color-music-background);
+    border-right: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border);
     transform: rotate(45deg);
     z-index: -1;
 }
@@ -783,14 +757,14 @@
     align-items: center;
     justify-content: space-between;
     padding: 12px 16px;
-    border-bottom: 1px solid var(--border-color, #e2e8f0);
+    border-bottom: 1px solid var(--color-border);
 }
 
 .player-queue-header h3 {
     margin: 0;
     font-size: 14px;
     font-weight: 600;
-    color: var(--text-primary, #1e293b);
+    color: var(--color-text);
 }
 
 .player-queue-list {
@@ -810,22 +784,22 @@
 }
 
 .player-queue-item:hover {
-    background: var(--hover-bg, #f1f5f9);
+    background: var(--color-bg-hover);
 }
 
 .player-queue-item.active {
-    background: var(--active-bg, #dbeafe);
+    background: var(--color-bg-alt);
 }
 
 .queue-item-num {
     width: 20px;
     text-align: center;
     font-size: 12px;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
 }
 
 .player-queue-item.active .queue-item-num {
-    color: var(--primary-color, #667eea);
+    color: var(--color-text);
     font-weight: 600;
 }
 
@@ -839,7 +813,7 @@
 .queue-item-name {
     font-size: 13px;
     font-weight: 500;
-    color: var(--text-primary, #1e293b);
+    color: var(--color-text);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -847,7 +821,7 @@
 
 .queue-item-artist {
     font-size: 11px;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -855,7 +829,7 @@
 
 .queue-item-duration {
     font-size: 11px;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
 }
 
 .queue-item-remove {
@@ -863,7 +837,7 @@
     border: none;
     padding: 4px;
     cursor: pointer;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
     opacity: 0;
     transition: opacity 0.15s ease;
 }
@@ -873,7 +847,7 @@
 }
 
 .queue-item-remove:hover {
-    color: var(--error-color, #ef4444);
+    color: var(--color-error-text);
 }
 
 .player-queue-empty {
@@ -883,26 +857,26 @@
     justify-content: center;
     padding: 40px 20px;
     text-align: center;
-    color: var(--text-secondary, #64748b);
+    color: var(--color-text-secondary);
 }
 
 .player-queue-empty i {
     font-size: 32px;
     margin-bottom: 12px;
-    color: var(--text-muted, #cbd5e1);
+    color: var(--color-text-muted);
 }
 
 /* Track playing indicator */
 .music-track.playing {
-    background: var(--active-bg, #dbeafe);
+    background: var(--color-item-active);
 }
 
 .music-track.playing.selected {
-    background: var(--active-bg, #dbeafe);
+    background: var(--color-item-selected);
 }
 
 .music-track.playing .music-track-name {
-    color: var(--primary-color, #667eea);
+    color: var(--color-text);
 }
 
 .track-num-text.hidden {
@@ -911,7 +885,7 @@
 
 .track-play-icon {
     display: none;
-    color: var(--primary-color, #667eea);
+    color: var(--color-text);
 }
 
 /* Repeat one icon */
@@ -927,46 +901,6 @@
     right: 0;
 }
 
-/* Dark theme for player */
-[data-theme="dark"] .music-player {
-    background: var(--bg-secondary, #1e293b);
-    border-color: var(--border-color, #334155);
-}
-
-[data-theme="dark"] .player-track-name {
-    color: var(--text-primary, #f1f5f9);
-}
-
-[data-theme="dark"] .player-queue {
-    background: var(--bg-secondary, #1e293b);
-    border-color: var(--border-color, #334155);
-}
-
-[data-theme="dark"] .player-queue::after {
-    background: var(--bg-secondary, #1e293b);
-    border-color: var(--border-color, #334155);
-}
-
-[data-theme="dark"] .player-queue-header {
-    border-color: var(--border-color, #334155);
-}
-
-[data-theme="dark"] .player-queue-header h3 {
-    color: var(--text-primary, #f1f5f9);
-}
-
-[data-theme="dark"] .queue-item-name {
-    color: var(--text-primary, #f1f5f9);
-}
-
-[data-theme="dark"] #player-volume-input {
-    background: var(--border-color, #334155);
-}
-
-[data-theme="dark"] .player-progress-bar {
-    background: var(--border-color, #334155);
-}
-
 /* Mobile player adjustments */
 @media (max-width: 768px) {
     .music-player {
@@ -1039,7 +973,7 @@
     width: 28px;
     flex: 0 0 28px;
     cursor: grab;
-    color: var(--text-secondary, #888);
+    color: var(--color-text-secondary);
     opacity: 0;
     transition: opacity 0.15s;
     display: flex;
@@ -1057,10 +991,10 @@
 }
 .music-track.dragging {
     opacity: 0.35;
-    background: var(--bg-hover, #f0f0f0);
+    background: var(--color-bg-hover);
 }
 .music-track.drag-over {
-    border-top: 2px solid var(--primary, #4a90d9);
+    border-top: 2px solid var(--color-accent-hover);
     margin-top: -2px;
 }
 
@@ -1075,7 +1009,7 @@
 .music-track-remove-btn {
     background: none;
     border: none;
-    color: var(--text-secondary, #888);
+    color: var(--color-text-secondary);
     cursor: pointer;
     padding: 4px 6px;
     border-radius: 4px;
@@ -1089,7 +1023,7 @@
     opacity: 1;
 }
 .music-track-remove-btn:hover {
-    color: var(--danger, #e74c3c);
+    color: var(--color-danger-text);
     background: rgba(231, 76, 60, 0.08);
 }
 
@@ -1111,8 +1045,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: rgba(0, 0, 0, 0.4);
-    color: #fff;
+    background: var(--color-shadow-4xl);
+    color: var(--color-danger-text);
     font-size: 1.1rem;
     opacity: 0;
     transition: opacity 0.2s;
@@ -1130,7 +1064,7 @@
     padding: 2px 8px;
     font-size: 0.72rem;
     background: rgba(74, 144, 217, 0.12);
-    color: var(--primary, #4a90d9);
+    color: var(--color-text);
     border-radius: 12px;
     margin-top: 4px;
 }
@@ -1138,7 +1072,7 @@
     display: none;
 }
 #music-toggle-public-btn.active {
-    color: var(--primary, #4a90d9);
+    color: var(--color-text);
     background: rgba(74, 144, 217, 0.1);
 }
 
@@ -1146,28 +1080,28 @@
 .music-shares-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.45);
+    background: var(--color-shadow-4xl);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10000;
 }
 .music-shares-panel {
-    background: var(--bg-primary, #fff);
+    background: var(--color-music-background);
     border-radius: 12px;
     width: 420px;
     max-width: 90vw;
     max-height: 80vh;
     display: flex;
     flex-direction: column;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+    box-shadow: 0 8px 32px var(--color-shadow-md);
 }
 .music-shares-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 14px 20px;
-    border-bottom: 1px solid var(--border-color, #eee);
+    border-bottom: 1px solid var(--color-border);
 }
 .music-shares-header h3 {
     margin: 0;
@@ -1180,12 +1114,12 @@
     background: none;
     border: none;
     cursor: pointer;
-    color: var(--text-secondary, #888);
+    color: var(--color-text-secondary);
     padding: 4px;
     font-size: 1rem;
 }
 .music-shares-close-btn:hover {
-    color: var(--text-primary, #333);
+    color: var(--color-text);
 }
 .music-shares-body {
     flex: 1;
@@ -1196,11 +1130,11 @@
 .music-shares-loading {
     text-align: center;
     padding: 20px;
-    color: var(--text-secondary, #888);
+    color: var(--color-text-secondary);
 }
 .music-shares-empty {
     text-align: center;
-    color: var(--text-secondary, #888);
+    color: var(--color-text-secondary);
     padding: 16px 0;
     margin: 0;
 }
@@ -1209,7 +1143,7 @@
     align-items: center;
     gap: 10px;
     padding: 8px 0;
-    border-bottom: 1px solid var(--border-color, #f0f0f0);
+    border-bottom: 1px solid var(--color-border);
 }
 .music-share-item:last-child {
     border-bottom: none;
@@ -1223,72 +1157,50 @@
 }
 .music-share-perm {
     font-size: 0.78rem;
-    color: var(--text-secondary, #888);
+    color: var(--color-text-secondary);
 }
 .music-share-remove-btn {
     background: none;
     border: none;
     cursor: pointer;
-    color: var(--text-secondary, #888);
+    color: var(--color-text-secondary);
     padding: 4px;
     transition: color 0.15s;
 }
 .music-share-remove-btn:hover {
-    color: var(--danger, #e74c3c);
+    color: var(--color-danger-text);
 }
 .music-shares-add {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 12px 20px;
-    border-top: 1px solid var(--border-color, #eee);
+    border-top: 1px solid var(--color-border);
     flex-wrap: wrap;
 }
 .music-shares-input {
     flex: 1;
     min-width: 120px;
     padding: 6px 10px;
-    border: 1px solid var(--border-color, #ddd);
+    border: 1px solid var(--color-border);
     border-radius: 6px;
     font-size: 0.88rem;
-    background: var(--bg-secondary, #f9f9f9);
-    color: var(--text-primary, #333);
+    background: var(--color-bg-surface);
+    color: var(--color-text);
 }
 .music-shares-input:focus {
     outline: none;
-    border-color: var(--primary, #4a90d9);
+    border-color: var(--color-text);
 }
 .music-shares-write-label {
     font-size: 0.78rem;
     display: flex;
     align-items: center;
     gap: 4px;
-    color: var(--text-secondary, #666);
+    color: var(--color-text-secondary);
     white-space: nowrap;
 }
 
-/* ========== Dark mode ========== */
-[data-theme="dark"] .music-shares-panel {
-    background: var(--bg-primary, #1e1e1e);
-}
-[data-theme="dark"] .music-shares-input {
-    background: var(--bg-secondary, #2d2d2d);
-    border-color: var(--border-color, #444);
-    color: var(--text-primary, #e0e0e0);
-}
-[data-theme="dark"] .music-track.dragging {
-    background: var(--bg-hover, #2d2d2d);
-}
-[data-theme="dark"] .music-track-remove-btn:hover {
-    background: rgba(231, 76, 60, 0.15);
-}
-[data-theme="dark"] .music-empty-state-title {
-    color: var(--color-text, #e0e0e0);
-}
-[data-theme="dark"] .music-empty-state-desc {
-    color: var(--color-text-muted, #888);
-}
-
 /* ═══════════════ Audio file picker modal ═══════════════ */
 
 .music-picker-overlay {
@@ -1298,7 +1210,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: rgba(0, 0, 0, 0.45);
+    background: var(--color-shadow-4xl);
     opacity: 0;
     transition: opacity 0.2s ease;
 }
@@ -1311,9 +1223,9 @@
     flex-direction: column;
     width: min(560px, 94vw);
     max-height: min(620px, 85vh);
-    background: var(--bg-primary, #fff);
+    background: var(--color-music-background);
     border-radius: 12px;
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 12px 40px var(--color-shadow-xl);
     overflow: hidden;
     transform: translateY(12px);
     transition: transform 0.2s ease;
@@ -1328,57 +1240,57 @@
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
-    border-bottom: 1px solid var(--border-color, #e2e8f0);
+    border-bottom: 1px solid var(--color-border);
 }
 .music-picker-header h3 {
     margin: 0;
     font-size: 16px;
     font-weight: 600;
-    color: var(--color-text, #2d3748);
+    color: var(--color-text);
 }
 .music-picker-header h3 i {
     margin-right: 8px;
-    color: var(--color-primary, #667eea);
+    color: var(--color-primary);
 }
 .music-picker-close {
     background: none;
     border: none;
     font-size: 22px;
     cursor: pointer;
-    color: var(--color-text-muted, #718096);
+    color: var(--color-text-muted);
     padding: 0 4px;
     line-height: 1;
 }
 .music-picker-close:hover {
-    color: var(--color-text, #2d3748);
+    color: var(--color-text);
 }
 
 /* ── search bar ── */
 .music-picker-search {
     position: relative;
     padding: 12px 20px;
-    border-bottom: 1px solid var(--border-color, #e2e8f0);
+    border-bottom: 1px solid var(--color-border);
 }
 .music-picker-search i {
     position: absolute;
     left: 32px;
     top: 50%;
     transform: translateY(-50%);
-    color: var(--color-text-muted, #a0aec0);
+    color: var(--color-text-muted);
     font-size: 13px;
 }
 .music-picker-search input {
     width: 100%;
     padding: 8px 12px 8px 32px;
-    border: 1px solid var(--border-color, #e2e8f0);
+    border: 1px solid var(--color-border);
     border-radius: 6px;
     font-size: 13px;
-    background: var(--bg-secondary, #f7fafc);
-    color: var(--color-text, #2d3748);
+    background: var(--color-bg-surface);
+    color: var(--color-text);
     outline: none;
 }
 .music-picker-search input:focus {
-    border-color: var(--color-primary, #667eea);
+    border-color: var(--color-primary);
     box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
 }
 
@@ -1396,7 +1308,7 @@
     justify-content: center;
     gap: 8px;
     padding: 40px 20px;
-    color: var(--color-text-muted, #718096);
+    color: var(--color-text-muted);
     font-size: 13px;
 }
 
@@ -1408,23 +1320,23 @@
     cursor: pointer;
     transition: background 0.1s;
     font-size: 13px;
-    color: var(--color-text, #2d3748);
+    color: var(--color-text);
 }
 .music-picker-item:hover {
-    background: var(--bg-hover, #edf2f7);
+    background: var(--color-bg-hover);
 }
 .music-picker-item.selected {
     background: rgba(102, 126, 234, 0.08);
 }
 
 .music-picker-item input[type="checkbox"] {
-    accent-color: var(--color-primary, #667eea);
+    accent-color: var(--color-primary);
     width: 16px;
     height: 16px;
     flex-shrink: 0;
 }
 .music-picker-item i.fa-file-audio {
-    color: var(--color-primary, #667eea);
+    color: var(--color-primary);
     font-size: 14px;
     flex-shrink: 0;
 }
@@ -1438,7 +1350,7 @@
 .music-picker-size {
     flex-shrink: 0;
     font-size: 12px;
-    color: var(--color-text-muted, #a0aec0);
+    color: var(--color-text-muted);
 }
 
 /* ── footer ── */
@@ -1447,36 +1359,14 @@
     align-items: center;
     justify-content: space-between;
     padding: 12px 20px;
-    border-top: 1px solid var(--border-color, #e2e8f0);
+    border-top: 1px solid var(--color-border);
 }
 .music-picker-selected-count {
     font-size: 12px;
-    color: var(--color-text-muted, #718096);
+    color: var(--color-text-muted);
     font-weight: 500;
 }
 .music-picker-actions {
     display: flex;
     gap: 8px;
 }
-
-/* ── dark theme ── */
-[data-theme="dark"] .music-picker-modal {
-    background: var(--bg-primary, #1a202c);
-}
-[data-theme="dark"] .music-picker-header h3 {
-    color: var(--color-text, #e0e0e0);
-}
-[data-theme="dark"] .music-picker-search input {
-    background: var(--bg-secondary, #2d3748);
-    border-color: var(--border-color, #4a5568);
-    color: var(--color-text, #e0e0e0);
-}
-[data-theme="dark"] .music-picker-item {
-    color: var(--color-text, #e0e0e0);
-}
-[data-theme="dark"] .music-picker-item:hover {
-    background: var(--bg-hover, #2d3748);
-}
-[data-theme="dark"] .music-picker-item.selected {
-    background: rgba(102, 126, 234, 0.12);
-}
diff --git a/static/css/views/share-public.css b/static/css/views/share-public.css
index 675d0811..e6757abd 100644
--- a/static/css/views/share-public.css
+++ b/static/css/views/share-public.css
@@ -94,12 +94,15 @@ p.subtitle {
     border-color: var(--color-primary);
 }
 .error-text {
-    color: var(--color-error, #e53935);
+    color: var(--color-error-text);
     font-size: 0.85rem;
     margin-bottom: 0.75rem;
 }
 
-/* Primary button */
+/* Primary button
+FIXME: use components/buttons.css ?
+*/
+
 .btn-primary {
     display: inline-block;
     width: 100%;