From f6277bacfebb66b42415d59ead71ec1f196c955b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Jasi=C5=84ski?= <jasins.marek@gmail.com>
Date: Sun, 7 Jun 2026 14:01:52 +0200
Subject: [PATCH] style(theme): complete warm sepia dashboard styles

---
 .../Molecules/AiResponseRenderer.razor.css    |  73 +++++------
 .../Layout/MainHubLayout.razor.css            |  32 ++---
 .../Pages/Account/Profile.razor.css           | 117 +++++-------------
 .../Pages/Catalog.razor.css                   |  45 +++----
 .../Pages/ConceptsDashboard.razor.css         | 117 +++++++++---------
 .../Pages/Dashboard.razor.css                 |  93 +++++++-------
 .../Pages/Intelligence.razor.css              |  64 +++++-----
 .../Pages/MyBooks.razor.css                   |  48 +++----
 8 files changed, 267 insertions(+), 322 deletions(-)

diff --git a/src/NexusReader.UI.Shared/Components/Molecules/AiResponseRenderer.razor.css b/src/NexusReader.UI.Shared/Components/Molecules/AiResponseRenderer.razor.css
index b8d96f1..7fcb266 100644
--- a/src/NexusReader.UI.Shared/Components/Molecules/AiResponseRenderer.razor.css
+++ b/src/NexusReader.UI.Shared/Components/Molecules/AiResponseRenderer.razor.css
@@ -30,17 +30,17 @@
 }
 
 .user-row .message-avatar {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
-    color: #ffffff;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
+    background: var(--bg-surface);
+    color: var(--text-main);
+    border: 1px solid var(--border);
+    box-shadow: 0 0 10px var(--border);
 }
 
 .ai-row .message-avatar {
     background: linear-gradient(135deg, #005f38 0%, #004024 100%);
     color: #e6fffa;
-    border: 1px solid rgba(0, 255, 153, 0.4);
-    box-shadow: 0 0 10px rgba(0, 255, 153, 0.25);
+    border: 1px solid var(--accent);
+    box-shadow: 0 0 10px var(--accent-glow);
 }
 
 .message-bubble {
@@ -55,23 +55,23 @@
 }
 
 .user-bubble {
-    background: #1a1a1e;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    color: #e4e4e7;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    color: var(--text-main);
     border-top-right-radius: 4px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
 }
 
 .ai-bubble {
-    background: rgba(26, 26, 30, 0.6);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    color: #e2e8f0;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    color: var(--text-main);
     border-top-left-radius: 4px;
-    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.03);
 }
 
 .paywalled-bubble {
-    border-color: rgba(16, 185, 129, 0.15);
+    border-color: var(--accent-glow);
 }
 
 .message-header {
@@ -109,8 +109,8 @@
 .paywall-teaser {
     position: relative;
     margin-bottom: 1.5rem;
-    -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
-    mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
+    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
+    mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
     filter: blur(2px);
     pointer-events: none;
     -webkit-user-select: none;
@@ -119,12 +119,12 @@
 
 /* Upsell Card */
 .upsell-card {
-    background: #1a1a1e;
+    background: var(--bg-base);
     border-radius: 12px;
-    border: 1px solid rgba(16, 185, 129, 0.25);
+    border: 1px solid var(--accent-glow);
     padding: 1.5rem;
     margin-top: 1rem;
-    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.08), 0 4px 12px rgba(0, 0, 0, 0.4);
+    box-shadow: 0 8px 32px var(--accent-glow), 0 4px 12px var(--border);
     animation: card-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
 
@@ -141,14 +141,14 @@
 
 .upsell-header h4 {
     margin: 0;
-    color: #10b981;
+    color: var(--accent);
     font-size: 1.1rem;
     font-weight: 700;
     letter-spacing: 0.5px;
 }
 
 .upsell-text {
-    color: rgba(255, 255, 255, 0.75);
+    color: var(--text-main);
     font-size: 0.9rem;
     line-height: 1.55;
     margin: 0 0 1.25rem 0;
@@ -177,15 +177,16 @@
 }
 
 .btn-primary {
-    background: #10b981;
+    background: var(--accent);
     border: none;
-    color: #121214;
+    color: var(--bg-surface);
 }
 
 .btn-primary:hover:not(:disabled) {
-    background: #0d9668;
+    background: var(--accent);
+    opacity: 0.9;
     transform: translateY(-2px);
-    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
+    box-shadow: 0 4px 15px var(--accent-glow);
 }
 
 .btn-primary:active:not(:disabled) {
@@ -193,19 +194,19 @@
 }
 
 .btn-primary:disabled {
-    background: rgba(16, 185, 129, 0.5);
-    color: rgba(18, 18, 20, 0.6);
+    background: var(--accent-glow);
+    color: var(--text-muted);
     cursor: not-allowed;
 }
 
 .btn-secondary {
     background: transparent;
-    border: 1px solid #10b981;
-    color: #10b981;
+    border: 1px solid var(--accent);
+    color: var(--accent);
 }
 
 .btn-secondary:hover {
-    background: rgba(16, 185, 129, 0.05);
+    background: var(--accent-glow);
     transform: translateY(-2px);
 }
 
@@ -218,9 +219,9 @@
     display: flex;
     align-items: center;
     gap: 0.75rem;
-    background: rgba(16, 185, 129, 0.1);
-    border: 1px solid rgba(16, 185, 129, 0.3);
-    color: #10b981;
+    background: var(--accent-glow);
+    border: 1px solid var(--accent);
+    color: var(--accent);
     padding: 1rem;
     border-radius: 8px;
     margin-top: 1.25rem;
@@ -238,8 +239,8 @@
 .payment-spinner {
     width: 16px;
     height: 16px;
-    border: 2px solid rgba(18, 18, 20, 0.2);
-    border-top-color: #121214;
+    border: 2px solid var(--border);
+    border-top-color: var(--accent);
     border-radius: 50%;
     margin-right: 0.75rem;
     animation: spin 0.8s linear infinite;
diff --git a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css
index 3fcda6e..ddb2cf6 100644
--- a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css
+++ b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css
@@ -2,16 +2,16 @@
     display: flex;
     width: 100vw;
     height: 100vh;
-    background: #121214;
-    color: #e4e4e7;
+    background: var(--bg-base);
+    color: var(--text-main);
     overflow: hidden;
 }
 
 ::deep .hub-sidebar {
     width: 80px;
     height: 100%;
-    background: #0d0d0d;
-    border-right: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--bg-surface);
+    border-right: 1px solid var(--border);
     display: flex;
     flex-direction: column;
     z-index: 100;
@@ -55,7 +55,7 @@
     justify-content: center;
     width: 100%;
     height: 54px;
-    color: #8b8273;
+    color: var(--text-muted);
     text-decoration: none;
     transition: color 0.2s ease, background-color 0.2s ease;
     position: relative;
@@ -63,7 +63,7 @@
 
 ::deep .nav-item:hover {
     color: #10b981;
-    background: rgba(255, 255, 255, 0.01);
+    background: rgba(0, 0, 0, 0.04);
 }
 
 ::deep .nav-item:focus-visible {
@@ -103,7 +103,7 @@
 
 ::deep .sidebar-footer {
     padding: 1.5rem 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    border-top: 1px solid var(--border);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -119,15 +119,15 @@
 ::deep .user-avatar {
     width: 36px;
     height: 36px;
-    background: #1a1a1e;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: var(--bg-base);
+    border: 1px solid var(--border);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.9rem;
     font-weight: 600;
-    color: #e4e4e7;
+    color: var(--text-main);
     flex-shrink: 0;
 }
 
@@ -138,7 +138,7 @@
 ::deep .logout-btn {
     background: transparent;
     border: none;
-    color: #8b8273;
+    color: var(--text-muted);
     cursor: pointer;
     padding: 0.5rem;
     border-radius: 8px;
@@ -157,7 +157,7 @@
     flex: 1;
     height: 100%;
     overflow-y: auto;
-    background: #121214;
+    background: var(--bg-base);
 }
 
 .hub-content {
@@ -204,10 +204,10 @@
         left: 0;
         right: 0;
         height: 60px;
-        background: rgba(18, 18, 18, 0.85);
+        background: var(--bg-surface);
         backdrop-filter: blur(20px);
         -webkit-backdrop-filter: blur(20px);
-        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        border-bottom: 1px solid var(--border);
         padding: 0 1.25rem;
         z-index: 150;
     }
@@ -295,7 +295,7 @@
         bottom: 0;
         width: 280px;
         height: 100%;
-        background: #141414;
+        background: var(--bg-surface);
         z-index: 200;
         transform: translateX(-100%);
         will-change: transform;
@@ -324,7 +324,7 @@
 
     ::deep .sidebar-header {
         padding: 1.5rem 1.25rem;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        border-bottom: 1px solid var(--border);
     }
 
     ::deep .sidebar-nav {
diff --git a/src/NexusReader.UI.Shared/Pages/Account/Profile.razor.css b/src/NexusReader.UI.Shared/Pages/Account/Profile.razor.css
index f0b98c0..e90bc4d 100644
--- a/src/NexusReader.UI.Shared/Pages/Account/Profile.razor.css
+++ b/src/NexusReader.UI.Shared/Pages/Account/Profile.razor.css
@@ -2,8 +2,8 @@
     position: relative;
     width: 100%;
     min-height: 100vh;
-    background-color: #121214;
-    color: #e4e4e7;
+    background-color: var(--bg-base);
+    color: var(--text-main);
     overflow-x: hidden;
     display: flex;
     justify-content: center;
@@ -26,7 +26,7 @@
 .mesh-overlay {
     position: absolute;
     top: 0; left: 0; width: 100%; height: 100%;
-    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.02) 1px, transparent 0);
+    background-image: radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0);
     background-size: 32px 32px;
     z-index: 1;
 }
@@ -63,7 +63,7 @@
 .avatar-inner {
     width: 120px;
     height: 120px;
-    background: #1a1a1e;
+    background: var(--bg-surface);
     border: 2px solid #10b981;
     border-radius: 50%;
     display: flex;
@@ -98,7 +98,7 @@
     font-weight: 700;
     margin: 0;
     letter-spacing: -0.01em;
-    color: #ffffff;
+    color: var(--text-main);
 }
 
 .system-rank {
@@ -120,17 +120,17 @@
 
 .glass-panel {
     padding: 32px;
-    background: #1a1a1e;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
     border-radius: 12px;
     transition: all 0.3s ease;
 }
 
 .glass-panel:hover {
-    border-color: rgba(16, 185, 129, 0.2);
+    border-color: var(--accent);
     transform: translateY(-4px);
-    background: #1e1e24;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    background: var(--bg-surface);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }
 
 .metric-card {
@@ -154,7 +154,7 @@
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.1em;
-    color: #a0aec0;
+    color: var(--text-muted);
     margin: 0;
 }
 
@@ -177,14 +177,14 @@
     gap: 8px;
 }
 
-.usage-values .current { font-size: 2.5rem; font-weight: 800; color: #fff; line-height: 1; }
-.usage-values .separator { font-size: 1.2rem; color: #4a5568; }
-.usage-values .total { font-size: 1.2rem; color: #718096; font-weight: 600; }
+.usage-values .current { font-size: 2.5rem; font-weight: 800; color: var(--text-main); line-height: 1; }
+.usage-values .separator { font-size: 1.2rem; color: var(--border); }
+.usage-values .total { font-size: 1.2rem; color: var(--text-muted); font-weight: 600; }
 
 .usage-progress {
     width: 100%;
     height: 6px;
-    background: rgba(255, 255, 255, 0.05);
+    background: var(--border);
     border-radius: 10px;
     overflow: hidden;
 }
@@ -198,7 +198,7 @@
 
 .metric-label {
     font-size: 0.75rem;
-    color: #718096;
+    color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }
@@ -218,7 +218,7 @@
 
 .score-label {
     font-size: 0.75rem;
-    color: #718096;
+    color: var(--text-muted);
     text-transform: uppercase;
     margin-top: 4px;
 }
@@ -229,11 +229,11 @@
     align-items: center;
     gap: 8px;
     padding: 10px 16px;
-    background: rgba(16, 185, 129, 0.05);
-    border: 1px solid rgba(16, 185, 129, 0.1);
+    background: var(--bg-base);
+    border: 1px solid var(--border);
     border-radius: 12px;
     font-size: 0.85rem;
-    color: #cbd5e0;
+    color: var(--text-main);
 }
 
 .truncate {
@@ -273,9 +273,9 @@
 }
 
 .plan-badge.free {
-    background: rgba(255, 255, 255, 0.05);
-    color: #a1a1aa;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--bg-base);
+    color: var(--text-muted);
+    border: 1px solid var(--border);
 }
 
 .tenant-tag {
@@ -356,7 +356,7 @@
 
 .theme-description {
     font-size: 0.9rem;
-    color: #a0aec0;
+    color: var(--text-muted);
     margin: 0 0 16px 0;
 }
 
@@ -373,10 +373,10 @@
     justify-content: center;
     gap: 8px;
     padding: 14px 20px;
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: var(--bg-base);
+    border: 1px solid var(--border);
     border-radius: 8px;
-    color: #a0aec0;
+    color: var(--text-muted);
     font-size: 0.9rem;
     font-weight: 600;
     cursor: pointer;
@@ -384,9 +384,8 @@
 }
 
 .theme-option-btn:hover {
-    background: rgba(255, 255, 255, 0.07);
-    color: #ffffff;
-    border-color: rgba(255, 255, 255, 0.15);
+    background: rgba(0, 0, 0, 0.04);
+    color: var(--text-main);
 }
 
 .theme-option-btn.active {
@@ -396,64 +395,6 @@
     box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
 }
 
-/* Light Theme overrides for Profile settings page */
-.theme-light .profile-page-container {
-    background-color: var(--bg-base);
-    color: var(--text-main);
-}
-
-.theme-light .username {
-    color: var(--text-main);
-}
-
-.theme-light .glass-panel {
-    background: var(--bg-surface);
-    border-color: rgba(0, 0, 0, 0.06);
-}
-
-.theme-light .glass-panel:hover {
-    border-color: rgba(16, 185, 129, 0.3);
-    background: var(--bg-surface);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
-}
-
-.theme-light .card-header h3 {
-    color: #718096;
-}
-
-.theme-light .usage-values .current {
-    color: var(--text-main);
-}
-
-.theme-light .last-book {
-    background: rgba(16, 185, 129, 0.05);
-    border-color: rgba(16, 185, 129, 0.15);
-    color: var(--text-main);
-}
-
-.theme-light .theme-description {
-    color: #718096;
-}
-
-.theme-light .theme-option-btn {
-    background: rgba(0, 0, 0, 0.03);
-    border-color: rgba(0, 0, 0, 0.08);
-    color: #718096;
-}
-
-.theme-light .theme-option-btn:hover {
-    background: rgba(0, 0, 0, 0.06);
-    color: var(--text-main);
-    border-color: rgba(0, 0, 0, 0.15);
-}
-
-.theme-light .theme-option-btn.active {
-    background: rgba(16, 185, 129, 0.08);
-    color: #10b981;
-    border-color: #10b981;
-    box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
-}
-
 @media (max-width: 768px) {
     .theme-options {
         flex-direction: column;
diff --git a/src/NexusReader.UI.Shared/Pages/Catalog.razor.css b/src/NexusReader.UI.Shared/Pages/Catalog.razor.css
index 976681c..1d1ed3d 100644
--- a/src/NexusReader.UI.Shared/Pages/Catalog.razor.css
+++ b/src/NexusReader.UI.Shared/Pages/Catalog.razor.css
@@ -14,13 +14,13 @@
     font-size: 2.5rem;
     font-weight: 700;
     margin: 0 0 0.5rem 0;
-    color: #ffffff;
+    color: var(--text-main);
     letter-spacing: -0.5px;
 }
 
 .catalog-header .subtitle {
     font-size: 1rem;
-    color: #a1a1aa;
+    color: var(--text-muted);
     margin: 0;
 }
 
@@ -38,27 +38,27 @@
     height: 100%;
     overflow: hidden;
     border-radius: 12px;
-    background: #1a1a1e;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
 }
 
 .course-card:hover {
     transform: translateY(-4px);
-    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
-    border-color: rgba(16, 185, 129, 0.2);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
+    border-color: var(--accent);
 }
 
 .card-cover-container {
     position: relative;
     height: 200px;
-    background: rgba(0, 0, 0, 0.2);
+    background: rgba(0, 0, 0, 0.05);
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid var(--border);
 }
 
 .card-cover {
@@ -147,8 +147,9 @@
     align-self: flex-start;
     font-size: 0.7rem;
     font-weight: 700;
-    color: #a1a1aa;
-    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-muted);
+    background: var(--bg-base);
+    border: 1px solid var(--border);
     padding: 0.2rem 0.5rem;
     border-radius: 4px;
     text-transform: uppercase;
@@ -175,21 +176,21 @@
     font-size: 1.25rem;
     font-weight: 600;
     margin: 0 0 0.4rem 0;
-    color: #ffffff;
+    color: var(--text-main);
     line-height: 1.3;
     font-family: var(--nexus-font-sans, "Outfit", sans-serif);
 }
 
 .course-author {
     font-size: 0.85rem;
-    color: #a1a1aa;
+    color: var(--text-muted);
     margin: 0 0 1rem 0;
 }
 
 .course-desc {
     font-size: 0.88rem;
     line-height: 1.5;
-    color: #a1a1aa;
+    color: var(--text-muted);
     margin: 0 0 1.5rem 0;
     display: -webkit-box;
     -webkit-line-clamp: 3;
@@ -204,8 +205,8 @@
     justify-content: space-between;
     align-items: center;
     font-size: 0.8rem;
-    color: #a1a1aa;
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    color: var(--text-muted);
+    border-top: 1px solid var(--border);
     padding-top: 0.75rem;
 }
 
@@ -256,14 +257,14 @@
     border-radius: 12px;
     overflow: hidden;
     height: 440px;
-    background: #1a1a1e;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
     opacity: 0.6;
 }
 
 .skeleton-cover {
     height: 200px;
-    background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%);
+    background: linear-gradient(90deg, var(--bg-base) 25%, var(--border) 50%, var(--bg-base) 75%);
     background-size: 200% 100%;
     animation: loading 1.5s infinite;
 }
@@ -276,7 +277,7 @@
 }
 
 .skeleton-line {
-    background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%);
+    background: linear-gradient(90deg, var(--bg-base) 25%, var(--border) 50%, var(--bg-base) 75%);
     background-size: 200% 100%;
     animation: loading 1.5s infinite;
     border-radius: 4px;
@@ -314,9 +315,9 @@
     gap: 1.25rem;
     padding: 1.25rem 2.25rem;
     border-radius: 40px;
-    background: rgba(13, 13, 15, 0.85);
+    background: var(--bg-surface);
     backdrop-filter: blur(16px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--border);
     animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
@@ -332,7 +333,7 @@
 
 .loader-text {
     font-weight: 500;
-    color: #ffffff;
+    color: var(--text-main);
     font-size: 0.95rem;
 }
 
diff --git a/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css b/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css
index 53edb26..e5131aa 100644
--- a/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css
+++ b/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css
@@ -17,11 +17,11 @@
     align-items: center;
     gap: 2rem;
     padding: 1.25rem 2rem;
-    background: rgba(20, 20, 20, 0.35);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
     border-radius: 16px;
     backdrop-filter: blur(12px);
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
 }
 
 .header-back .btn-back {
@@ -30,22 +30,22 @@
 }
 
 .header-back .btn-back:hover {
-    border-color: var(--nexus-neon);
-    color: var(--nexus-neon);
-    background: var(--nexus-primary-glow);
-    box-shadow: 0 0 10px var(--nexus-primary-glow);
+    border-color: var(--accent);
+    color: var(--accent);
+    background: var(--accent-glow);
+    box-shadow: 0 0 10px var(--accent-glow);
 }
 
 .header-title h1 {
     margin: 0;
     font-size: 1.5rem;
     font-weight: 700;
-    color: #fff;
+    color: var(--text-main);
 }
 
 .header-title .subtitle {
     font-size: 0.85rem;
-    color: rgba(255, 255, 255, 0.4);
+    color: var(--text-muted);
 }
 
 .header-actions .btn-action {
@@ -56,7 +56,7 @@
 }
 
 .header-actions .btn-action:hover {
-    box-shadow: 0 0 20px var(--nexus-primary-glow);
+    box-shadow: 0 0 20px var(--accent-glow);
 }
 
 /* Grid Layout */
