@howssatoshi/quantumcss 1.7.5 → 1.8.0

package/src/styles/quantum-components.css

@@ -1,3 +1,12 @@
+/*!
+ * QuantumCSS Core
+ * Layer: Components (Brand Neutral)
+ * 
+ * RULES:
+ * 1. Components MUST ONLY use semantic tokens.
+ * 2. NO hardcoded colors, beziers, or brand tokens.
+ * 3. Layout and structural logic only.
+ */
 
 .group:hover .group-hover\:opacity-100 { opacity: 1; }
 .group:hover .group-hover\:scale-110 { transform: scale(1.1); }
@@ -12,7 +21,7 @@
   padding: var(--q-space-2) var(--q-space-4);
   border-radius: var(--q-radius-md);
   font-weight: 500;
-  transition: all var(--q-duration-150) var(--q-ease-in-out);
+  transition: all var(--q-duration-fast) var(--q-ease-in-out);
   cursor: pointer;
   border: 1px solid transparent;
   text-decoration: none;
@@ -37,21 +46,20 @@
 }
 
 .btn-secondary {
-  background-color: rgb(255 255 255 / 8%);
-  color: #ffffff !important;
+  background-color: var(--q-color-surface-elevated);
+  color: var(--q-color-text) !important;
   border: 0;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
 }
 
 .btn-secondary:hover {
-  background-color: rgb(255 255 255 / 10%);
+  background-color: color-mix(in srgb, var(--q-color-surface-elevated), white 5%);
 }
 
-body.light-mode .btn-secondary,
 html[data-theme="light"] .btn-secondary {
-  background-color: rgb(0 0 0 / 3%);
-  color: #1e293b !important;
+  background-color: var(--q-color-surface-elevated);
+  color: var(--q-color-text) !important;
   border: 0;
 }
 
@@ -91,19 +99,24 @@ html[data-theme="light"] .btn-secondary {
   font-size: 1.25rem;
 }
 
