refactor(css): maximize usage of variables (1st part, to simplify CSS & style)

note: there is still work to do, but has there are risks to conflict I prefer to commit this first part now

static/css/components/uploadDropdown.css

@@ -16,10 +16,10 @@
     top: calc(100% + 6px);
     left: 0;
     min-width: 200px;
-    background: white;
+    background: var(--color-bg-surface);
     border-radius: 12px;
-    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
-    border: 1px solid #e2e8f0;
+    box-shadow: 0 8px 30px var(--color-shadow-md);
+    border: 1px solid var(--color-border);
     z-index: 1000;
     overflow: hidden;
     animation: dropdownFadeIn 0.15s ease-out;
@@ -48,7 +48,7 @@
     padding: 12px 16px;
     border: none;
     background: none;
-    color: #334155;
+    color: var(--color-text-dark);
     font-size: 14px;
     cursor: pointer;
     transition: background 0.15s ease;
@@ -56,44 +56,22 @@
 }
 
 .upload-dropdown-item:hover {
-    background: #f1f5f9;
+    background: var(--color-border-light);
 }
 
 .upload-dropdown-item:active {
-    background: #e2e8f0;
+    background: var(--color-border);
 }
 
 .upload-dropdown-item i {
     width: 20px;
     text-align: center;
-    color: #64748b;
+    color: var(--color-text-subtle);
     font-size: 15px;
 }
 
 .upload-dropdown-item:first-child {
-    border-bottom: 1px solid #f1f5f9;
-}
-
-[data-theme="dark"] .upload-dropdown-menu {
-    background: #1e293b;
-    border-color: #334155;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
-}
-
-[data-theme="dark"] .upload-dropdown-item {
-    color: #cbd5e1;
-}
-
-[data-theme="dark"] .upload-dropdown-item:hover {
-    background: #334155;
-}
-
-[data-theme="dark"] .upload-dropdown-item:active {
-    background: #475569;
-}
-
-[data-theme="dark"] .upload-dropdown-item i {
-    color: #94a3b8;
+    border-bottom: 1px solid var(--color-border-light);
 }
 
 .upload-caret {