@@ -73,28 +73,26 @@
     flex-direction: column;
     overflow: hidden;
     padding: 0;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-xl, 16px);
 }
 
 .pane-header {
     padding: 1.25rem 1.5rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid var(--border);
 }
 
 .pane-header h3 {
     margin: 0;
     font-size: 1rem;
     font-weight: 600;
-    color: #fff;
+    color: var(--text-main);
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }
 
-.pane-content {
-    flex-grow: 1;
-    overflow: hidden;
-}
-
 /* Loading, Error and Empty States */
 .loading-state, .error-state, .empty-dashboard-state {
     display: flex;
@@ -118,15 +116,15 @@
 }
 
 .neon-pulse {
-    color: var(--nexus-neon);
-    filter: drop-shadow(0 0 10px var(--nexus-neon));
+    color: var(--accent);
+    filter: drop-shadow(0 0 10px var(--accent-glow));
     animation: robot-pulse 2s infinite ease-in-out;
 }
 
 @keyframes robot-pulse {
-    0% { transform: scale(1); filter: drop-shadow(0 0 10px var(--nexus-neon)); }
-    50% { transform: scale(1.08); filter: drop-shadow(0 0 25px var(--nexus-neon)); }
-    100% { transform: scale(1); filter: drop-shadow(0 0 10px var(--nexus-neon)); }
+    0% { transform: scale(1); filter: drop-shadow(0 0 10px var(--accent-glow)); }
+    50% { transform: scale(1.08); filter: drop-shadow(0 0 25px var(--accent-glow)); }
+    100% { transform: scale(1); filter: drop-shadow(0 0 10px var(--accent-glow)); }
 }
 
 .scan-line {
@@ -135,8 +133,8 @@
     left: 0;
     width: 100%;
     height: 2px;
-    background: var(--nexus-neon);
-    box-shadow: 0 0 15px var(--nexus-neon);
+    background: var(--accent);
+    box-shadow: 0 0 15px var(--accent);
     animation: scan 2s infinite linear;
     opacity: 0.8;
 }