+/* Glass Utility */
+.glass {
+  background: var(--q-glass-bg);
+  border: 1px solid var(--q-glass-border);
+  backdrop-filter: var(--q-glass-blur);
+  -webkit-backdrop-filter: var(--q-glass-blur);
+  border-radius: var(--q-radius-xl);
+}
+
 /* Card Component */
 .card {
-  background-color: white;
-  color: #1e293b;
+  background-color: var(--q-color-surface);
+  color: var(--q-color-text);
+  border: 1px solid var(--q-color-border);
   border-radius: var(--q-radius-lg);
   box-shadow: var(--q-shadow-md);
   overflow: hidden;
-  transition: all var(--q-duration-200) var(--q-ease-in-out);
-}
-
-body.light-mode .card {
-  background-color: white;
-  color: #1e293b;
+  transition: all var(--q-duration-base) var(--q-ease-in-out);
 }
 
 .card:hover {
@@ -113,7 +126,7 @@ body.light-mode .card {
 
 .card-header {
   padding: var(--q-space-6);
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--q-color-border);
 }
 
 .card-body {
@@ -122,14 +135,9 @@ body.light-mode .card {
 
 .card-footer {
   padding: var(--q-space-6);
-  border-top: 1px solid #e5e7eb;
-  background-color: #f9fafb;
-  color: #1e293b;
-}
-
-body.light-mode .card-footer {
-  background-color: #f9fafb;
-  color: #1e293b;
+  border-top: 1px solid var(--q-color-border);
+  background-color: var(--q-color-bg-muted);
+  color: var(--q-color-text-muted);
 }
 
 /* Input Component */
@@ -137,17 +145,12 @@ body.light-mode .card-footer {
   display: block;
   width: 100%;
   padding: var(--q-space-2) var(--q-space-3);
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--q-color-border);
   border-radius: var(--q-radius-md);
-  background-color: white;
-  color: #1e293b;
+  background-color: var(--q-color-surface);
+  color: var(--q-color-text);
   font-size: 1rem;
-  transition: all var(--q-duration-150) var(--q-ease-in-out);
-}
-
-body.light-mode .input {
-  background-color: white;
-  color: #1e293b;
+  transition: all var(--q-duration-fast) var(--q-ease-in-out);
 }
 
 textarea.input {
@@ -157,7 +160,7 @@ textarea.input {
 .input:focus {
   outline: none;
   border-color: var(--q-color-primary);
-  box-shadow: 0 0 0 3px var(--q-color-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-color-primary) 30%, transparent);
 }
 
 /* Date & Time Input Specifics */
@@ -186,23 +189,18 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 
 .input:disabled {
-  background-color: #f3f4f6;
-  color: #6b7280;
+  background-color: var(--q-color-bg-muted);
+  color: var(--q-color-text-muted);
   cursor: not-allowed;
 }
 
-body.light-mode .input:disabled {
-  background-color: #f3f4f6;
-  color: #6b7280;
-}
-
 .input-error {
-  border-color: var(--q-color-error);
+  border-color: var(--q-color-danger);
 }
 
 .input-error:focus {
-  border-color: var(--q-color-error);
-  box-shadow: 0 0 0 3px var(--q-color-error);
+  border-color: var(--q-color-danger);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-color-danger) 30%, transparent);
 }
 
 /* Badge Component */
@@ -221,64 +219,33 @@ body.light-mode .input:disabled {
 }
 
 .badge-primary {
-  background-color: rgb(0 212 255 / 15%);
-  color: #00d4ff;
-  border-color: rgb(0 212 255 / 30%);
+  background-color: var(--q-color-info-soft);
+  color: var(--q-color-info);
+  border-color: color-mix(in srgb, var(--q-color-info) 30%, transparent);
 }
 
 .badge-secondary {
-  background-color: rgb(255 255 255 / 5%);
-  color: rgb(255 255 255 / 80%);
-  border-color: rgb(255 255 255 / 10%);
+  background-color: var(--q-color-surface-elevated);
+  color: var(--q-color-text-muted);
+  border-color: var(--q-color-border);
 }
 
 .badge-success {
-  background-color: rgb(16 185 129 / 15%);
-  color: #10b981;
-  border-color: rgb(16 185 129 / 30%);
+  background-color: var(--q-color-success-soft);
+  color: var(--q-color-success);
+  border-color: color-mix(in srgb, var(--q-color-success) 30%, transparent);
 }
 
 .badge-warning {
-  background-color: rgb(245 158 11 / 15%);
-  color: #f59e0b;
-  border-color: rgb(245 158 11 / 30%);
+  background-color: var(--q-color-warning-soft);
+  color: var(--q-color-warning);
+  border-color: color-mix(in srgb, var(--q-color-warning) 30%, transparent);
 }
 
 .badge-error {
-  background-color: rgb(239 68 68 / 15%);
-  color: #ef4444;
-  border-color: rgb(239 68 68 / 30%);
-}
-
-/* Light Mode Overrides for Badges */
-html[data-theme="light"] .badge-primary {
-  background-color: rgb(59 130 246 / 10%);
-  color: #2563eb;
-  border-color: rgb(59 130 246 / 20%);
-}
-
-html[data-theme="light"] .badge-secondary {
-  background-color: rgb(0 0 0 / 5%);
-  color: #475569;
-  border-color: rgb(0 0 0 / 10%);
-}
-
-html[data-theme="light"] .badge-success {
-  background-color: rgb(16 185 129 / 10%);
-  color: #059669;
-  border-color: rgb(16 185 129 / 20%);
-}
-
-html[data-theme="light"] .badge-warning {
-  background-color: rgb(245 158 11 / 10%);
-  color: #d97706;
-  border-color: rgb(245 158 11 / 20%);
-}
-
-html[data-theme="light"] .badge-error {
-  background-color: rgb(239 68 68 / 10%);
-  color: #dc2626;
-  border-color: rgb(239 68 68 / 20%);
+  background-color: var(--q-color-danger-soft);
+  color: var(--q-color-danger);
+  border-color: color-mix(in srgb, var(--q-color-danger) 30%, transparent);
 }
 
 /* Alert Component */
@@ -289,34 +256,34 @@ html[data-theme="light"] .badge-error {
 }
 
 .alert-success {
-  background-color: #d1fae5;
-  border-color: #6ee7b7;
-  color: #065f46;
+  background-color: var(--q-color-success-soft);
+  border-color: color-mix(in srgb, var(--q-color-success) 20%, transparent);
+  color: var(--q-color-success);
 }
 
 .alert-warning {
-  background-color: #fed7aa;
-  border-color: #fbbf24;
-  color: #92400e;
+  background-color: var(--q-color-warning-soft);
+  border-color: color-mix(in srgb, var(--q-color-warning) 20%, transparent);
+  color: var(--q-color-warning);
 }
 
 .alert-error {
-  background-color: #fee2e2;
-  border-color: #f87171;
-  color: #991b1b;
+  background-color: var(--q-color-danger-soft);
+  border-color: color-mix(in srgb, var(--q-color-danger) 20%, transparent);
+  color: var(--q-color-danger);
 }
 
 .alert-info {
-  background-color: #dbeafe;
-  border-color: #60a5fa;
-  color: #1e40af;
+  background-color: var(--q-color-info-soft);
+  border-color: color-mix(in srgb, var(--q-color-info) 20%, transparent);
+  color: var(--q-color-info);
 }
 
 /* Modal Component */
 .modal-overlay {
   position: fixed;
   inset: 0;
-  background-color: rgb(0 0 0 / 50%);
+  background-color: color-mix(in srgb, var(--q-color-bg) 50%, transparent);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -324,8 +291,8 @@ html[data-theme="light"] .badge-error {
 }
 
 .modal-content {
-  background-color: white;
-  color: #1e293b;
+  background-color: var(--q-color-surface);
+  color: var(--q-color-text);
   border-radius: var(--q-radius-lg);
   box-shadow: var(--q-shadow-2xl);
   max-width: 90vw;
@@ -333,17 +300,12 @@ html[data-theme="light"] .badge-error {
   overflow-y: auto;
 }
 
-body.light-mode .modal-content {
-  background-color: white;
-  color: #1e293b;
-}
-
 /* Loading Spinner */
 .spinner {
   display: inline-block;
   width: 1.5rem;
   height: 1.5rem;
-  border: 2px solid rgb(255 255 255 / 10%);
+  border: 2px solid var(--q-color-border);
   border-top-color: var(--q-color-primary);
   border-radius: 50%;
   animation: spin 1s linear infinite;
@@ -355,7 +317,11 @@ body.light-mode .modal-content {
 
 /* Skeleton Loading */
 .skeleton {
-  background: linear-gradient(90deg, rgb(255 255 255 / 5%) 25%, rgb(255 255 255 / 10%) 50%, rgb(255 255 255 / 5%) 75%);
+  background: linear-gradient(90deg, 
+    var(--q-color-bg-muted) 25%, 
+    color-mix(in srgb, var(--q-color-bg-muted), white 5%) 50%, 
+    var(--q-color-bg-muted) 75%
+  );
   background-size: 200% 100%;
   animation: shimmer 2s infinite;
   border-radius: var(--q-radius-md);
@@ -366,11 +332,6 @@ body.light-mode .modal-content {
   100% { background-position: -200% 0; }
 }
 
-body.light-mode .skeleton {
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-  background-size: 200% 100%;
-}
-
 /* Tooltip Component */
 .tooltip {
   position: relative;
@@ -381,15 +342,15 @@ body.light-mode .skeleton {
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
-  background-color: #1f2937;
-  color: white;
+  background-color: var(--q-color-bg-muted);
+  color: var(--q-color-text);
   padding: var(--q-space-1) var(--q-space-2);
   border-radius: var(--q-radius-md);
   font-size: 0.875rem;
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
-  transition: all var(--q-duration-150) var(--q-ease-in-out);
+  transition: all var(--q-duration-fast) var(--q-ease-in-out);
   z-index: 10;
   margin-bottom: var(--q-space-1);
 }
@@ -409,9 +370,9 @@ body.light-mode .skeleton {
   position: absolute;
   top: 100%;
   left: 0;
-  background-color: white;
-  color: #1e293b;
-  border: 1px solid #e5e7eb;
+  background-color: var(--q-color-surface);
+  color: var(--q-color-text);
+  border: 1px solid var(--q-color-border);
   border-radius: var(--q-radius-md);
   box-shadow: var(--q-shadow-lg);
   min-width: 200px;
@@ -419,12 +380,7 @@ body.light-mode .skeleton {
   opacity: 0;
   visibility: hidden;
   transform: translateY(-10px);
-  transition: all var(--q-duration-150) var(--q-ease-in-out);
-}
-
-body.light-mode .dropdown-content {
-  background-color: white;
-  color: #1e293b;
+  transition: all var(--q-duration-fast) var(--q-ease-in-out);
 }
 
 .dropdown.active .dropdown-content {
@@ -441,74 +397,53 @@ body.light-mode .dropdown-content {
   background: none;
   border: none;
   cursor: pointer;
-  color: #1e293b;
-  transition: background-color var(--q-duration-150) var(--q-ease-in-out);
+  color: var(--q-color-text);
+  transition: background-color var(--q-duration-fast) var(--q-ease-in-out);
 }
 
 .dropdown-item:hover {
-  background-color: #f3f4f6;
-  color: #1e293b;
-}
-
-body.light-mode .dropdown-item {
-  color: #1e293b;
-}
-
-body.light-mode .dropdown-item:hover {
-  background-color: #f3f4f6;
-  color: #1e293b;
+  background-color: var(--q-color-bg-muted);
+  color: var(--q-color-text);
 }
 
 /* Accordion Component */
 .accordion-item {
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--q-card-border);
   border-radius: var(--q-radius-md);
   margin-bottom: var(--q-space-2);
   overflow: hidden;
 }
 
 .accordion-header {
-  padding: var(--q-space-4);
-  background-color: #f9fafb;
-  color: #1e293b;
+  padding: var(--q-space-3) var(--q-space-4);
+  font-weight: 600;
+  background-color: var(--q-color-surface-elevated);
+  border-bottom: 1px solid var(--q-color-border);
+  color: var(--q-color-text);
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  transition: background-color var(--q-duration-150) var(--q-ease-in-out);
+  transition: background-color var(--q-duration-fast) var(--q-ease-in-out);
 }
 
 .accordion-header:hover {
-  background-color: #f3f4f6;
-  color: #1e293b;
+  background-color: color-mix(in srgb, var(--q-color-surface-elevated), white 5%);
+  color: var(--q-color-text);
 }
 
 .accordion-content {
-  padding: var(--q-space-4);
-  background-color: white;
-  color: #1e293b;
+  padding: 0 var(--q-space-4);
+  background-color: var(--q-color-surface);
+  color: var(--q-color-text);
   max-height: 0;
   overflow: hidden;
-  transition: max-height var(--q-duration-300) var(--q-ease-in-out);
-}
-
-body.light-mode .accordion-header {
-  background-color: #f9fafb;
-  color: #1e293b;
-}
-
-body.light-mode .accordion-header:hover {
-  background-color: #f3f4f6;
-  color: #1e293b;
-}
-
-body.light-mode .accordion-content {
-  background-color: white;
-  color: #1e293b;
+  transition: max-height var(--q-duration-slow) var(--q-ease-in-out), padding var(--q-duration-slow) var(--q-ease-in-out);
 }
 
 .accordion-item.active .accordion-content {
   max-height: 500px;
+  padding: var(--q-space-4);
 }
 
 .accordion-item.active .accordion-icon {
@@ -516,13 +451,13 @@ body.light-mode .accordion-content {
 }
 
 .accordion-icon {
-  transition: transform var(--q-duration-300) var(--q-ease-in-out);
+  transition: transform var(--q-duration-slow) var(--q-ease-in-out);
 }
 
 /* Tab Component */
 .tab-list {
   display: flex;
-  border-bottom: 1px solid rgb(255 255 255 / 10%);
+  border-bottom: 1px solid var(--q-color-border);
 }
 
 .tab-button {
@@ -531,35 +466,17 @@ body.light-mode .accordion-content {
   border: none;
   cursor: pointer;
   border-bottom: 2px solid transparent;
-  color: var(--q-text-secondary);
+  color: var(--q-color-text-muted);
   font-weight: 500;
-  transition: all var(--q-duration-150) var(--q-ease-in-out);
+  transition: all var(--q-duration-fast) var(--q-ease-in-out);
 }
 
 .tab-button:hover {
-  background-color: rgb(255 255 255 / 5%);
-  color: var(--q-text-primary);
+  background-color: var(--q-color-surface-elevated);
+  color: var(--q-color-text);
 }
 
 .tab-button.active {
-  border-bottom-color: var(--q-color-starlight-blue);
-  color: var(--q-color-starlight-blue);
-}
-
-body.light-mode .tab-list {
-  border-bottom-color: #e2e8f0;
-}
-
-body.light-mode .tab-button {
-  color: #64748b;
-}
-
-body.light-mode .tab-button:hover {
-  background-color: #f1f5f9;
-  color: #0f172a;
-}
-
-body.light-mode .tab-button.active {
   border-bottom-color: var(--q-color-primary);
   color: var(--q-color-primary);
 }
@@ -580,14 +497,14 @@ body.light-mode .tab-button.active {
 .progress {
   width: 100%;
   height: 0.5rem;
-  background-color: #e5e7eb;
+  background-color: var(--q-color-border);
   border-radius: var(--q-radius-full);
   overflow: hidden;
 }
 
 .progress-bar {
   height: 100%;
-  transition: width var(--q-duration-300) var(--q-ease-in-out);
+  transition: width var(--q-duration-slow) var(--q-ease-in-out);
 }
 
 /* Toggle Switch */
@@ -608,8 +525,8 @@ body.light-mode .tab-button.active {
   position: absolute;
   cursor: pointer;
   inset: 0;
-  background-color: #cbd5e1;
-  transition: background-color var(--q-duration-150) var(--q-ease-in-out);
+  background-color: var(--q-color-text-muted);
+  transition: background-color var(--q-duration-fast) var(--q-ease-in-out);
   border-radius: var(--q-radius-full);
 }
 
@@ -621,7 +538,7 @@ body.light-mode .tab-button.active {
   left: 0.125rem;
   bottom: 0.125rem;
   background-color: white;
-  transition: transform var(--q-duration-150) var(--q-ease-in-out);
+  transition: transform var(--q-duration-fast) var(--q-ease-in-out);
   border-radius: 50%;
 }
 
@@ -653,7 +570,7 @@ body.light-mode .tab-button.active {
 }
 
 .animate-fade-in {
-  animation: fadeIn var(--q-duration-500) var(--q-ease-in-out);
+  animation: fadeIn var(--q-duration-slow) var(--q-ease-in-out);
 }
 
 @keyframes fadeIn {
@@ -662,7 +579,16 @@ body.light-mode .tab-button.active {
 }
 
 .animate-slide-up {
-  animation: slideUp var(--q-duration-300) var(--q-ease-out);
+  animation: slideUp var(--q-duration-slow) var(--q-ease-out);
+}
+
+@keyframes slideUp {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+.animate-slide-up {
+  animation: slideUp var(--q-duration-slow) var(--q-ease-out);
 }
 
 @keyframes slideUp {
@@ -671,7 +597,7 @@ body.light-mode .tab-button.active {
 }
 
 .animate-slide-down {
-  animation: slideDown var(--q-duration-300) var(--q-ease-out);
+  animation: slideDown var(--q-duration-slow) var(--q-ease-out);
 }
 
 @keyframes slideDown {
@@ -691,59 +617,39 @@ body.light-mode .tab-button.active {
 }
 
 .table-wrapper::-webkit-scrollbar-track {
-  background: rgb(255 255 255 / 5%);
+  background: var(--q-color-bg-muted);
   border-radius: 4px;
 }
 
 .table-wrapper::-webkit-scrollbar-thumb {
-  background: var(--q-color-starlight-blue, #3b82f6);
+  background: var(--q-color-primary);
   border-radius: 4px;
 }
 
-body.light-mode .table-wrapper::-webkit-scrollbar-track {
-  background: rgb(0 0 0 / 5%);
-}
-
 .table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.875rem;
   text-align: left;
-  color: var(--q-text-primary);
+  color: var(--q-color-text);
 }
 
 .table th {
   padding: var(--q-space-3) var(--q-space-4);
   font-weight: 600;
-  background-color: rgb(255 255 255 / 5%);
-  border-bottom: 2px solid rgb(255 255 255 / 10%);
-  color: var(--q-text-primary);
+  background-color: var(--q-color-surface-elevated);
+  border-bottom: 2px solid var(--q-color-border);
+  color: var(--q-color-text);
 }
 
 .table td {
   padding: var(--q-space-3) var(--q-space-4);
-  border-bottom: 1px solid rgb(255 255 255 / 10%);
-  color: var(--q-text-secondary);
+  border-bottom: 1px solid var(--q-color-border);
+  color: var(--q-color-text-muted);
 }
 
 .table tbody tr:hover {
-  background-color: rgb(255 255 255 / 3%);
-}
-
-/* Light Mode Table Styles */
-body.light-mode .table th {
-  background-color: #f8fafc;
-  border-bottom-color: #e2e8f0;
-  color: #0f172a;
-}
-
-body.light-mode .table td {
-  border-bottom-color: #e2e8f0;
-  color: #334155;
-}
-
-body.light-mode .table tbody tr:hover {
-  background-color: #f1f5f9;
+  background-color: var(--q-color-bg-muted);
 }
 
 /* Overflow Utility */
@@ -765,7 +671,7 @@ body.light-mode .table tbody tr:hover {
   display: grid;
   grid-template-columns: 260px minmax(0, 1fr);
   height: 100vh;
-  background: var(--q-bg-primary, #08081a);
+  background: var(--q-color-bg);
   overflow: hidden;
   max-width: 100vw;
 }
@@ -780,8 +686,8 @@ body.light-mode .table tbody tr:hover {
 
 /* Sidebar navigation container */
 .sidebar {
-  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 8, 26, 0.98) 100%);
-  border-right: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--q-color-surface);
+  border-right: 1px solid var(--q-color-border);
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
@@ -802,8 +708,8 @@ body.light-mode .table tbody tr:hover {
   align-items: center;
   margin-bottom: 2rem;
   padding: 1rem 1.5rem;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--q-color-surface-elevated);
+  border: 1px solid var(--q-color-border);
   border-radius: 1rem;
 }
 
@@ -822,15 +728,11 @@ body.light-mode .table tbody tr:hover {
   margin-bottom: 2rem;
 }
 
-/* Light mode overrides for layout */
-body.light-mode .sidebar {
-  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
-  border-right-color: #e2e8f0;
-}
-
-body.light-mode .top-nav {
-  background: #ffffff;
-  border-color: #e2e8f0;
+/* Page actions container */
+.page-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
 }
 
 /* Responsive layout adjustments */
@@ -853,9 +755,6 @@ body.light-mode .top-nav {
     display: none;
   }
   
-  .main-content {
-  }
-  
   .page-header {
     flex-direction: column;
     align-items: flex-start;
@@ -879,7 +778,7 @@ body.light-mode .top-nav {
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.15em;
-  color: var(--q-text-muted, #64748b);
+  color: var(--q-color-text-muted);
   margin-bottom: 0.75rem;
   padding-left: 0.75rem;
 }
@@ -891,10 +790,10 @@ body.light-mode .top-nav {
   gap: 0.875rem;
   padding: 0.75rem;
   border-radius: 0.625rem;
-  color: var(--q-text-secondary, #94a3b8);
+  color: var(--q-color-text-muted);
   font-size: 0.875rem;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all var(--q-duration-base) var(--q-ease-in-out);
   margin-bottom: 0.25rem;
   text-decoration: none;
   border: none;
@@ -904,13 +803,13 @@ body.light-mode .top-nav {
 }
 
 .nav-item:hover {
-  background: rgba(255, 255, 255, 0.05);
-  color: var(--q-text-primary, #f1f5f9);
+  background: var(--q-color-surface-elevated);
+  color: var(--q-color-text);
 }
 
 .nav-item.active {
-  background: rgba(0, 212, 255, 0.12);
-  color: var(--q-color-starlight, #00d4ff);
+  background: color-mix(in srgb, var(--q-color-primary) 12%, transparent);
+  color: var(--q-color-primary);
 }
 
 /* Constrain nav item icons - prevent oversized icons */
@@ -932,14 +831,10 @@ body.light-mode .top-nav {
 }
 
 .sidebar::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--q-color-border);
   border-radius: 2px;
 }
 
-body.light-mode .sidebar::-webkit-scrollbar-thumb {
-  background: #cbd5e1;
-}
-
 /* Navigation badge (count) */
 .nav-badge {
   margin-left: auto;
@@ -947,18 +842,8 @@ body.light-mode .sidebar::-webkit-scrollbar-thumb {
   font-weight: 600;
   padding: 0.125rem 0.5rem;
   border-radius: 9999px;
-  background: rgba(239, 68, 68, 0.2);
-  color: #f87171;
-}
-
-/* Light mode overrides for navigation */
-body.light-mode .nav-item:hover {
-  background: #f1f5f9;
-  color: #0f172a;
-}
-
-body.light-mode .nav-section-title {
-  color: #64748b;
+  background: var(--q-color-danger-soft);
+  color: var(--q-color-danger);
 }
 
 /* ============================================================================
@@ -976,15 +861,15 @@ body.light-mode .nav-section-title {
 
 /* Individual stat card */
 .stat-card {
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--q-color-surface);
+  border: 1px solid var(--q-color-border);
   border-radius: 1rem;
   padding: 1.5rem;
-  transition: all 0.3s ease;
+  transition: all var(--q-duration-slow) var(--q-ease-in-out);
 }
 
 .stat-card:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--q-color-surface-elevated);
   transform: translateY(-2px);
 }
 
@@ -1008,42 +893,42 @@ body.light-mode .nav-section-title {
 
 /* Icon color variants */
 .stat-icon-blue {
-  background: rgba(59, 130, 246, 0.15);
-  color: #60a5fa;
+  background: var(--q-color-info-soft);
+  color: var(--q-color-info);
 }
 
 .stat-icon-green {
-  background: rgba(16, 185, 129, 0.15);
-  color: #34d399;
+  background: var(--q-color-success-soft);
+  color: var(--q-color-success);
 }
 
 .stat-icon-orange {
-  background: rgba(249, 115, 22, 0.15);
-  color: #fb923c;
+  background: var(--q-color-warning-soft);
+  color: var(--q-color-warning);
 }
 
 .stat-icon-purple {
-  background: rgba(139, 92, 246, 0.15);
-  color: #a78bfa;
+  background: color-mix(in srgb, var(--q-color-primary) 15%, transparent);
+  color: var(--q-color-primary);
 }
 
 .stat-icon-red {
-  background: rgba(239, 68, 68, 0.15);
-  color: #f87171;
+  background: var(--q-color-danger-soft);
+  color: var(--q-color-danger);
 }
 
 /* Stat value display */
 .stat-value {
   font-size: 1.875rem;
   font-weight: 700;
-  color: var(--q-text-primary, #f1f5f9);
+  color: var(--q-color-text);
   margin-bottom: 0.25rem;
 }
 
 /* Stat label */
 .stat-label {
   font-size: 0.875rem;
-  color: var(--q-text-muted, #64748b);
+  color: var(--q-color-text-muted);
 }
 
 /* Trend indicator */
@@ -1058,56 +943,13 @@ body.light-mode .nav-section-title {
 }
 
 .stat-trend-up {
-  background: rgba(16, 185, 129, 0.15);
-  color: #34d399;
+  background: var(--q-color-success-soft);
+  color: var(--q-color-success);
 }
 
 .stat-trend-down {
-  background: rgba(239, 68, 68, 0.15);
-  color: #f87171;
-}
-
-/* Light mode overrides for stat cards */
-body.light-mode .stat-card {
-  background: #ffffff;
-  border-color: #e2e8f0;
-}
-
-body.light-mode .stat-card:hover {
-  background: #f8fafc;
-}
-
-body.light-mode .stat-icon-blue {
-  background: rgba(59, 130, 246, 0.1);
-}
-
-body.light-mode .stat-icon-green {
-  background: rgba(16, 185, 129, 0.1);
-}
-
-body.light-mode .stat-icon-orange {
-  background: rgba(249, 115, 22, 0.1);
-}
-
-body.light-mode .stat-icon-purple {
-  background: rgba(139, 92, 246, 0.1);
-}
-
-body.light-mode .stat-icon-red {
-  background: rgba(239, 68, 68, 0.1);
-}
-
-/* Responsive stats grid */
-@media (max-width: 1280px) {
-  .stats-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 768px) {
-  .stats-grid {
-    grid-template-columns: 1fr;
-  }
+  background: var(--q-color-danger-soft);
+  color: var(--q-color-danger);
 }
 
 /* ============================================================================
@@ -1120,20 +962,20 @@ body.light-mode .stat-icon-red {
   width: 40px;
   height: 40px;
   border-radius: 0.625rem;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  color: var(--q-text-secondary, #94a3b8);
+  background: var(--q-color-surface);
+  border: 1px solid var(--q-color-border);
+  color: var(--q-color-text-muted);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all var(--q-duration-base) var(--q-ease-in-out);
   position: relative;
 }
 
 .icon-btn:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: var(--q-text-primary, #f1f5f9);
+  background: var(--q-color-surface-elevated);
+  color: var(--q-color-text);
 }
 
 /* Circular icon button */
@@ -1166,40 +1008,26 @@ body.light-mode .stat-icon-red {
   width: 32px;
   height: 32px;
   border-radius: 0.5rem;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  color: var(--q-text-muted, #64748b);
+  background: var(--q-color-surface);
+  border: 1px solid var(--q-color-border);
+  color: var(--q-color-text-muted);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all var(--q-duration-base) var(--q-ease-in-out);
 }
 
 .action-btn:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: var(--q-text-primary, #f1f5f9);
+  background: var(--q-color-surface-elevated);
+  color: var(--q-color-text);
 }
 
 /* Delete action button */
 .action-btn-delete:hover {
-  background: rgba(239, 68, 68, 0.15);
-  color: #f87171;
-  border-color: rgba(239, 68, 68, 0.3);
-}
-
-/* Light mode overrides for icon buttons */
-body.light-mode .icon-btn,
-body.light-mode .action-btn {
-  background: #f1f5f9;
-  border-color: #e2e8f0;
-  color: #64748b;
-}
-
-body.light-mode .icon-btn:hover,
-body.light-mode .action-btn:hover {
-  background: #e2e8f0;
-  color: #0f172a;
+  background: var(--q-color-danger-soft);
+  color: var(--q-color-danger);
+  border-color: color-mix(in srgb, var(--q-color-danger) 30%, transparent);
 }
 
 /* ============================================================================
@@ -1211,7 +1039,7 @@ body.light-mode .action-btn:hover {
 .theme-toggle-wrapper {
   margin-top: auto;
   padding-top: 1.5rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  border-top: 1px solid var(--q-color-border);
 }
 
 /* Theme toggle button */
@@ -1222,18 +1050,18 @@ body.light-mode .action-btn:hover {
   justify-content: center;
   gap: 0.5rem;
   padding: 0.75rem;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--q-color-surface);
+  border: 1px solid var(--q-color-border);
   border-radius: 0.625rem;
-  color: var(--q-text-secondary, #94a3b8);
+  color: var(--q-color-text-muted);
   font-size: 0.875rem;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all var(--q-duration-base) var(--q-ease-in-out);
 }
 
 .theme-btn:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: var(--q-text-primary, #f1f5f9);
+  background: var(--q-color-surface-elevated);
+  color: var(--q-color-text);
 }
 
 /* Sun/moon icon visibility */
@@ -1241,25 +1069,14 @@ body.light-mode .action-btn:hover {
   display: none;
 }
 
-body.light-mode .sun-icon {
+html[data-theme="light"] .sun-icon {
   display: inline;
 }
 
-body.light-mode .moon-icon {
+html[data-theme="light"] .moon-icon {
   display: none;
 }
 
-/* Light mode overrides for theme toggle */
-body.light-mode .theme-btn {
-  background: #f1f5f9;
-  border-color: #e2e8f0;
-  color: #475569;
-}
-
-body.light-mode .theme-toggle-wrapper {
-  border-top-color: #e2e8f0;
-}
-
 /* ============================================================================
    AVATARS
    User avatars with initials and images
@@ -1270,13 +1087,13 @@ body.light-mode .theme-toggle-wrapper {
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #3b82f6, var(--q-color-starlight, #00d4ff));
+  background: var(--q-gradient-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   font-size: 0.875rem;
-  color: white;
+  color: var(--q-color-text-inverse);
   position: relative;
   flex-shrink: 0;
   overflow: hidden;
@@ -1327,22 +1144,13 @@ body.light-mode .theme-toggle-wrapper {
 
 .user-name {
   font-weight: 600;
-  color: var(--q-text-primary, #f1f5f9);
+  color: var(--q-color-text);
   margin-bottom: 0.125rem;
 }
 
 .user-email {
   font-size: 0.75rem;
-  color: var(--q-text-muted, #64748b);
-}
-
-/* Light mode overrides for user info */
-body.light-mode .user-name {
-  color: #0f172a;
-}
-
-body.light-mode .user-email {
-  color: #64748b;
+  color: var(--q-color-text-muted);
 }
 
 /* ============================================================================
@@ -1370,30 +1178,30 @@ body.light-mode .user-email {
 
 /* Status variants */
 .status-active {
-  background: rgba(16, 185, 129, 0.15);
-  color: #34d399;
+  background: var(--q-color-success-soft);
+  color: var(--q-color-success);
 }
 
-.status-active__:before {
-  background: #34d399;
+.status-active::before {
+  background: var(--q-color-success);
 }
 
 .status-pending {
-  background: rgba(245, 158, 11, 0.15);
-  color: #fbbf24;
+  background: var(--q-color-warning-soft);
+  color: var(--q-color-warning);
 }
 
 .status-pending::before {
-  background: #fbbf24;
+  background: var(--q-color-warning);
 }
 
 .status-inactive {
-  background: rgba(239, 68, 68, 0.15);
-  color: #f87171;
+  background: var(--q-color-danger-soft);
+  color: var(--q-color-danger);
 }
 
-.status-inactive__:before {
-  background: #f87171;
+.status-inactive::before {
+  background: var(--q-color-danger);
 }
 
 /* Role badge */
@@ -1403,18 +1211,19 @@ body.light-mode .user-email {
   border-radius: 0.375rem;
   font-size: 0.75rem;
   font-weight: 500;
-  background: rgba(255, 255, 255, 0.05);
-  color: var(--q-text-secondary, #94a3b8);
+  background: var(--q-color-surface);
+  color: var(--q-color-text-muted);
 }
 
 .role-admin {
-  background: rgba(0, 212, 255, 0.15);
-  color: var(--q-color-starlight, #00d4ff);
+  background: color-mix(in srgb, var(--q-color-primary) 15%, transparent);
+  color: var(--q-color-primary);
 }
 
 .role-moderator {
-  background: rgba(139, 92, 246, 0.15);
-  color: #a78bfa;
+  background: color-mix(in srgb, var(--q-color-primary) 15%, transparent);
+  color: var(--q-color-primary);
+  opacity: 0.8;
 }
 
 /* Count badge */
@@ -1425,11 +1234,11 @@ body.light-mode .user-email {
   min-width: 20px;
   height: 20px;
   padding: 0 6px;
-  background: linear-gradient(135deg, var(--q-color-starlight, #00d4ff), #3b82f6);
+  background: var(--q-gradient-primary);
   border-radius: 10px;
   font-size: 0.6875rem;
   font-weight: 700;
-  color: white;
+  color: var(--q-color-text-inverse);
 }
 
 /* Label/tag */
@@ -1444,59 +1253,18 @@ body.light-mode .user-email {
 }
 
 .label-work {
-  background: rgba(59, 130, 246, 0.2);
-  color: #60a5fa;
+  background: var(--q-color-info-soft);
+  color: var(--q-color-info);
 }
 
 .label-personal {
-  background: rgba(16, 185, 129, 0.2);
-  color: #34d399;
+  background: var(--q-color-success-soft);
+  color: var(--q-color-success);
 }
 
 .label-important {
-  background: rgba(239, 68, 68, 0.2);
-  color: #f87171;
-}
-
-/* Light mode overrides for badges */
-body.light-mode .status-active {
-  background: rgba(16, 185, 129, 0.1);
-  color: #059669;
-}
-
-body.light-mode .status-pending {
-  background: rgba(245, 158, 11, 0.1);
-  color: #d97706;
-}
-
-body.light-mode .status-inactive {
-  background: rgba(239, 68, 68, 0.1);
-  color: #dc2626;
-}
-
-body.light-mode .role-badge {
-  background: #f1f5f9;
-  color: #475569;
-}
-
-body.light-mode .role-admin {
-  background: rgba(0, 212, 255, 0.1);
-  color: #0284c7;
-}
-
-body.light-mode .label-work {
-  background: rgba(59, 130, 246, 0.1);
-  color: #2563eb;
-}
-
-body.light-mode .label-personal {
-  background: rgba(16, 185, 129, 0.1);
-  color: #059669;
-}
-
-body.light-mode .label-important {
-  background: rgba(239, 68, 68, 0.1);
-  color: #dc2626;
+  background: var(--q-color-danger-soft);
+  color: var(--q-color-danger);
 }
 
 /* ============================================================================
@@ -1513,22 +1281,22 @@ body.light-mode .label-important {
 .search-input {
   width: 280px;
   padding: 0.625rem 1rem 0.625rem 2.5rem;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--q-color-surface);
+  border: 1px solid var(--q-color-border);
   border-radius: 0.625rem;
-  color: var(--q-text-primary, #f1f5f9);
+  color: var(--q-color-text);
   font-size: 0.875rem;
-  transition: all 0.2s ease;
+  transition: all var(--q-duration-base) var(--q-ease-in-out);
 }
 
 .search-input:focus {
   outline: none;
-  border-color: rgba(0, 212, 255, 0.5);
-  background: rgba(255, 255, 255, 0.08);
+  border-color: color-mix(in srgb, var(--q-color-primary) 50%, transparent);
+  background: var(--q-color-surface-elevated);
 }
 
 .search-input::placeholder {
-  color: var(--q-text-muted, #64748b);
+  color: var(--q-color-text-muted);
 }
 
 /* Search icon */
@@ -1537,7 +1305,7 @@ body.light-mode .label-important {
   left: 0.875rem;
   top: 50%;
   transform: translateY(-50%);
-  color: var(--q-text-muted, #64748b);
+  color: var(--q-color-text-muted);
   pointer-events: none;
 }
 
@@ -1549,10 +1317,10 @@ body.light-mode .label-important {
 /* Filter select (for table filters) */
 .filter-select {
   padding: 0.5rem 2rem 0.5rem 0.75rem;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--q-color-surface);
+  border: 1px solid var(--q-color-border);
   border-radius: 0.5rem;
-  color: var(--q-text-secondary, #94a3b8);
+  color: var(--q-color-text-muted);
   font-size: 0.875rem;
   cursor: pointer;
   appearance: none;
@@ -1564,24 +1332,7 @@ body.light-mode .label-important {
 
 .filter-select:focus {
   outline: none;
-  border-color: rgba(0, 212, 255, 0.5);
-}
-
-/* Light mode overrides for search */
-body.light-mode .search-input,
-body.light-mode .filter-select {
-  background: #f1f5f9;
-  border-color: #e2e8f0;
-  color: #0f172a;
-}
-
-body.light-mode .search-input:focus {
-  border-color: #3b82f6;
-  background: #ffffff;
-}
-
-body.light-mode .search-input::placeholder {
-  color: #94a3b8;
+  border-color: color-mix(in srgb, var(--q-color-primary) 50%, transparent);
 }
 
 /* ============================================================================
@@ -1596,24 +1347,24 @@ body.light-mode .search-input::placeholder {
   right: 2px;
   width: 10px;
   height: 10px;
-  background: #10b981;
+  background: var(--q-color-success);
   border-radius: 50%;
-  border: 2px solid var(--q-bg-primary, #08081a);
+  border: 2px solid var(--q-color-bg);
 }
 
 /* Away status indicator */
 .away-indicator {
-  background: #f59e0b;
+  background: var(--q-color-warning);
 }
 
 /* Busy status indicator */
 .busy-indicator {
-  background: #ef4444;
+  background: var(--q-color-danger);
 }
 
 /* Offline status indicator */
 .offline-indicator {
-  background: #64748b;
+  background: var(--q-color-text-muted);
 }
 
 /* Notification dot */
@@ -1623,9 +1374,9 @@ body.light-mode .search-input::placeholder {
   right: 8px;
   width: 8px;
   height: 8px;
-  background: #ef4444;
+  background: var(--q-color-danger);
   border-radius: 50%;
-  border: 2px solid var(--q-bg-primary, #08081a);
+  border: 2px solid var(--q-color-bg);
 }
 
 /* Notification badge with number */
@@ -1636,7 +1387,7 @@ body.light-mode .search-input::placeholder {
   min-width: 18px;
   height: 18px;
   padding: 0 5px;
-  background: #ef4444;
+  background: var(--q-color-danger);
   border-radius: 9px;
   font-size: 0.6875rem;
   font-weight: 700;
@@ -1644,14 +1395,7 @@ body.light-mode .search-input::placeholder {
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 2px solid var(--q-bg-primary, #08081a);
-}
-
-/* Light mode overrides for indicators */
-body.light-mode .online-indicator,
-body.light-mode .notification-dot,
-body.light-mode .notification-badge {
-  border-color: #ffffff;
+  border: 2px solid var(--q-color-bg);
 }
 
 /* ============================================================================
@@ -1669,47 +1413,29 @@ body.light-mode .notification-badge {
   height: 36px;
   padding: 0 0.75rem;
   border-radius: 0.5rem;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  color: var(--q-text-secondary, #94a3b8);
+  background: var(--q-color-surface);
+  border: 1px solid var(--q-color-border);
+  color: var(--q-color-text-muted);
   font-size: 0.875rem;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all var(--q-duration-base) var(--q-ease-in-out);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .page-btn:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: var(--q-text-primary, #f1f5f9);
+  background: var(--q-color-surface-elevated);
+  color: var(--q-color-text);
 }
 
 .page-btn.active {
-  background: rgba(0, 212, 255, 0.15);
-  border-color: rgba(0, 212, 255, 0.3);
-  color: var(--q-color-starlight, #00d4ff);
+  background: color-mix(in srgb, var(--q-color-primary) 15%, transparent);
+  border-color: color-mix(in srgb, var(--q-color-primary) 30%, transparent);
+  color: var(--q-color-primary);
 }
 
 .page-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
-}
-
-/* Light mode overrides for pagination */
-body.light-mode .page-btn {
-  background: #f1f5f9;
-  border-color: #e2e8f0;
-  color: #64748b;
-}
-
-body.light-mode .page-btn:hover {
-  background: #e2e8f0;
-  color: #0f172a;
-}
-
-body.light-mode .page-btn.active {
-  background: rgba(59, 130, 246, 0.1);
-  border-color: rgba(59, 130, 246, 0.3);
-  color: #2563eb;
 }