optimize css

views/css/gallery/image.css

@@ -1,14 +1,3 @@
-:root {
-    --accent: #8b5cf6;
-    --text-primary: #ffffff;
-    --text-secondary: #a1a1aa;
-    --radius-lg: 24px;
-    --radius-full: 9999px;
-    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
-    --glass-bg: rgba(20, 20, 23, 0.7);
-    --nav-height: 80px;
-}
-
 .gallery-hero-placeholder { height: var(--nav-height); width: 100%; }
 
 .item-content-flex-wrapper {
@@ -59,7 +48,7 @@
 }
 
 .provider-name {
-    color: var(--text-secondary);
+    color: var(--color-text-secondary);
     font-size: 1rem;
     opacity: 0.9;
 }
@@ -114,7 +103,7 @@
 }
 
 .download-btn {
-    background: var(--accent);
+    background: var(--color-primary);
     color: white;
 }
 
@@ -134,7 +123,7 @@
 
 .tags-section h3 {
     margin: 0 0 1rem 0;
-    color: var(--text-secondary);
+    color: var(--color-text-secondary);
     font-weight: 500;
 }
 
@@ -146,7 +135,7 @@
 
 .tag-item {
     background: rgba(139,92,246,0.2);
-    color: var(--accent);
+    color: var(--color-primary);
     padding: 0.5rem 1rem;
     border-radius: 99px;
     font-size: 0.95rem;
@@ -185,7 +174,7 @@
 .similar-section h3 {
     margin: 0 0 1.5rem 0;
     font-size: 1.6rem;
-    color: var(--text-primary);
+    color: var(--color-text-primary);
     text-align: center;
 }
 
@@ -248,7 +237,7 @@
     top: 5rem; left: 2rem; z-index: 100;
     display: flex; align-items: center; gap: 0.5rem;
     padding: 0.8rem 1.5rem;
-    background: var(--glass-bg); backdrop-filter: blur(12px);
+    background: var(--color-glass-bg); backdrop-filter: blur(12px);
     border: var(--glass-border); border-radius: var(--radius-full);
     color: white; text-decoration: none; font-weight: 600;
     transition: all 0.2s ease;