@@ -149,7 +147,7 @@
 
 .loading-text {
     font-size: 0.95rem;
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--text-muted);
     margin-top: 1rem;
     letter-spacing: 0.05em;
 }
@@ -164,17 +162,18 @@
 }
 
 .dim-icon {
-    color: rgba(255, 255, 255, 0.15);
+    color: var(--text-muted);
+    opacity: 0.4;
 }
 
 .empty-dashboard-state h2, .error-state h3 {
-    color: #fff;
+    color: var(--text-main);
     margin: 0 0 0.75rem 0;
     font-weight: 600;
 }
 
 .empty-dashboard-state p, .error-state p {
-    color: rgba(255, 255, 255, 0.45);
+    color: var(--text-muted);
     font-size: 0.88rem;
     line-height: 1.5;
     margin: 0 0 2rem 0;
@@ -189,25 +188,25 @@
     flex-grow: 1;
     padding: 3rem;
     text-align: center;
-    color: rgba(255, 255, 255, 0.4);
+    color: var(--text-muted);
 }
 
 .empty-glowing-brain {
     width: 80px;
     height: 80px;
     border-radius: 50%;
-    background: rgba(0, 255, 153, 0.04);
-    border: 1px solid rgba(0, 255, 153, 0.15);
+    background: var(--accent-glow);
+    border: 1px solid var(--accent);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.5rem;
-    box-shadow: 0 0 20px var(--nexus-primary-glow);
+    box-shadow: 0 0 20px var(--accent-glow);
 }
 
 .workspace-empty h4 {
     margin: 0 0 0.75rem 0;
-    color: #fff;
+    color: var(--text-main);
     font-size: 1.1rem;
     font-weight: 600;
 }
