Styles

assets/styles/03-components/dropdown.css

@@ -35,12 +35,12 @@
     padding: 0.5rem 0;
     margin: 0.125rem 0 0;
     font-size: 1rem;
-    color: var(--text-primary, #212529);
+    color: var(--color-text);
     text-align: left;
     list-style: none;
-    background-color: var(--surface, #fff);
+    background-color: var(--color-bg-light);
     background-clip: padding-box;
-    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.15));
+    border: 1px solid var(--color-border);
     border-radius: 0.375rem;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
 }
@@ -55,7 +55,7 @@
     padding: 0.5rem 1rem;
     clear: both;
     font-weight: 400;
-    color: var(--text-primary, #212529);
+    color: var(--color-text);
     text-align: inherit;
     text-decoration: none;
     white-space: nowrap;
@@ -67,20 +67,20 @@
 
 .dropdown-item:hover,
 .dropdown-item:focus {
-    color: var(--text-primary, #1e2125);
-    background-color: var(--surface-hover, #e9ecef);
+    color: var(--color-text);
+    background-color: var(--color-bg);
     text-decoration: none;
 }
 
 .dropdown-item:active {
-    color: var(--text-on-primary, #fff);
-    background-color: var(--primary, #0d6efd);
+    color: var(--color-text-contrast);
+    background-color: var(--color-primary);
     text-decoration: none;
 }
 
 .dropdown-item.disabled,
 .dropdown-item:disabled {
-    color: var(--text-muted, #6c757d);
+    color: var(--color-text-mid);
     pointer-events: none;
     background-color: transparent;
     cursor: not-allowed;
@@ -92,7 +92,7 @@
     padding: 0.5rem 1rem;
     margin-bottom: 0;
     font-size: 0.875rem;
-    color: var(--text-muted, #6c757d);
+    color: var(--color-text-mid);
     white-space: nowrap;
     font-weight: 600;
     text-transform: uppercase;
@@ -103,7 +103,7 @@
     height: 0;
     margin: 0.5rem 0;
     overflow: hidden;
-    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.15));
+    border-top: 1px solid var(--color-border);
 }
 
 /* Dropdown menu positioning variants */
@@ -124,7 +124,7 @@
 
 .dropdown-item strong {
     font-size: 0.95rem;
-    color: var(--text-primary, #212529);
+    color: var(--color-text);
 }
 
 .dropdown-item small {
@@ -157,33 +157,6 @@
     }
 }
 
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-    .dropdown-menu {
-        background-color: var(--surface-dark, #2b2b2b);
-        border-color: var(--border-color-dark, rgba(255, 255, 255, 0.15));
-        color: var(--text-primary-dark, #e9ecef);
-    }
-
-    .dropdown-item {
-        color: var(--text-primary-dark, #e9ecef);
-    }
-
-    .dropdown-item:hover,
-    .dropdown-item:focus {
-        background-color: var(--surface-hover-dark, #3b3b3b);
-        color: var(--text-primary-dark, #fff);
-    }
-
-    .dropdown-item strong {
-        color: var(--text-primary-dark, #fff);
-    }
-
-    .dropdown-header {
-        color: var(--text-muted-dark, #adb5bd);
-    }
-}
-
 /* Animation for dropdown appearance */
 @keyframes dropdown-fade-in {
     from {
@@ -215,7 +188,7 @@
     transform: translateY(-50%);
     width: 1rem;
     height: 1rem;
-    border: 2px solid var(--text-muted, #6c757d);
+    border: 2px solid var(--color-text-mid);
     border-top-color: transparent;
     border-radius: 50%;
     animation: spinner-rotate 0.6s linear infinite;

assets/styles/03-components/video-event.css

@@ -37,14 +37,14 @@
 .video-alt {
     margin-top: var(--spacing-2);
     font-size: 0.9em;
-    color: var(--color-text-secondary, #666);
+    color: var(--color-text-mid);
     font-style: italic;
 }
 
 .content-warning {
     padding: var(--spacing-3);
-    background-color: var(--color-warning-bg, #fff3cd);
-    border: 1px solid var(--color-warning-border, #ffc107);
+    background-color: var(--color-accent-warm);
+    border: 1px solid var(--color-accent-600);
     border-radius: 4px;
     margin-bottom: var(--spacing-3);
 }
@@ -52,13 +52,13 @@
 .content-warning strong {
     display: block;
     margin-bottom: var(--spacing-2);
-    color: var(--color-warning-text, #856404);
+    color: var(--color-text);
 }
 
 .btn-show-nsfw {
     margin-top: var(--spacing-2);
     padding: var(--spacing-2) var(--spacing-3);
-    background-color: var(--color-primary, #007bff);
+    background-color: var(--color-primary);
     color: white;
     border: none;
     border-radius: 4px;
@@ -67,7 +67,7 @@
 }
 
 .btn-show-nsfw:hover {
-    background-color: var(--color-primary-hover, #0056b3);
+    background-color: var(--color-secondary);
 }
 
 .video-description {
@@ -79,7 +79,7 @@
 .video-published {
     margin-top: var(--spacing-2);
     font-size: 0.9em;
-    color: var(--color-text-secondary, #666);
+    color: var(--color-text-mid);
     padding: 0 var(--spacing-2);
 }
 
@@ -98,16 +98,16 @@
 .video-hashtags .hashtag {
     display: inline-block;
     padding: var(--spacing-1) var(--spacing-2);
-    background-color: var(--color-bg-light, #f8f9fa);
+    background-color: var(--color-bg-light);
     border-radius: 12px;
     font-size: 0.85em;
-    color: var(--color-primary, #007bff);
+    color: var(--color-primary);
 }
 
 .video-participants {
     margin-top: var(--spacing-3);
     padding-top: var(--spacing-3);
-    border-top: 1px solid var(--color-border, #dee2e6);
+    border-top: 1px solid var(--color-border);
 }
 
 .video-participants h4 {

assets/styles/04-pages/admin.css

@@ -8,7 +8,7 @@
 .analytics-card {
     margin-bottom: var(--spacing-5);
     padding: var(--spacing-3);
-    background-color: var(--color-card-bg, #f8f9fa);
+    background-color: var(--color-bg-light);
     border-radius: 0.5rem;
 }
 
@@ -50,7 +50,7 @@
 
 .analytics-info {
     padding: var(--spacing-3);
-    background-color: var(--color-info-bg, #e9f5ff);
+    background-color: var(--color-bg-light);
     border-radius: 0.25rem;
 }
 
@@ -106,7 +106,7 @@
 .magazine-table th {
     padding: 0.25rem 0.5rem;
     text-align: left;
-    border-bottom: 1px solid var(--color-border, #dee2e6);
+    border-bottom: 1px solid var(--color-border);
 }
 
 .magazine-table td {
@@ -129,8 +129,8 @@
 
 .content-warning {
     padding: 1rem;
-    background-color: var(--color-warning-bg, #fff3cd);
-    border: 1px solid var(--color-warning-border, #ffc107);
+    background-color: var(--color-accent-warm);
+    border: 1px solid var(--color-accent-600);
     border-radius: 0.25rem;
     margin-bottom: 1rem;
 }
@@ -185,5 +185,5 @@
 .picture-alt {
     margin-top: 0.5rem;
     font-style: italic;
-    color: var(--color-text-muted, #6c757d);
+    color: var(--color-text-mid);
 }

assets/styles/04-pages/analytics.css

@@ -33,5 +33,5 @@
 
 .analytics-info {
     font-size: 0.9rem;
-    color: var(--color-border);
+    color: var(--color-text-mid);
 }