@@ -227,7 +226,7 @@
 
 .workspace-header {
     padding: 1.5rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid var(--border);
 }
 
 .node-meta {
@@ -242,7 +241,7 @@
     font-size: 0.75rem;
     font-weight: 700;
     letter-spacing: 0.08em;
-    color: var(--nexus-neon);
+    color: var(--accent);
 }
 
 .badge {
@@ -256,22 +255,22 @@
 }
 
 .badge-unlocked {
-    background: rgba(0, 255, 153, 0.08);
-    color: var(--nexus-neon);
-    border: 1px solid rgba(0, 255, 153, 0.2);
+    background: var(--accent-glow);
+    color: var(--accent);
+    border: 1px solid var(--accent);
 }
 
 .badge-locked {
-    background: rgba(255, 255, 255, 0.05);
-    color: rgba(255, 255, 255, 0.4);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--bg-base);
+    color: var(--text-muted);
+    border: 1px solid var(--border);
 }
 
 .workspace-title {
     margin: 0;
     font-size: 1.4rem;
     font-weight: 700;
-    color: #fff;
+    color: var(--text-main);
 }
 
 .workspace-body {
@@ -291,22 +290,22 @@
     background: transparent;
 }
 .workspace-body::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--border);
     border-radius: 3px;
 }
 .workspace-body::-webkit-scrollbar-thumb:hover {
-    background: var(--nexus-neon);
+    background: var(--accent);
 }
 
 .locked-warning {
     display: flex;
     flex-direction: row;
     gap: 1rem;
-    background: rgba(255, 171, 0, 0.04);
-    border: 1px solid rgba(255, 171, 0, 0.15);
+    background: rgba(217, 119, 6, 0.05);
+    border: 1px solid rgba(217, 119, 6, 0.15);
     border-radius: 8px;
     padding: 1rem;
-    color: rgba(255, 255, 255, 0.85);
+    color: var(--text-main);
 }
 
 .lock-warning-icon {
@@ -326,14 +325,14 @@
     margin: 0;
     font-size: 0.8rem;
     line-height: 1.4;
-    color: rgba(255, 255, 255, 0.55);
+    color: var(--text-muted);
 }
 
 .metadata-section h4 {
     margin: 0 0 0.5rem 0;
     font-size: 0.85rem;
     font-weight: 600;
-    color: #aaa;
+    color: var(--text-muted);
     display: flex;
     align-items: center;
     gap: 0.35rem;
@@ -345,12 +344,12 @@
     margin: 0;
     font-size: 0.88rem;
     line-height: 1.6;
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--text-main);
 }
 
 .summary-box {
-    background: rgba(255, 255, 255, 0.02);
-    border-left: 3px solid var(--nexus-neon);
+    background: var(--bg-base);
+    border-left: 3px solid var(--accent);
     border-radius: 0 8px 8px 0;
     padding: 1rem;
     margin-top: 0.25rem;
@@ -365,9 +364,9 @@
 
 .term-pill {
     font-size: 0.75rem;
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    color: rgba(255, 255, 255, 0.6);
+    background: var(--bg-base);
+    border: 1px solid var(--border);
+    color: var(--text-muted);
     padding: 0.3rem 0.75rem;
     border-radius: 20px;
     font-weight: 500;
@@ -375,14 +374,14 @@
 }
 
 .term-pill:hover {
-    border-color: rgba(0, 255, 153, 0.2);
-    color: var(--nexus-neon);
-    background: rgba(0, 255, 153, 0.03);
+    border-color: var(--accent);
+    color: var(--accent);
+    background: var(--accent-glow);
 }
 
 .workspace-footer {
     padding: 1.25rem 1.5rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    border-top: 1px solid var(--border);
 }
 
 @media (max-width: 1024px) {
diff --git a/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css b/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css
index 7794270..ddf1ec9 100644
--- a/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css
+++ b/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css
@@ -17,16 +17,16 @@
     display: flex;
     justify-content: center;
     overflow: hidden;
-    background: #0d0d0d;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--bg-surface);
+    border-bottom: 1px solid var(--border);
 }
 
 .header-grid-bg {
     position: absolute;
     inset: 0;
     background-image: 
-        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
+        linear-gradient(var(--border) 1px, transparent 1px),
+        linear-gradient(90deg, var(--border) 1px, transparent 1px);
     background-size: 60px 60px;
     background-position: center;
     mask-image: radial-gradient(circle at center, black, transparent 80%);
@@ -52,10 +52,10 @@
     height: 100%;
     border-radius: 50%;
     object-fit: cover;
-    border: 3px solid #1a1a1a;
+    border: 3px solid var(--border);
     position: relative;
     z-index: 2;
-    background: #222;
+    background: var(--bg-surface);
 }
 
 .avatar-glow {
@@ -78,7 +78,7 @@
     font-family: var(--nexus-font-sans);
     font-size: 1.25rem;
     font-weight: 500;
-    color: #ffffff;
+    color: var(--text-main);
     letter-spacing: 1px;
     text-transform: lowercase;
 }
@@ -103,17 +103,17 @@
 
 .status-pill {
     padding: 0.6rem 1.25rem;
-    background: rgba(16, 185, 129, 0.05);
-    border: 1px solid rgba(16, 185, 129, 0.3);
+    background: var(--bg-base);
+    border: 1px solid var(--border);
     border-radius: 100px;
     display: flex;
     gap: 0.5rem;
     font-size: 0.9rem;
-    box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.05);
 }
 
-.pill-label { color: #A0A0A0; }
-.pill-value { color: #ffffff; font-weight: 600; }
+.pill-label { color: var(--text-muted); }
+.pill-value { color: var(--text-main); font-weight: 600; }
 
 /* --- Dashboard Content --- */
 .dashboard-content {
@@ -127,7 +127,7 @@
     font-family: var(--nexus-font-serif);
     font-size: 2rem;
     margin-bottom: 2rem;
-    color: #ffffff;
+    color: var(--text-main);
 }
 
 .main-grid {
@@ -137,18 +137,18 @@
 }
 
 .glass-panel {
-    background: #1a1a1e;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
     border-radius: 12px;
     padding: 1.5rem;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .glass-panel:hover {
-    background: #1e1e24;
-    border-color: rgba(16, 185, 129, 0.2);
+    background: var(--bg-surface);
+    border-color: var(--accent);
     transform: translateY(-4px);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }
 
 /* Reading Card */
@@ -161,7 +161,7 @@
 .reading-card h3 {
     font-size: 1.1rem;
     font-weight: 600;
-    color: #E0E0E0;
+    color: var(--text-main);
     margin: 0;
 }
 
@@ -178,7 +178,7 @@
 .reading-thumb img {
     width: 100%;
     border-radius: 12px;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
 }
 
 .reading-info {
@@ -196,12 +196,12 @@
 
 .chapter-label {
     font-size: 0.85rem;
-    color: #A0A0A0;
+    color: var(--text-muted);
 }
 
 .progress-container {
     height: 8px;
-    background: rgba(255, 255, 255, 0.05);
+    background: var(--border);
     border-radius: 4px;
     position: relative;
 }
@@ -228,13 +228,13 @@
 
 .progress-detail {
     font-size: 0.8rem;
-    color: #666;
+    color: var(--text-muted);
 }
 
 .reading-desc {
     font-size: 0.85rem;
     line-height: 1.6;
-    color: #888;
+    color: var(--text-muted);
     margin: 0;
 }
 
@@ -261,7 +261,7 @@
     margin: 0;
     font-size: 1rem;
     font-weight: 600;
-    color: #E0E0E0;
+    color: var(--text-main);
 }
 
 /* Graph Placeholder */
@@ -325,7 +325,7 @@
 
 .question {
     font-size: 0.95rem;
-    color: #E0E0E0;
+    color: var(--text-main);
 }
 
 .quiz-options {
@@ -336,13 +336,14 @@
 
 .quiz-option {
     padding: 0.75rem 1rem;
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--bg-base);
+    border: 1px solid var(--border);
     border-radius: 10px;
     font-size: 0.9rem;
     display: flex;
     gap: 0.75rem;
     cursor: pointer;
+    color: var(--text-main);
 }
 
 .quiz-option.active {
@@ -372,9 +373,9 @@
 }
 
 .btn-nexus.secondary {
-    background: rgba(255, 255, 255, 0.05);
-    color: #fff;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--bg-base);
+    color: var(--text-main);
+    border: 1px solid var(--border);
 }
 
 .btn-nexus:hover {
@@ -417,16 +418,16 @@
 }
 
 .quiz-history-item {
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
     border-radius: 12px;
     padding: 1rem;
     transition: all 0.2s ease;
 }
 
 .quiz-history-item:hover {
-    background: rgba(255, 255, 255, 0.04);
-    border-color: rgba(255, 255, 255, 0.1);
+    background: var(--bg-base);
+    border-color: var(--border);
 }
 
 .quiz-item-header {
@@ -440,13 +441,13 @@
 .quiz-topic {
     font-size: 0.95rem;
     font-weight: 500;
-    color: #ffffff;
+    color: var(--text-main);
 }
 
 .quiz-item-meta {
     display: flex;
     font-size: 0.75rem;
-    color: #666666;
+    color: var(--text-muted);
 }
 
 .badge {
@@ -481,7 +482,7 @@
 
 .empty-quiz-state .sub-text {
     font-size: 0.8rem;
-    color: #666666;
+    color: var(--text-muted);
     margin-top: 0.5rem;
 }
 
@@ -489,8 +490,8 @@
 .concept-detail-toast {
     margin-top: 1rem;
     padding: 0.75rem 1rem;
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--bg-base);
+    border: 1px solid var(--border);
     border-radius: 12px;
     min-height: 80px;
     display: flex;
@@ -514,7 +515,7 @@
 .concept-content {
     font-size: 0.85rem;
     line-height: 1.4;
-    color: #E0E0E0;
+    color: var(--text-main);
     margin: 0;
     display: -webkit-box;
     -webkit-line-clamp: 2;
@@ -603,8 +604,8 @@
 /* --- Architecture Guide Block --- */
 .architecture-guide-panel {
     margin-top: 2.5rem;
-    background: #1a1a1e;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
     border-radius: 12px;
     padding: 2rem;
 }
@@ -618,7 +619,7 @@
 .architecture-content h3 {
     font-size: 1.5rem;
     font-weight: 700;
-    color: #ffffff;
+    color: var(--text-main);
     margin-bottom: 1.25rem;
     letter-spacing: -0.01em;
 }
@@ -626,12 +627,12 @@
 .architecture-content p {
     font-size: 0.95rem;
     line-height: 1.6;
-    color: #e4e4e7;
+    color: var(--text-main);
     margin-bottom: 1.25rem;
 }
 
 .architecture-content code {
-    background: rgba(255, 255, 255, 0.05);
+    background: var(--bg-base);
     color: #10b981;
     padding: 0.2rem 0.4rem;
     border-radius: 4px;
diff --git a/src/NexusReader.UI.Shared/Pages/Intelligence.razor.css b/src/NexusReader.UI.Shared/Pages/Intelligence.razor.css
index faf7c44..1594c97 100644
--- a/src/NexusReader.UI.Shared/Pages/Intelligence.razor.css
+++ b/src/NexusReader.UI.Shared/Pages/Intelligence.razor.css
@@ -1,7 +1,7 @@
 .intelligence-page {
     margin: -2.5rem;
     height: 100vh;
-    background: #121214;
+    background: var(--bg-base);
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -45,11 +45,11 @@
     background: transparent;
 }
 .chat-thread-container::-webkit-scrollbar-thumb {
-    background: rgba(16, 185, 129, 0.2);
+    background: var(--accent-glow);
     border-radius: 4px;
 }
 .chat-thread-container::-webkit-scrollbar-thumb:hover {
-    background: rgba(16, 185, 129, 0.4);
+    background: var(--accent);
 }
 
 .chat-bubbles-scroll {
@@ -78,7 +78,7 @@
 
 .welcome-prompt {
     font-family: var(--nexus-font-sans, inherit);
-    color: #e4e4e7;
+    color: var(--text-main);
     font-size: 1.35rem;
     font-weight: 500;
     letter-spacing: -0.2px;
@@ -87,7 +87,7 @@
 /* Input Controls */
 .chat-input-controls {
     padding: 1.5rem 4rem 3rem 4rem;
-    background: linear-gradient(to top, #121214 70%, rgba(18, 18, 20, 0));
+    background: linear-gradient(to top, var(--bg-base) 70%, transparent);
     flex-shrink: 0;
 }
 
@@ -117,13 +117,13 @@
     gap: 0.6rem;
     font-size: 0.85rem;
     font-weight: 500;
-    color: #8b8273;
+    color: var(--text-muted);
 }
 
 .nexus-select {
-    background: #1a1a1e;
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    color: #e4e4e7;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    color: var(--text-main);
     padding: 0.4rem 2rem 0.4rem 0.75rem;
     border-radius: 8px;
     outline: none;
@@ -138,38 +138,38 @@
 }
 
 .nexus-select:focus {
-    border-color: #10b981;
-    box-shadow: 0 0 8px rgba(16, 185, 129, 0.15);
+    border-color: var(--accent);
+    box-shadow: 0 0 8px var(--accent-glow);
 }
 
 .input-field-group {
     display: flex;
-    background: #1a1a1e;
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
     border-radius: 12px;
     padding: 0.4rem;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }
 
 .input-field-group:focus-within {
-    border-color: rgba(16, 185, 129, 0.5);
-    background: #1a1a1e;
-    box-shadow: 0 10px 35px rgba(16, 185, 129, 0.1);
+    border-color: var(--accent);
+    background: var(--bg-surface);
+    box-shadow: 0 10px 35px var(--accent-glow);
 }
 
 .nexus-input {
     flex-grow: 1;
     background: transparent;
     border: none;
-    color: #ffffff;
+    color: var(--text-main);
     font-size: 0.975rem;
     outline: none;
     padding: 0.5rem 1rem;
 }
 
 .nexus-input::placeholder {
-    color: #8b8273;
+    color: var(--text-muted);
 }
 
 .search-btn {
@@ -180,29 +180,31 @@
     align-items: center;
     justify-content: center;
     border-radius: 8px;
-    background: #10b981;
+    background: var(--accent);
     border: none;
-    color: #121214;
+    color: var(--bg-surface);
     cursor: pointer;
     transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .search-btn:hover:not(:disabled) {
-    background: #0d9668;
+    background: var(--accent);
+    opacity: 0.9;
     transform: scale(1.02);
 }
 
 .search-btn:disabled {
-    background: rgba(26, 26, 30, 0.8);
-    color: rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.02);
+    background: var(--bg-base);
+    color: var(--text-muted);
+    opacity: 0.4;
+    border: 1px solid var(--border);
     cursor: not-allowed;
 }
 
 /* Typing / Loading Indicators */
 .message-bubble.pending-bubble {
-    border-color: rgba(16, 185, 129, 0.25);
-    background: rgba(16, 185, 129, 0.03);
+    border-color: var(--accent-glow);
+    background: var(--accent-glow);
     max-width: 450px;
 }
 
@@ -216,7 +218,7 @@
 .typing-indicator span {
     width: 7px;
     height: 7px;
-    background: #10b981;
+    background: var(--accent);
     border-radius: 50%;
     display: inline-block;
     animation: typing-bounce 1.4s infinite ease-in-out both;
@@ -227,16 +229,16 @@
 
 .loading-label {
     font-size: 0.825rem;
-    color: rgba(255, 255, 255, 0.45);
+    color: var(--text-muted);
     font-style: italic;
 }
 
 .btn-spinner {
     width: 18px;
     height: 18px;
-    border: 2px solid rgba(18, 18, 20, 0.1);
+    border: 2px solid var(--border);
     border-radius: 50%;
-    border-top-color: #121214;
+    border-top-color: var(--accent);
     animation: spin 0.8s linear infinite;
 }
 
diff --git a/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css b/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css
index 3f3b0d6..5ddab46 100644
--- a/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css
+++ b/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css
@@ -19,13 +19,13 @@
     font-size: 2.5rem;
     font-weight: 700;
     margin: 0 0 0.5rem 0;
-    color: #ffffff;
+    color: var(--text-main);
     letter-spacing: -0.5px;
 }
 
 .header-title-section .subtitle {
     font-size: 1rem;
-    color: #a1a1aa;
+    color: var(--text-muted);
     margin: 0;
 }
 
@@ -67,27 +67,27 @@
     height: 100%;
     overflow: hidden;
     border-radius: 12px;
-    background: #1a1a1e;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
 }
 
 .book-card:hover {
     transform: translateY(-4px);
-    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
-    border-color: rgba(16, 185, 129, 0.2);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
+    border-color: var(--accent);
 }
 
 .book-cover-container {
     position: relative;
     height: 360px;
-    background: rgba(0, 0, 0, 0.2);
+    background: rgba(0, 0, 0, 0.05);
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid var(--border);
 }
 
 .book-cover {
@@ -145,7 +145,7 @@
     font-size: 1.2rem;
     font-weight: 600;
     margin: 0 0 0.4rem 0;
-    color: #ffffff;
+    color: var(--text-main);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -154,7 +154,7 @@
 
 .book-author {
     font-size: 0.9rem;
-    color: #a1a1aa;
+    color: var(--text-muted);
     margin: 0 0 1.25rem 0;
 }
 
@@ -179,7 +179,7 @@
 
 .progress-bar {
     height: 6px;
-    background: rgba(255, 255, 255, 0.05);
+    background: var(--border);
     border-radius: 3px;
     overflow: hidden;
 }
@@ -192,7 +192,7 @@
 
 .progress-text {
     font-size: 0.8rem;
-    color: #a1a1aa;
+    color: var(--text-muted);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -232,14 +232,14 @@
     justify-content: center;
     padding: 5rem 2rem;
     text-align: center;
-    background: #1a1a1e;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
     border-radius: 12px;
 }
 
 .empty-icon-pulse {
     margin-bottom: 2rem;
-    color: #a1a1aa;
+    color: var(--text-muted);
     animation: pulse 3s infinite alternate;
 }
 
@@ -247,11 +247,11 @@
     font-family: var(--nexus-font-serif);
     font-size: 1.8rem;
     margin: 0 0 0.5rem 0;
-    color: #ffffff;
+    color: var(--text-main);
 }
 
 .empty-state-container p {
-    color: #a1a1aa;
+    color: var(--text-muted);
     max-width: 400px;
     margin: 0 0 2rem 0;
 }
@@ -278,14 +278,14 @@
     border-radius: 12px;
     overflow: hidden;
     height: 480px;
-    background: #1a1a1e;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
     opacity: 0.6;
 }
 
 .skeleton-cover {
     height: 360px;
-    background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%);
+    background: linear-gradient(90deg, var(--bg-base) 25%, var(--border) 50%, var(--bg-base) 75%);
     background-size: 200% 100%;
     animation: loading 1.5s infinite;
 }
@@ -298,7 +298,7 @@
 }
 
 .skeleton-line {
-    background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%);
+    background: linear-gradient(90deg, var(--bg-base) 25%, var(--border) 50%, var(--bg-base) 75%);
     background-size: 200% 100%;
     animation: loading 1.5s infinite;
     border-radius: 4px;
@@ -336,9 +336,9 @@
     gap: 1.25rem;
     padding: 1.25rem 2.25rem;
     border-radius: 40px;
-    background: rgba(13, 13, 15, 0.85);
+    background: var(--bg-surface);
     backdrop-filter: blur(16px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--border);
     animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
@@ -354,7 +354,7 @@
 
 .loader-text {
     font-weight: 500;
-    color: #ffffff;
+    color: var(--text-main);
     font-size: 0.95rem;
 }