From e6069468e7bfce5a34aa4c97a51f9c7c1c1e1132 Mon Sep 17 00:00:00 2001
From: George Sofianos <george@sofianos.dev>
Date: Tue, 21 Apr 2026 23:15:12 +0300
Subject: [PATCH] chore: Extracted more colors into css variables, fixed light
 theme issues

---
 src/app/styles.css | 955 ++++++++++++++++++++++++++-------------------
 1 file changed, 546 insertions(+), 409 deletions(-)

diff --git a/src/app/styles.css b/src/app/styles.css
index 2e2c5247e..dfb83c4c4 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -1,17 +1,43 @@
 :root {
+    /* Dark theme */
+    --layout-bg: #0a0a0a;
+    --title-surface: #000000;
     --header-bg-color: #000000;
     --bg-primary: #0a0a0a;
     --bg-secondary: #1a1a1a;
     --bg-tertiary: #111111;
     --bg-quaternary: #2a2a2a;
     --bg-hover: #f0f0f0;
+
+    --success-color: #4CAF50;
+    --success-border: #4CAF50;
+    --warning-color: #ffb74d;
+    --info-color: #2196F3;
+    --action-color: #FF9800;
+    --error-background-color: rgba(244, 67, 54, 0.1);
+    --error-border: rgba(244, 67, 54, 0.3);
+    --error-color: #f44336;
+    --error-hover:#dc2626;
+
+    --logs-error: #ff4444;
+    --logs-surface: rgba(255, 68, 68, 0.1);
+
+    --left-panel-surface: linear-gradient(180deg, var(--panel-bg-1) 0%, var(--panel-bg-2) 100%);
+
+    --bg-alpha-01: rgba(255, 255, 255, 0.01);
     --bg-alpha-02: rgba(255, 255, 255, 0.02);
     --bg-alpha-03: rgba(255, 255, 255, 0.03);
+    --bg-alpha-04: rgba(255, 255, 255, 0.04);
     --bg-alpha-05: rgba(255, 255, 255, 0.05);
     --bg-alpha-06: rgba(255, 255, 255, 0.06);
+    --bg-alpha-07: rgba(255, 255, 255, 0.07);
     --bg-alpha-08: rgba(255, 255, 255, 0.08);
     --bg-alpha-1: rgba(255, 255, 255, 0.1);
     --bg-alpha-2: rgba(255, 255, 255, 0.2);
+    --bg-alpha-3: rgba(255, 255, 255, 0.3);
+    --bg-alpha-4: rgba(255, 255, 255, 0.4);
+    --bg-alpha-5: rgba(255, 255, 255, 0.5);
+    --bg-alpha-6: rgba(255, 255, 255, 0.6);
     --bg-alpha-7: rgba(255, 255, 255, 0.7);
     --bg-alpha-8: rgba(255, 255, 255, 0.8);
     --bg-alpha-9: rgba(255, 255, 255, 0.9);
@@ -21,15 +47,89 @@
     --bg-secondary-alpha-7: rgba(0, 0, 0, 0.7);
     --bg-secondary-alpha-8: rgba(0, 0, 0, 0.8);
     --bg-secondary-alpha-9: rgba(0, 0, 0, 0.9);
+
+    --bg-slider: #333333;
     --thinking-toggle: transparent;
+    --marketplace-surface: radial-gradient(ellipse at 50% 0%, rgba(50, 50, 50, 0.3) 0%, transparent 60%);
+    --marketplace-badge-surface: linear-gradient(135deg, rgba(255, 200, 50, 0.15) 0%, rgba(255, 150, 50, 0.1) 100%);
+    --marketplace-offline-surface: radial-gradient(ellipse at 50% 0%, rgba(50, 50, 50, 0.3) 0%, transparent 60%);
+    --backend-manager-surface: radial-gradient(110% 65% at 50% 0%, rgba(252, 204, 21, 0.02) 0%, rgba(252, 204, 21, 0) 60%),
+    linear-gradient(180deg, rgba(10, 10, 13, 0.84) 0%, rgba(7, 7, 10, 0.9) 100%);
+
+    --label-reasoning: #6495ED;
+    --label-coding: #48BB78;
+    --label-vision: #9F7AEA;
+    --label-hot: #F56565;
+    --label-embeddings: #ED8936;
+    --label-reranking: #D69E2E;
+    --label-tool-calling: #38B2AC;
+    --label-custom: #FAD02C;
+
+    --markdown-code: #ff6b6b;
+    --markdown-link: #4a9eff;
+    --markdown-hljs-quote: #7c7c7c;
+    --markdown-hljs-type: #c792ea;
+    --markdown-hljs-selector: #f78c6c;
+    --markdown-hljs-template-variable: #c3e88d;
+    --markdown-hljs-variable: #82aaff;
+    --markdown-hljs-title: #82aaff;
+    --markdown-hljs-property: #c792ea;
+    --markdown-hljs-link: #f07178;
+    --markdown-hljs-bullet: #89ddff;
+    --markdown-hljs-meta: #ffcb6b;
+    --markdown-hljs-tag: #f07178;
+    --markdown-hljs-name: #f07178;
+    --markdown-hljs-section: #82aaff;
+    --markdown-hljs-addition: rgba(0, 255, 0, 0.15);
+    --markdown-hljs-deletion: rgba(255, 0, 0, 0.15);
+
+    --toast-success-border: rgba(34, 197, 94, 0.4);
+    --toast-success-surface: linear-gradient(135deg, #1a1a1a 0%, #151f17 100%);
+    --toast-success-text: #22c55e;
+    --toast-info-border: rgba(59, 130, 246, 0.4);
+    --toast-info-surface: linear-gradient(135deg, #1a1a1a 0%, #151a1f 100%);
+    --toast-info-text: #3b82f6;
+    --toast-warning-border: rgba(234, 179, 8, 0.4);
+    --toast-warning-surface: linear-gradient(135deg, #1a1a1a 0%, #1f1d15 100%);
+    --toast-warning-text: #eab308;
+    --toast-error-border: rgba(239, 68, 68, 0.4);
+    --toast-error-surface: linear-gradient(135deg, #1a1a1a 0%, #1f1517 100%);
+    --toast-error-text: #ef4444;
+
+    --border-alpha-04: rgba(255, 255, 255, 0.04);
+    --border-alpha-05: rgba(255, 255, 255, 0.05);
+    --border-alpha-06: rgba(255, 255, 255, 0.06);
+    --border-alpha-07: rgba(255, 255, 255, 0.07);
+    --border-alpha-08: rgba(255, 255, 255, 0.08);
+    --border-alpha-09: rgba(255, 255, 255, 0.09);
+    --border-alpha-1: rgba(255, 255, 255, 0.1);
+    --border-alpha-2: rgba(255, 255, 255, 0.2);
+    --border-alpha-15: rgba(255, 255, 255, 0.15);
+
     --border-primary: #333333;
     --border-secondary: #2a2a2a;
     --border-tertiary: #1a1a1a;
+    --border-2: #222222;
+    --color-2: #222222;
+    --border-4: #444444;
+    --color-4: #444444;
+    --border-5: #555555;
+    --color-5: #555555;
+    --border-6: #666666;
+    --border-8: #888888;
+    --color-6: #666666;
+    --color-7: #777777;
+    --color-9: #999999;
+    --color-25: #252525;
+    --border-25: #252525;
     --text-primary: #ffffff;
     --text-secondary: #888888;
     --text-tertiary: #cccccc;
     --text-quaternary: #666666;
     --text-code: #e0e0e0;
+    --text-aaa: #aaaaaa;
+    --text-link: #75abd7;
+    --text-link-hover: #96c5e9;
     --btn-color: #000000;
     --btn-bg-primary: #ffffff;
     --btn-bg-secondary: #2a2a2a;
@@ -43,6 +143,13 @@
     --icon-hover: #f2f2f2;
     --icon-alt: #b9b9b9;
     --scrollbar-color: #555 #252525;
+
+    --title-btn-hover: #e81123;
+    --title-btn-active: #c50e1f;
+
+    --mic-btn-background: rgba(244, 67, 54, 0.15);
+    --mic-btn-border: #f44336;
+    --mic-btn-color: #f44336;
 }
 
 * {
@@ -60,68 +167,131 @@ body {
     background: var(--header-bg-color);
     min-height: 100vh;
     height: 100vh;
+    background: var(--layout-bg);
     color: var(--text-primary);
     overflow: hidden;
 }
 
-[data-theme="dark"] {
-    --header-bg-color: #000000;
-    --bg-primary: #0a0a0a;
-    --bg-secondary: #1a1a1a;
-    --bg-tertiary: #111111;
-    --bg-quaternary: #2a2a2a;
-    --bg-hover: #f0f0f0;
-    --bg-alpha-02: rgba(255, 255, 255, 0.02);
-    --bg-alpha-03: rgba(255, 255, 255, 0.03);
-    --bg-alpha-05: rgba(255, 255, 255, 0.05);
-    --bg-alpha-06: rgba(255, 255, 255, 0.06);
-    --bg-alpha-08: rgba(255, 255, 255, 0.08);
-    --bg-alpha-1: rgba(255, 255, 255, 0.1);
-    --bg-alpha-2: rgba(255, 255, 255, 0.2);
-    --bg-alpha-7: rgba(255, 255, 255, 0.7);
-    --bg-alpha-8: rgba(255, 255, 255, 0.8);
-    --bg-alpha-9: rgba(255, 255, 255, 0.9);
-    --bg-secondary-alpha-2: rgba(0, 0, 0, 0.2);
-    --bg-secondary-alpha-3: rgba(0, 0, 0, 0.3);
-    --bg-secondary-alpha-5: rgba(0, 0, 0, 0.5);
-    --bg-secondary-alpha-7: rgba(0, 0, 0, 0.7);
-    --bg-secondary-alpha-8: rgba(0, 0, 0, 0.8);
-    --bg-secondary-alpha-9: rgba(0, 0, 0, 0.9);
-    --thinking-toggle: transparent;
-    --border-primary: #333333;
-    --border-secondary: #2a2a2a;
-    --border-tertiary: #1a1a1a;
-    --text-primary: #ffffff;
-    --text-secondary: #888888;
-    --text-tertiary: #cccccc;
-    --text-code: #e0e0e0;
-    --accent-color: #f1c40f;
-    --btn-color: #000000;
-    --btn-bg-primary: #ffffff;
-    --btn-bg-secondary: #2a2a2a;
-    --btn-bg-hover: #3a3a3a;
-    --btn-border: none;
-    --panel-bg-1: #090909;
-    --panel-bg-2: #070707;
-    --chat-bg-1: rgba(10, 10, 10, 0);
-    --chat-bg-2: rgba(8, 8, 8, 0.72);
-    --chat-bg-3: #000000;
-    --icon-hover: #f2f2f2;
-    --icon-alt: #b9b9b9;
-    --scrollbar-color: #555 #252525;
-}
-
 [data-theme="light"] {
     --header-bg-color: #fff5d1;
+    --layout-bg: #fffbe9;
+    --title-surface: #fffbe9;
+
     --bg-primary: #fffbe9;
     --bg-secondary: #fff8dd;
     --bg-tertiary: #fff5d1;
     --bg-quaternary: #fff5be;
     --bg-hover: #fff5be;
+
+    --success-color: #4CAF50;
+    --success-border: #4CAF50;
+    --warning-color: #ffb74d;
+    --info-color: #2196F3;
+    --action-color: #FF9800;
+    --error-background-color: rgba(244, 67, 54, 0.1);
+    --error-border: rgba(244, 67, 54, 0.3);
+    --error-color: #f44336;
+
+    --logs-error: #ff4444;
+    --logs-surface: rgba(255, 68, 68, 0.1);
+
+    --left-panel-surface: linear-gradient(180deg, var(--panel-bg-1) 0%, var(--panel-bg-2) 100%);
+
+    --bg-slider: #333333;
+    --marketplace-surface: radial-gradient(ellipse at 50% 0%, rgba(50, 50, 50, 0.3) 0%, transparent 60%);
+    --marketplace-badge-surface: linear-gradient(135deg, rgba(255, 200, 50, 0.15) 0%, rgba(255, 150, 50, 0.1) 100%);
+    --marketplace-offline-surface: radial-gradient(ellipse at 50% 0%, rgba(50, 50, 50, 0.3) 0%, transparent 60%);
+    --backend-manager-surface: radial-gradient(110% 65% at 50% 0%, rgba(252, 204, 21, 0.02) 0%, rgba(252, 204, 21, 0) 60%),
+    linear-gradient(180deg, rgba(10, 10, 13, 0.84) 0%, rgba(7, 7, 10, 0.9) 100%);
+
+    --label-reasoning: #6495ED;
+    --label-coding: #48BB78;
+    --label-vision: #9F7AEA;
+    --label-hot: #F56565;
+    --label-embeddings: #ED8936;
+    --label-reranking: #D69E2E;
+    --label-tool-calling: #38B2AC;
+    --label-custom: #FAD02C;
+
+    --markdown-code: #d64545;
+    --markdown-link: #0066cc;
+    --markdown-hljs-quote: #5f6368;
+    --markdown-hljs-type: #8e44ad;
+    --markdown-hljs-selector: #d35400;
+    --markdown-hljs-template-variable: #43a047;
+    --markdown-hljs-variable: #1976d2;
+    --markdown-hljs-title: #1976d2;
+    --markdown-hljs-property: #8e44ad;
+    --markdown-hljs-link: #c2185b;
+    --markdown-hljs-bullet: #00838f;
+    --markdown-hljs-meta: #b8860b;
+    --markdown-hljs-tag: #c2185b;
+    --markdown-hljs-name: #c2185b;
+    --markdown-hljs-section: #1976d2;
+    --markdown-hljs-addition: rgba(47, 211, 47, 0.15);
+    --markdown-hljs-deletion: rgba(211, 47, 47, 0.15);
+
+    --toast-success-border: rgba(34, 197, 94, 0.4);
+    --toast-success-surface: linear-gradient(135deg, #fffbe9 0%, #f0fdf4 100%);
+    --toast-success-text: #15803d;
+    --toast-info-border: rgba(59, 130, 246, 0.4);
+    --toast-info-surface: linear-gradient(135deg, #fffbe9 0%, #eff6ff 100%);
+    --toast-info-text: #1d4ed8;
+    --toast-warning-border: rgba(234, 179, 8, 0.4);
+    --toast-warning-surface: linear-gradient(135deg, #fffbe9 0%, #fefce8 100%);
+    --toast-warning-text: #a16207;
+    --toast-error-border: rgba(239, 68, 68, 0.4);
+    --toast-error-surface: linear-gradient(135deg, #fffbe9 0%, #fef2f2 100%);
+    --toast-error-text: #b91c1c;
+
+    --border-alpha-04: rgba(255, 255, 255, 0.04);
+    --border-alpha-05: rgba(255, 255, 255, 0.05);
+    --border-alpha-06: rgba(255, 255, 255, 0.06);
+    --border-alpha-07: rgba(255, 255, 255, 0.07);
+    --border-alpha-08: rgba(255, 255, 255, 0.08);
+    --border-alpha-09: rgba(255, 255, 255, 0.09);
+    --border-alpha-1: rgba(255, 255, 255, 0.1);
+    --border-alpha-2: rgba(255, 255, 255, 0.2);
+    --border-alpha-15: rgba(255, 255, 255, 0.15);
+
+    --border-2: #222222;
+    --color-2: #222222;
+    --border-4: #444444;
+    --color-4: #444444;
+    --border-5: #555555;
+    --color-5: #555555;
+    --border-6: #666666;
+    --border-8: #888888;
+    --color-6: #666666;
+    --color-7: #777777;
+    --color-9: #999999;
+    --color-25: #252525;
+    --border-25: #252525;
+    --text-primary: #000000;
+    --text-secondary: #0a0a0a;
+    --text-tertiary: #0a0a0a;
+    --text-quaternary: #666666;
+    --text-aaa: #0a0a0a;
+    --text-link: #1976d2;
+    --text-link-hover: #176abd;
+
+    --title-btn-hover: #e81123;
+    --title-btn-active: #c50e1f;
+
+    --mic-btn-background: rgba(244, 67, 54, 0.15);
+    --mic-btn-border: #f44336;
+    --mic-btn-color: #f44336;
+
+    --bg-alpha-01: rgba(255, 255, 255, 0.01);
+    --bg-alpha-04: rgba(255, 255, 255, 0.04);
+    --bg-alpha-07: rgba(255, 255, 255, 0.07);
+    --bg-alpha-3: rgba(255, 255, 255, 0.3);
+    --bg-alpha-4: rgba(255, 255, 255, 0.4);
+    --bg-alpha-5: rgba(255, 255, 255, 0.5);
+    --bg-alpha-6: rgba(255, 255, 255, 0.6);
     --bg-alpha-02: rgba(0, 0, 0, 0.02);
     --bg-alpha-03: rgba(0, 0, 0, 0.03);
     --bg-alpha-05: rgba(0, 0, 0, 0.05);
-    /*--bg-alpha-05: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.56));*/
     --bg-alpha-06: rgba(0, 0, 0, 0.06);
     --bg-alpha-08: rgba(0, 0, 0, 0.08);
     --bg-alpha-1: rgba(0, 0, 0, 0.1);
@@ -139,9 +309,7 @@ body {
     --border-primary: #333333;
     --border-secondary: #2a2a2a;
     --border-tertiary: #1a1a1a;
-    --text-primary: #000000;
-    --text-secondary: #0a0a0a;
-    --text-tertiary: #0a0a0a;
+
     --text-code: #0a0a0a;
     --accent-color: #3498db;
     --btn-color: var(--text-secondary);
@@ -156,7 +324,7 @@ body {
     --chat-bg-3: #fff5d1;
     --icon-hover: #000000;
     --icon-alt: #2a2a2a;
-    --scrollbar-color: #444 transparent;
+    --scrollbar-color: var(--color-4) transparent;
 }
 
 /* WebKit-friendly app-chrome selection reset.
@@ -293,13 +461,12 @@ pre {
     cursor: se-resize;
 }
 
-/* Title Bar Styles */
 .title-bar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 32px;
-    background: var(--header-bg-color);
+    background: var(--title-surface);
     color: var(--text-primary);
     -webkit-app-region: drag;
     user-select: none;
@@ -395,7 +562,7 @@ pre {
 
 .menu-separator {
     height: 1px;
-    background: #333;
+    background: var(--bg-slider);
     margin: 4px 8px;
 }
 
@@ -411,7 +578,7 @@ pre {
 
 .app-title {
     font-size: 12px;
-    color: #999;
+    color: var(--color-9);
 }
 
 .title-bar-right {
@@ -438,7 +605,7 @@ pre {
 }
 
 .title-bar-button.close:hover {
-    background: #e81123;
+    background: var(--title-btn-hover)
 }
 
 .title-bar-button:active {
@@ -446,7 +613,7 @@ pre {
 }
 
 .title-bar-button.close:active {
-    background: #c50e1f;
+    background: var(--title-btn-active);
 }
 
 .title-bar-logo.center-logo {
@@ -463,7 +630,7 @@ pre {
 }
 
 .title-bar-button.help.active {
-    background: rgba(255, 255, 255, 0.12);
+    background: var(--bg-alpha-1);
 }
 
 body > * {
@@ -522,7 +689,7 @@ main {
 
 .card:hover {
     transform: translateY(-2px);
-    border-color: #444;
+    border-color: var(--border-4);
 }
 
 .card h2 {
@@ -539,19 +706,18 @@ main {
 
 .card p {
     line-height: 1.4;
-    color: #aaaaaa;
+    color: var(--text-aaa);
     margin-bottom: 10px;
     font-size: 0.95rem;
 }
 
 .card ul {
     list-style-position: inside;
-    color: #aaaaaa;
+    color: var(--text-aaa);
     line-height: 1.6;
     font-size: 0.95rem;
 }
 
-/* Marketplace Section */
 .marketplace-section {
     display: flex;
     flex-direction: column;
@@ -560,7 +726,7 @@ main {
     padding: 40px 24px;
     height: 100%;
     width: 100%;
-    background: radial-gradient(ellipse at 50% 0%, rgba(50, 50, 50, 0.3) 0%, transparent 60%);
+    background: var(--marketplace-surface);
 }
 
 .marketplace-badge {
@@ -568,7 +734,7 @@ main {
     align-items: center;
     gap: 6px;
     padding: 6px 14px;
-    background: linear-gradient(135deg, rgba(255, 200, 50, 0.15) 0%, rgba(255, 150, 50, 0.1) 100%);
+    background: var(--marketplace-badge-surface);
     border: 1px solid rgba(255, 200, 50, 0.3);
     border-radius: 20px;
     margin-bottom: 16px;
@@ -676,8 +842,8 @@ main {
     align-items: center;
     gap: 8px;
     padding: 12px 14px;
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: var(--bg-alpha-03);
+    border: 1px solid var(--border-alpha-06);
     border-radius: 12px;
     text-decoration: none;
     cursor: pointer;
@@ -688,7 +854,7 @@ main {
 
 .gallery-app-item:hover {
     background: var(--bg-alpha-08);
-    border-color: rgba(255, 255, 255, 0.15);
+    border-color: var(--border-alpha-15);
     transform: translateY(-4px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
 }
@@ -717,7 +883,7 @@ main {
 
 .gallery-app-name {
     font-size: 0.65rem;
-    color: #999;
+    color: var(--color-9);
     text-align: center;
     font-weight: 500;
     white-space: nowrap;
@@ -731,7 +897,6 @@ main {
     color: var(--text-primary);;
 }
 
-/* Marketplace iframe */
 .marketplace-iframe {
     width: 100%;
     flex: 1;
@@ -745,7 +910,7 @@ main {
     flex-direction: column;
     height: 100%;
     width: 100%;
-    background: #000;
+    background: var(--header-bg-color);
 }
 
 .external-content-header {
@@ -753,7 +918,7 @@ main {
     align-items: center;
     padding: 8px 12px;
     background: var(--bg-tertiary);
-    border-bottom: 1px solid #222;
+    border-bottom: 1px solid var(--border-2);
     gap: 12px;
 }
 
@@ -773,7 +938,7 @@ main {
 
 .external-content-back-btn:hover {
     color: var(--text-primary);;
-    background: #222;
+    background: var(--color-2);
 }
 
 /* Disable iframe pointer events during resize to prevent event capture */
@@ -786,7 +951,6 @@ body[style*="cursor: row-resize"] .marketplace-iframe {
     opacity: 0;
 }
 
-/* Marketplace Loading State */
 .marketplace-loading {
     display: flex;
     flex-direction: column;
@@ -818,7 +982,6 @@ body[style*="cursor: row-resize"] .marketplace-iframe {
     margin: 0;
 }
 
-/* Marketplace Offline State */
 .marketplace-offline {
     display: flex;
     flex-direction: column;
@@ -828,7 +991,7 @@ body[style*="cursor: row-resize"] .marketplace-iframe {
     width: 100%;
     padding: 40px;
     text-align: center;
-    background: radial-gradient(ellipse at 50% 0%, rgba(50, 50, 50, 0.3) 0%, transparent 60%);
+    background: var(--marketplace-offline-surface);
 }
 
 .offline-icon {
@@ -888,7 +1051,7 @@ body[style*="cursor: row-resize"] .marketplace-iframe {
 .offline-btn.secondary:hover {
     background: var(--bg-secondary);
     color: var(--text-primary);;
-    border-color: #555;
+    border-color: var(--border-5);
 }
 
 .status-section {
@@ -916,11 +1079,11 @@ body[style*="cursor: row-resize"] .marketplace-iframe {
 }
 
 .status-indicator.connected .status-dot {
-    background: #4caf50;
+    background: var(--success-color);
 }
 
 .status-indicator.error .status-dot {
-    background: #f44336;
+    background: var(--error-color);
     animation: none;
 }
 
@@ -1004,7 +1167,6 @@ footer {
     font-size: 0.9rem;
 }
 
-/* App Layout */
 .app-layout {
     display: flex;
     height: calc(100vh - 32px - 28px); /* 32px title bar + 28px status bar */
@@ -1038,7 +1200,6 @@ footer {
     width: 100%;
 }
 
-/* Resizable Divider */
 .resizable-divider {
     width: 4px;
     background: transparent;
@@ -1056,9 +1217,8 @@ footer {
     background: var(--bg-alpha-2)
 }
 
-/* Model Manager Styles */
 .model-manager {
-    background: var(--bg-primary);
+    background: var(--layout-bg);
     border-right: 1px solid var(--bg-secondary);
     display: flex;
     flex-direction: column;
@@ -1082,7 +1242,7 @@ footer {
 .left-panel-mode-rail {
     width: 40px;
     border-right: 1px solid var(--border-tertiary);
-    background: linear-gradient(180deg, var(--panel-bg-1) 0%, var(--panel-bg-2) 100%);
+    background: var(--left-panel-surface);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -1114,12 +1274,12 @@ footer {
 
 .left-panel-mode-btn:hover {
     color: var(--icon-alt);
-    background: rgba(255, 255, 255, 0.035);
+    background: var(--bg-alpha-03);
 }
 
 .left-panel-mode-btn.active {
     color: var(--icon-hover);
-    background: rgba(255, 255, 255, 0.045);
+    background: var(--bg-alpha-04);
 }
 
 .left-panel-mode-btn.active::before {
@@ -1176,13 +1336,13 @@ footer {
 }
 
 .model-manager-header.experience-header {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+    border-bottom: 1px solid var(--border-alpha-07);
     gap: 4px;
 }
 
 .experience-subtitle {
     font-size: 0.75rem;
-    color: #b8b8b8;
+    color: var(--text-tertiary);
     letter-spacing: 0.18px;
 }
 
@@ -1196,7 +1356,7 @@ footer {
 .left-panel-filter-btn {
     border: 1px solid var(--border-secondary);
     background: var(--bg-tertiary);
-    color: #777;
+    color: var(--color-7);
     font-size: 0.62rem;
     border-radius: 4px;
     padding: 4px 8px;
@@ -1209,8 +1369,8 @@ footer {
 }
 
 .left-panel-filter-btn:hover {
-    color: #aaa;
-    border-color: #3a3a3a;
+    color: var(--text-aaa);
+    border-color: var(--border-4);
 }
 
 .left-panel-filter-drawer {
@@ -1309,7 +1469,7 @@ footer {
     border: none;
     border-radius: 5px;
     background: transparent;
-    color: #757575;
+    color: var(--text-secondary);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -1319,13 +1479,13 @@ footer {
 }
 
 .left-panel-inline-filter-btn:hover {
-    color: #bcbcbc;
+    color: var(--text-tertiary);
     background: var(--bg-alpha-06);
 }
 
 .left-panel-inline-filter-btn.active {
     color: var(--text-primary);
-    background: rgba(255, 255, 255, 0.16);
+    background: var(--bg-alpha-2);
 }
 
 .left-panel-filter-popover {
@@ -1336,7 +1496,7 @@ footer {
     padding: 7px 8px;
     border: 1px solid rgba(255, 255, 255, 0.14);
     border-radius: 6px;
-    background: var(--bg-tertiary); /* rgba(10, 10, 10, 0.96); */
+    background: var(--bg-tertiary);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.38), 0 14px 28px rgba(0, 0, 0, 0.46);
     z-index: 40;
     animation: filter-popover-in 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -1383,14 +1543,14 @@ footer {
 }
 
 .marketplace-filter-option.active {
-    border-color: rgba(255, 255, 255, 0.11);
-    background: rgba(255, 255, 255, 0.075);
+    border-color: var(--border-alpha-1);
+    background: var(--bg-alpha-07);
     color: var(--text-primary);
 }
 
 .model-filter-popover .organization-toggle {
     padding: 2px;
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--border-alpha-06);
 }
 
 .model-filter-popover .toggle-button {
@@ -1404,7 +1564,7 @@ footer {
 }
 
 .model-filter-popover .toggle-label-text {
-    color: #7e7e7e;
+    color: var(--text-secondary);
     letter-spacing: 0.3px;
 }
 
@@ -1433,12 +1593,11 @@ footer {
     border-color: var(--border-secondary);
 }
 
-/* Loaded Model Section */
 .loaded-model-section {
     padding: 12px 15px;
     background: var(--bg-primary);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
-    border-top: 1px solid rgba(255, 255, 255, 0.04);
+    border-bottom: 1px solid var(--border-alpha-07);
+    border-top: 1px solid var(--border-alpha-04);
 }
 
 .loaded-model-section.widget {
@@ -1464,15 +1623,15 @@ footer {
     border-radius: 0;
     border: none;
     background: var(--bg-primary);
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    border-top: 1px solid var(--border-alpha-05);
 }
 
 .hf-search-spinner {
     display: inline-block;
     width: 10px;
     height: 10px;
-    border: 1.5px solid rgba(255, 255, 255, 0.12);
-    border-top-color: #888;
+    border: 1.5px solid var(--border-alpha-1);
+    border-top-color: var(--border-8);
     border-radius: 50%;
     animation: hf-spin 0.7s linear infinite;
     flex-shrink: 0;
@@ -1486,7 +1645,7 @@ footer {
 
 .hf-search-message {
     font-size: 0.68rem;
-    color: #555;
+    color: var(--color-5);
     padding: 4px 0;
 }
 
@@ -1500,8 +1659,8 @@ footer {
 }
 
 .hf-model-item:hover {
-    background: rgba(255, 255, 255, 0.04);
-    border-left-color: #444;
+    background: var(--bg-alpha-04);
+    border-left-color: var(--border-4);
 }
 
 .hf-model-left {
@@ -1523,7 +1682,7 @@ footer {
 
 .hf-model-name {
     font-size: 0.65rem;
-    color: #d0d0d0;
+    color: var(--text-secondary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1533,7 +1692,7 @@ footer {
 
 .hf-model-meta {
     font-size: 0.6rem;
-    color: #555;
+    color: var(--color-5);
     flex-shrink: 0;
     white-space: nowrap;
 }
@@ -1555,7 +1714,7 @@ footer {
     font-size: 0.58rem;
     color: var(--text-secondary);
     background: var(--bg-alpha-05);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--border-alpha-08);
     border-radius: 3px;
     padding: 1px 5px;
     letter-spacing: 0.2px;
@@ -1564,10 +1723,10 @@ footer {
 
 .hf-quant-select {
     font-size: 0.62rem;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--bg-alpha-04);
+    border: 1px solid var(--border-alpha-1);
     border-radius: 3px;
-    color: #aaa;
+    color: var(--text-aaa);
     padding: 1px 4px;
     cursor: pointer;
     max-width: 90px;
@@ -1575,18 +1734,18 @@ footer {
 
 .hf-quant-select:focus {
     outline: none;
-    border-color: rgba(255, 255, 255, 0.25);
+    border-color: var(--border-alpha-2);
 }
 
 .hf-model-size {
     font-size: 0.62rem;
-    color: #555;
+    color: var(--color-5);
     flex-shrink: 0;
 }
 
 .hf-unsupported {
     font-size: 0.62rem;
-    color: #444;
+    color: var(--color-4);
     font-style: italic;
 }
 
@@ -1613,7 +1772,7 @@ footer {
     text-transform: uppercase;
     padding: 2px 6px;
     border-radius: 6px;
-    border: 1px solid rgba(255, 255, 255, 0.09);
+    border: 1px solid var(--border-alpha-09);
     background: var(--bg-secondary);
     flex-shrink: 0;
 }
@@ -1654,17 +1813,17 @@ footer {
 }
 
 .loaded-model-info:hover {
-    background: rgba(255, 255, 255, 0.03);
+    background: var(--bg-alpha-03);
 }
 
 .loaded-experience-group {
-    border: 1px solid rgba(255, 255, 255, 0.09);
-    background: rgba(255, 255, 255, 0.015);
+    border: 1px solid var(--border-alpha-09);
+    background: var(--bg-alpha-1);
     border-radius: 7px;
 }
 
 .loaded-experience-group:hover {
-    background: rgba(255, 255, 255, 0.03);
+    background: var(--bg-alpha-03);
 }
 
 .model-manager.experience-mode .loaded-model-section {
@@ -1692,7 +1851,7 @@ footer {
 
 .loaded-experience-components {
     font-size: 0.62rem;
-    color: #8f8f8f;
+    color: var(--text-secondary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1788,7 +1947,7 @@ footer {
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: #333;
+    background-color: var(--bg-slider);
     transition: 0.3s;
     border-radius: 12px;
 }
@@ -1800,13 +1959,13 @@ footer {
     width: 8px;
     left: 2px;
     bottom: 2px;
-    background-color: #666;
+    background-color: var(--color-6);
     transition: 0.3s;
     border-radius: 50%;
 }
 
 .toggle-switch input:checked + .toggle-slider {
-    background-color: #555;
+    background-color: var(--color-5);
 }
 
 .toggle-switch input:checked + .toggle-slider:before {
@@ -1819,7 +1978,7 @@ footer {
 }
 
 .toggle-switch input:checked:hover + .toggle-slider {
-    background-color: #666;
+    background-color: var(--color-6);
 }
 
 .model-manager-content {
@@ -1864,7 +2023,7 @@ footer {
 
 .category-subtitle {
     font-size: 0.6rem;
-    color: #9d9d9d;
+    color: var(--text-tertiary);
     letter-spacing: 0.2px;
     margin-top: 1px;
     text-transform: none;
@@ -1895,7 +2054,7 @@ footer {
 
 .model-context-menu-item:hover {
     background: var(--bg-alpha-05);
-    border-top-color: #666;
+    border-top-color: var(--border-6);
     transition: background-color 0.15s ease, color 0.15s ease;
 }
 
@@ -1928,7 +2087,7 @@ footer {
     margin: 0;
     font-size: 0.85rem;
     font-weight: 600;
-    color: #aaa;
+    color: var(--text-aaa);
     letter-spacing: 0.5px;
 }
 
@@ -1936,7 +2095,7 @@ footer {
     margin-top: 10px;
     font-size: 0.65rem;
     font-weight: 600;
-    color: #aaa;
+    color: var(--text-aaa);
     letter-spacing: 0.5px;
 }
 
@@ -1949,13 +2108,13 @@ footer {
 }
 
 .model-options-category-header .model-options-checkpoint-link {
-    color: #75abd7;
+    color: var(--text-link);
     text-decoration: none;
     cursor: pointer;
 }
 
 .model-options-category-header .model-options-checkpoint-link:hover {
-    color: #96c5e9;
+    color: var(--text-link-hover);
     text-decoration: none;
 }
 
@@ -1995,7 +2154,7 @@ footer {
 
 .category-count {
     margin-left: 4px;
-    color: #7a7a7a;
+    color: var(--text-secondary);
     font-size: 0.65rem;
 }
 
@@ -2013,8 +2172,8 @@ footer {
 }
 
 .model-item:hover {
-    background: rgba(255, 255, 255, 0.04);
-    border-left-color: #666;
+    background: var(--bg-alpha-04);
+    border-left-color: var(--border-6);
 }
 
 .model-family-group {
@@ -2031,7 +2190,7 @@ footer {
 }
 
 .model-family-header:hover {
-    background: rgba(255, 255, 255, 0.03);
+    background: var(--bg-alpha-03);
 }
 
 .family-chevron {
@@ -2092,27 +2251,27 @@ footer {
 
 .model-action-btn:hover {
     background: var(--bg-alpha-06);
-    color: #bfbfbf;
+    color: var(--text-tertiary);
 }
 
 .model-action-btn.download-btn:hover {
-    color: #4CAF50;
+    color: var(--success-color);
 }
 
 .model-action-btn.update-btn:hover {
-    color: #ffb74d;
+    color: var(--warning-color);
 }
 
 .model-action-btn.load-btn:hover {
-    color: #2196F3;
+    color: var(--info-color);
 }
 
 .model-action-btn.unload-btn:hover {
-    color: #FF9800;
+    color: var(--action-color);
 }
 
 .model-action-btn.delete-btn:hover {
-    color: #F44336;
+    color: var(--error-color);
 }
 
 .model-info-left {
@@ -2168,7 +2327,7 @@ footer {
 
 /* Model is currently loaded (green) */
 .model-status-indicator.loaded {
-    background-color: #4CAF50;
+    background-color: var(--success-color);
     box-shadow: 0 0 4px rgba(74, 222, 128, 0.65);
 }
 
@@ -2188,12 +2347,12 @@ footer {
 }
 
 .model-status-indicator.unsupported {
-    background-color: #f44336;
+    background-color: var(--error-color);
 }
 
 /* Model is loading (pulsing animation) */
 .model-status-indicator.loading {
-    background-color: #4CAF50;
+    background-color: var(--success-color);
     animation: pulse 1.5s ease-in-out infinite;
     box-shadow: 0 0 4px rgba(74, 222, 128, 0.65);
 }
@@ -2211,7 +2370,7 @@ footer {
 
 .model-size {
     font-size: 0.6rem;
-    color: #565656;
+    color: var(--text-secondary);
     flex-shrink: 0;
     white-space: nowrap;
 }
@@ -2245,35 +2404,35 @@ footer {
 }
 
 .model-label.label-reasoning {
-    background: #6495ED;
+    background: var(--label-reasoning);
 }
 
 .model-label.label-coding {
-    background: #48BB78;
+    background: var(--label-coding);
 }
 
 .model-label.label-vision {
-    background: #9F7AEA;
+    background: var(--label-vision);
 }
 
 .model-label.label-hot {
-    background: #F56565;
+    background: var(--label-hot);
 }
 
 .model-label.label-embeddings {
-    background: #ED8936;
+    background: var(--label-embeddings);
 }
 
 .model-label.label-reranking {
-    background: #D69E2E;
+    background: var(--label-reranking);
 }
 
 .model-label.label-tool-calling {
-    background: #38B2AC;
+    background: var(--label-tool-calling);
 }
 
 .model-label.label-custom {
-    background: #FAD02C;
+    background: var(--label-custom);
 }
 
 .model-label.label-experience {
@@ -2293,7 +2452,7 @@ footer {
 }
 
 .left-panel-empty-state {
-    color: #777;
+    color: var(--color-7);
     font-size: 0.72rem;
     padding: 12px 14px;
 }
@@ -2316,8 +2475,8 @@ footer {
 }
 
 .left-panel-row-item:hover {
-    background: rgba(255, 255, 255, 0.03);
-    border-left-color: #666;
+    background: var(--bg-alpha-03);
+    border-left-color: var(--border-6);
 }
 
 .left-panel-row-main {
@@ -2344,7 +2503,7 @@ footer {
 }
 
 .left-panel-row-meta {
-    color: #9a9a9a;
+    color: var(--text-secondary);
     font-size: 0.69rem;
     line-height: 1.45;
     margin-top: 3px;
@@ -2354,11 +2513,11 @@ footer {
 }
 
 .left-panel-row-badge {
-    border: 1px solid #3a3a3a;
+    border: 1px solid var(--border-4);
     border-radius: 999px;
     padding: 1px 6px;
     font-size: 0.55rem;
-    color: #aaa;
+    color: var(--text-aaa);
     text-transform: uppercase;
     letter-spacing: 0.25px;
 }
@@ -2404,15 +2563,15 @@ footer {
     flex-direction: column;
     align-items: stretch;
     padding: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.045);
-    background: rgba(255, 255, 255, 0.012);
+    border: 1px solid var(--border-alpha-05);
+    background: var(--bg-alpha-01);
     border-left: 2px solid transparent;
 }
 
 .marketplace-app-card:hover {
     border-color: var(--bg-alpha-06);
-    border-left-color: rgba(255, 255, 255, 0.16);
-    background: rgba(255, 255, 255, 0.016);
+    border-left-color: var(--border-alpha-2);
+    background: var(--bg-alpha-02);
 }
 
 .marketplace-app-main {
@@ -2454,7 +2613,7 @@ footer {
     display: inline-flex;
     align-items: center;
     padding: 2px 7px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--border-alpha-08);
     border-radius: 999px;
     background: var(--bg-secondary);
     flex-shrink: 0;
@@ -2479,7 +2638,7 @@ footer {
     border: 1px solid #303030;
     border-radius: 4px;
     background: var(--bg-primary);
-    color: var(--icon-alt); /*#bdbdbd; */
+    color: var(--icon-alt);
     cursor: pointer;
     font-size: 0.62rem;
     line-height: 1;
@@ -2488,20 +2647,20 @@ footer {
 
 .left-panel-link-btn:hover {
     color: var(--icon-hover);
-    border-color: #444;
+    border-color: var(--border-4);
     background: var(--bg-tertiary);
 }
 
 .left-panel-link-btn.primary {
-    border-color: #444;
-    color: var(--text-primary); /*#efefef*/
+    border-color: var(--border-4);
+    color: var(--text-primary);
     background: var(--bg-alpha-08);
 }
 
 .left-panel-link-btn.primary:hover {
     color: var(--text-primary);
-    border-color: #5a5a5a;
-    background: rgba(255, 255, 255, 0.15);
+    border-color: var(--border-secondary);
+    background: var(--bg-alpha-2);
 }
 
 .backend-row-item {
@@ -2552,7 +2711,7 @@ footer {
 
 .backend-status-message {
     margin-left: 14px;
-    color: #777;
+    color: var(--color-7);
     font-size: 0.62rem;
     line-height: 1.2;
     white-space: nowrap;
@@ -2579,7 +2738,7 @@ footer {
 }
 
 .backend-meta-separator {
-    color: #525252;
+    color: var(--text-quaternary);
     font-size: 0.6rem;
 }
 
@@ -2607,13 +2766,13 @@ footer {
 
 .add-model-button:hover {
     background: var(--bg-secondary);
-    border-color: #3a3a3a;
-    color: #aaa;
+    border-color: var(--border-4);
+    color: var(--text-aaa);
 }
 
 .add-model-button:focus {
     outline: none;
-    border-color: #3a3a3a;
+    border-color: var(--border-4);
 }
 
 .add-model-form {
@@ -2641,7 +2800,7 @@ footer {
 
 .form-label-secondary {
     font-size: 0.65rem;
-    color: #999;
+    color: var(--color-9);
     font-weight: 400;
     margin-top: 8px;
     margin-bottom: 4px;
@@ -2757,8 +2916,8 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .combobox-input-selected {
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    background: rgba(255, 255, 255, 0.015);
+    border: 1px solid var(--border-alpha-06);
+    background: var(--bg-alpha-02);
     color: white;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
     background-repeat: no-repeat;
@@ -2790,7 +2949,7 @@ input::-webkit-calendar-picker-indicator {
     position: absolute;
     left: 0;
     background: var(--bg-secondary);
-    border: 1px solid #444;
+    border: 1px solid var(--border-4);
     border-radius: 6px;
     z-index: 10200;
     display: flex;
@@ -2806,7 +2965,7 @@ input::-webkit-calendar-picker-indicator {
     cursor: pointer;
     overflow-y: auto;
     scrollbar-width: thin;
-    scrollbar-color: #444 transparent;
+    scrollbar-color: var(--color-4) transparent;
 }
 
 .form-datalist-top {
@@ -2828,7 +2987,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .form-datalist::-webkit-scrollbar-thumb {
-    background: #444;
+    background: var(--color-4);
     border-radius: 4px;
 }
 
@@ -2939,7 +3098,7 @@ input::-webkit-calendar-picker-indicator {
     font-family: monospace;
     font-size: 0.6rem;
     color: var(--text-secondary);
-    background: var(--bg-secondary); /*#1e1e1e;*/
+    background: var(--bg-secondary);
     padding: 1px 3px;
     border-radius: 3px;
 }
@@ -2965,26 +3124,26 @@ input::-webkit-calendar-picker-indicator {
 
 .install-button:hover {
     background: var(--bg-secondary);
-    border-color: #3a3a3a;
-    color: #aaa;
+    border-color: var(--border-4);
+    color: var(--text-aaa);
 }
 
 .install-button:focus {
     outline: none;
-    border-color: #3a3a3a;
+    border-color: var(--border-4);
 }
 
 .install-button:disabled {
     opacity: 0.6;
     cursor: not-allowed;
     border-color: var(--border-secondary);
-    color: #555;
+    color: var(--color-5);
 }
 
 .install-button:disabled:hover {
     background: transparent;
     border-color: var(--border-secondary);
-    color: #555;
+    color: var(--color-5);
 }
 
 .cancel-button {
@@ -2992,7 +3151,7 @@ input::-webkit-calendar-picker-indicator {
     padding: 5px 10px;
     background: transparent;
     border: 1px solid var(--border-secondary);
-    color: #777;
+    color: var(--color-7);
     font-size: 0.65rem;
     font-weight: 400;
     cursor: pointer;
@@ -3002,13 +3161,13 @@ input::-webkit-calendar-picker-indicator {
 
 .cancel-button:hover {
     background: var(--bg-secondary);
-    border-color: #3a3a3a;
-    color: #999;
+    border-color: var(--border-4);
+    color: var(--color-9);
 }
 
 .cancel-button:focus {
     outline: none;
-    border-color: #3a3a3a;
+    border-color: var(--border-4);
 }
 
 .cancel-button:disabled {
@@ -3019,12 +3178,11 @@ input::-webkit-calendar-picker-indicator {
 .cancel-button:disabled:hover {
     background: transparent;
     border-color: var(--border-secondary);
-    color: #777;
+    color: var(--color-7);
 }
 
-/* Chat Window Styles */
 .chat-window {
-    background: var(--bg-primary);
+    background: var(--layout-bg);
     border-left: 1px solid var(--border-tertiary);
     display: flex;
     flex-direction: column;
@@ -3085,7 +3243,7 @@ input::-webkit-calendar-picker-indicator {
 .experience-topbar-left .model-action-btn {
     pointer-events: none;
     border-radius: 999px;
-    color: #8f8f8f;
+    color: var(--text-secondary);
     opacity: 0;
     visibility: hidden;
     position: relative;
@@ -3103,7 +3261,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .experience-topbar-left .model-action-btn:hover:not(:disabled) {
-    color: #ff9800;
+    color: var(--action-color);
     background: var(--bg-alpha-06);
 }
 
@@ -3222,8 +3380,8 @@ input::-webkit-calendar-picker-indicator {
 
 .new-chat-button:hover:not(:disabled) {
     background: var(--bg-secondary);
-    border-color: #3a3a3a;
-    color: #aaa;
+    border-color: var(--border-4);
+    color: var(--text-aaa);
 }
 
 .new-chat-button:disabled {
@@ -3255,13 +3413,13 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .model-selector-trigger:hover {
-    border-color: #555;
-    color: #aaa;
+    border-color: var(--border-5);
+    color: var(--text-aaa);
 }
 
 .model-selector-trigger:focus {
     outline: none;
-    border-color: #666;
+    border-color: var(--border-6);
     color: var(--text-primary);
 }
 
@@ -3287,8 +3445,8 @@ input::-webkit-calendar-picker-indicator {
     bottom: calc(100% + 4px);
     left: 0;
     min-width: 100%;
-    background: var(--bg-secondary); /*#1e1e1e;*/
-    border: 1px solid #444;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-4);
     border-radius: 6px;
     z-index: 100;
     padding: 3px 3px 0;
@@ -3300,7 +3458,7 @@ input::-webkit-calendar-picker-indicator {
     max-height: calc(8 * 30px);
     overflow-y: auto;
     scrollbar-width: thin;
-    scrollbar-color: #444 transparent;
+    scrollbar-color: var(--color-4) transparent;
 }
 
 .model-selector-list::-webkit-scrollbar {
@@ -3312,14 +3470,14 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .model-selector-list::-webkit-scrollbar-thumb {
-    background: #444;
+    background: var(--color-4);
     border-radius: 4px;
 }
 
 .model-selector-empty {
     padding: 6px 8px;
     font-size: 0.72rem;
-    color: #555;
+    color: var(--color-5);
 }
 
 .model-selector-search-bar {
@@ -3340,7 +3498,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .model-selector-search::placeholder {
-    color: #444;
+    color: var(--color-4);
 }
 
 .model-selector-option {
@@ -3415,7 +3573,7 @@ input::-webkit-calendar-picker-indicator {
 .user-message {
     align-self: flex-end;
     background: transparent;
-    border: 1px solid #555;
+    border: 1px solid var(--border-5);
     border-radius: 12px;
     padding: 10px 14px;
     color: var(--text-primary);
@@ -3480,7 +3638,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .chat-input-wrapper:focus-within {
-    border-color: #555;
+    border-color: var(--border-5);
 }
 
 /* LLM view: soften the input area into the chat background */
@@ -3543,7 +3701,7 @@ input::-webkit-calendar-picker-indicator {
     width: var(--experience-composer-width);
     min-height: var(--experience-composer-height);
     border-radius: var(--experience-composer-radius);
-    border-color: rgba(255, 255, 255, 0.12);
+    border-color: var(--border-alpha-1);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
     background: rgba(28, 28, 28, 0.86);
     padding: var(--experience-composer-side-padding) var(--experience-composer-send-reserved-space) var(--experience-composer-side-padding) var(--experience-composer-left-padding);
@@ -3571,7 +3729,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .chat-window-experience-mode.chat-window-llm .chat-input-wrapper:focus-within {
-    border-color: rgba(255, 255, 255, 0.22);
+    border-color: var(--border-alpha-2);
     box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
 }
 
@@ -3634,7 +3792,7 @@ input::-webkit-calendar-picker-indicator {
     min-width: var(--experience-composer-media-action-size);
     min-height: var(--experience-composer-media-action-size);
     border-radius: 999px;
-    color: #9a9a9a;
+    color: var(--text-secondary);
 }
 
 .chat-window-experience-mode .image-upload-button svg {
@@ -3777,7 +3935,7 @@ input::-webkit-calendar-picker-indicator {
 
 .chat-mic-button {
     background: transparent;
-    border: 1px solid #3a3a3a;
+    border: 1px solid var(--border-4);
     border-radius: 6px;
     width: 28px;
     height: 28px;
@@ -3787,15 +3945,15 @@ input::-webkit-calendar-picker-indicator {
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    color: #8e8e8e;
+    color: var(--text-secondary);
     transition: all 0.2s ease;
     flex-shrink: 0;
 }
 
 .chat-mic-button:hover:not(:disabled):not(.recording) {
-    border-color: #575757;
-    color: #d0d0d0;
-    background: rgba(255, 255, 255, 0.04);
+    border-color: var(--border-4);
+    color: var(--text-secondary);
+    background: var(--bg-alpha-04);
 }
 
 .chat-mic-button.recording {
@@ -3809,7 +3967,6 @@ input::-webkit-calendar-picker-indicator {
     cursor: not-allowed;
 }
 
-/* Chat Stop Button */
 .chat-stop-button {
     background: var(--btn-bg-primary);
     border: none;
@@ -3844,7 +4001,6 @@ input::-webkit-calendar-picker-indicator {
     transform: scale(0.95);
 }
 
-/* Image Upload Button */
 .image-upload-button {
     background: transparent;
     border: none;
@@ -3876,7 +4032,6 @@ input::-webkit-calendar-picker-indicator {
     cursor: not-allowed;
 }
 
-/* Image Preview Container */
 .image-preview-container {
     display: flex;
     gap: 8px;
@@ -3924,7 +4079,6 @@ input::-webkit-calendar-picker-indicator {
     transform: scale(1.1);
 }
 
-/* Message Images */
 .message-image {
     max-width: 200px;
     max-height: 200px;
@@ -4115,7 +4269,7 @@ input::-webkit-calendar-picker-indicator {
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background: #666;
+    background: var(--color-6);
     animation: typing 1.4s infinite;
 }
 
@@ -4138,7 +4292,6 @@ input::-webkit-calendar-picker-indicator {
     }
 }
 
-/* Model Loading Indicator */
 .model-loading-indicator {
     display: flex;
     align-items: center;
@@ -4185,7 +4338,7 @@ input::-webkit-calendar-picker-indicator {
 
 /* Edit Message Styles */
 .user-message.editable:hover {
-    border-color: #888;
+    border-color: var(--border-8);
     background: var(--bg-alpha-02);
 }
 
@@ -4274,10 +4427,9 @@ input::-webkit-calendar-picker-indicator {
     pointer-events: none;
 }
 
-/* Thinking Section Styles */
 .thinking-section {
     margin-bottom: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--border-alpha-1);
     border-radius: 8px;
     background: var(--bg-alpha-05);
     overflow: hidden;
@@ -4289,9 +4441,9 @@ input::-webkit-calendar-picker-indicator {
     gap: 6px;
     width: 100%;
     padding: 8px 12px;
-    background: var(--thinking-toggle); /* transparent; */
+    background: var(--thinking-toggle);
     border: none;
-    color: var(--bg-alpha-7); /* rgba(255, 255, 255, 0.7); */
+    color: var(--bg-alpha-7);
     font-size: 0.85rem;
     font-weight: 500;
     cursor: pointer;
@@ -4300,7 +4452,7 @@ input::-webkit-calendar-picker-indicator {
 
 .thinking-toggle:hover {
     background: var(--bg-alpha-05);
-    color: var(--bg-alpha-9); /* rgba(255, 255, 255, 0.9); */
+    color: var(--bg-alpha-9);
 }
 
 .thinking-toggle svg {
@@ -4309,8 +4461,8 @@ input::-webkit-calendar-picker-indicator {
 
 .thinking-content {
     padding: 12px;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-    background: var(--bg-secondary-alpha-2); /* rgba(0, 0, 0, 0.2); */
+    border-top: 1px solid var(--border-alpha-1);
+    background: var(--bg-secondary-alpha-2);
     color: var(--bg-alpha-8);
     font-size: 0.85rem;
     line-height: 1.6;
@@ -4334,7 +4486,6 @@ input::-webkit-calendar-picker-indicator {
     overflow-x: auto;
 }
 
-/* Markdown Styles */
 .chat-message .markdown-content > *:first-child {
     margin-top: 0;
 }
@@ -4424,7 +4575,7 @@ input::-webkit-calendar-picker-indicator {
 .chat-message h6,
 .markdown-content h6 {
     font-size: 0.85em;
-    color: #aaa;
+    color: var(--text-aaa);
 }
 
 /* Code blocks */
@@ -4478,11 +4629,11 @@ input::-webkit-calendar-picker-indicator {
     top: 8px;
     right: 8px;
     background: var(--btn-bg-secondary);
-    border: 1px solid #555;
+    border: 1px solid var(--border-5);
     border-radius: 4px;
     padding: 3px;
     cursor: pointer;
-    color: #aaa;
+    color: var(--text-aaa);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -4498,8 +4649,8 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .code-copy-button.copied {
-    color: #4caf50;
-    border-color: #4caf50;
+    color: var(--success-color);
+    border-color: var(--success-border);
 }
 
 /* Inline code */
@@ -4512,7 +4663,7 @@ input::-webkit-calendar-picker-indicator {
     padding: 2px 6px;
     font-size: 0.85em;
     font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-    color: #ff6b6b;
+    color: var(--markdown-code);
 }
 
 /* Lists */
@@ -4563,10 +4714,10 @@ input::-webkit-calendar-picker-indicator {
 /* Blockquotes */
 .chat-message blockquote,
 .markdown-content blockquote {
-    border-left: 4px solid #555;
+    border-left: 4px solid var(--border-5);
     padding-left: 1em;
     margin: 0.8em 0;
-    color: #aaa;
+    color: var(--text-aaa);
     font-style: italic;
 }
 
@@ -4578,7 +4729,7 @@ input::-webkit-calendar-picker-indicator {
 /* Links */
 .chat-message a,
 .markdown-content a {
-    color: #4a9eff;
+    color: var(--markdown-link);
     text-decoration: none;
     border-bottom: 1px solid transparent;
     transition: border-bottom-color 0.2s ease;
@@ -4586,7 +4737,7 @@ input::-webkit-calendar-picker-indicator {
 
 .chat-message a:hover,
 .markdown-content a:hover {
-    border-bottom-color: #4a9eff;
+    border-bottom-color: var(--markdown-link);
 }
 
 /* Emphasis */
@@ -4737,7 +4888,7 @@ input::-webkit-calendar-picker-indicator {
 .chat-message .hljs-quote,
 .markdown-content .hljs-comment,
 .markdown-content .hljs-quote {
-    color: #7c7c7c;
+    color: var(--markdown-hljs-quote);
     font-style: italic;
 }
 
@@ -4749,14 +4900,14 @@ input::-webkit-calendar-picker-indicator {
 .markdown-content .hljs-selector-tag,
 .markdown-content .hljs-literal,
 .markdown-content .hljs-type {
-    color: #c792ea;
+    color: var(--markdown-hljs-type);
 }
 
 .chat-message .hljs-number,
 .chat-message .hljs-selector-id,
 .markdown-content .hljs-number,
 .markdown-content .hljs-selector-id {
-    color: #f78c6c;
+    color: var(--markdown-hljs-selector);
 }
 
 .chat-message .hljs-string,
@@ -4769,14 +4920,14 @@ input::-webkit-calendar-picker-indicator {
 .markdown-content .hljs-selector-pseudo,
 .markdown-content .hljs-template-tag,
 .markdown-content .hljs-template-variable {
-    color: #c3e88d;
+    color: var(--markdown-hljs-template-variable);
 }
 
 .chat-message .hljs-attribute,
 .chat-message .hljs-variable,
 .markdown-content .hljs-attribute,
 .markdown-content .hljs-variable {
-    color: #82aaff;
+    color: var(--markdown-hljs-variable);
 }
 
 .chat-message .hljs-built_in,
@@ -4787,48 +4938,48 @@ input::-webkit-calendar-picker-indicator {
 .markdown-content .hljs-class .hljs-title,
 .markdown-content .hljs-title.class_,
 .markdown-content .hljs-title.function_ {
-    color: #82aaff;
+    color: var(--markdown-hljs-title);
 }
 
 .chat-message .hljs-attr,
 .chat-message .hljs-property,
 .markdown-content .hljs-attr,
 .markdown-content .hljs-property {
-    color: #c792ea;
+    color: var(--markdown-hljs-property);
 }
 
 .chat-message .hljs-regexp,
 .chat-message .hljs-link,
 .markdown-content .hljs-regexp,
 .markdown-content .hljs-link {
-    color: #f07178;
+    color: var(--markdown-hljs-link);
 }
 
 .chat-message .hljs-symbol,
 .chat-message .hljs-bullet,
 .markdown-content .hljs-symbol,
 .markdown-content .hljs-bullet {
-    color: #89ddff;
+    color: var(--markdown-hljs-bullet);
 }
 
 .chat-message .hljs-meta,
 .markdown-content .hljs-meta {
-    color: #ffcb6b;
+    color: var(--markdown-hljs-meta);
 }
 
 .chat-message .hljs-tag,
 .markdown-content .hljs-tag {
-    color: #f07178;
+    color: var(--markdown-hljs-tag);
 }
 
 .chat-message .hljs-name,
 .markdown-content .hljs-name {
-    color: #f07178;
+    color: var(--markdown-hljs-name);
 }
 
 .chat-message .hljs-section,
 .markdown-content .hljs-section {
-    color: #82aaff;
+    color: var(--markdown-hljs-section);
 }
 
 .chat-message .hljs-emphasis,
@@ -4843,12 +4994,12 @@ input::-webkit-calendar-picker-indicator {
 
 .chat-message .hljs-deletion,
 .markdown-content .hljs-deletion {
-    background: rgba(255, 0, 0, 0.15);
+    background: var(--markdown-hljs-deletion)
 }
 
 .chat-message .hljs-addition,
 .markdown-content .hljs-addition {
-    background: rgba(0, 255, 0, 0.15);
+    background: var(--markdown-hljs-addition);
 }
 
 /* Horizontal Resizable Divider */
@@ -4869,7 +5020,6 @@ input::-webkit-calendar-picker-indicator {
     background: var(--bg-alpha-2)
 }
 
-/* Logs Window Styles */
 .logs-window {
     background: var(--bg-primary);
     border-top: 1px solid var(--border-tertiary);
@@ -4946,7 +5096,7 @@ input::-webkit-calendar-picker-indicator {
 
 .logs-control-btn:hover {
     background: var(--btn-bg-secondary);
-    border-color: #555;
+    border-color: var(--border-5);
 }
 
 .logs-content {
@@ -4977,7 +5127,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .logs-content::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.3);
+    background: var(--bg-alpha-3);
 }
 
 /* Firefox scrollbar support */
@@ -4987,7 +5137,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .logs-content:hover {
-    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+    scrollbar-color: var(--bg-alpha-2) transparent;
 }
 
 .logs-text {
@@ -5007,7 +5157,7 @@ input::-webkit-calendar-picker-indicator {
 
 .log-line:hover {
     background: var(--bg-alpha-02);
-    border-left-color: #555;
+    border-left-color: var(--border-5);
 }
 
 .logs-placeholder {
@@ -5019,16 +5169,15 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .logs-error {
-    color: #ff4444;
+    color: var(--error-color);
     font-size: 0.9rem;
     text-align: center;
     padding: 40px 20px;
-    background: rgba(255, 68, 68, 0.1);
+    background: var(--logs-surface);
     border-radius: 8px;
     margin: 20px;
 }
 
-/* Settings Modal Styles */
 .settings-overlay {
     position: fixed;
     top: 0;
@@ -5085,9 +5234,9 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .settings-panel .settings-section {
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--border-alpha-06);
     border-radius: 6px;
-    background: rgba(255, 255, 255, 0.015);
+    background: var(--bg-alpha-02);
     padding: 10px 10px 11px;
 }
 
@@ -5100,15 +5249,15 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .settings-panel .settings-description {
-    color: #848484;
+    color: var(--text-secondary);
 }
 
 .settings-panel .settings-field-reset {
-    color: #7f7f7f;
+    color: var(--text-secondary);
 }
 
 .settings-panel .settings-field-reset:hover:not(:disabled) {
-    color: #d8d8d8;
+    color: var(--text-secondary);
 }
 
 @keyframes fadeIn {
@@ -5201,19 +5350,19 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .settings-content::-webkit-scrollbar-track {
-    background: #252525;
+    background: var(--color-25);
     border-radius: 5px;
     margin: 4px 0;
 }
 
 .settings-content::-webkit-scrollbar-thumb {
-    background: #555;
+    background: var(--color-5);
     border-radius: 5px;
-    border: 2px solid #252525;
+    border: 2px solid var(--border-25);
 }
 
 .settings-content::-webkit-scrollbar-thumb:hover {
-    background: #666;
+    background: var(--color-6);
 }
 
 .settings-tabs-wrapper {
@@ -5239,7 +5388,7 @@ input::-webkit-calendar-picker-indicator {
     border: none;
     font-size: 0.75rem;
     font-weight: 600;
-    color: #aaa;
+    color: var(--text-aaa);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     box-sizing: border-box;
@@ -5265,7 +5414,7 @@ input::-webkit-calendar-picker-indicator {
     margin: 0;
     font-size: 0.85rem;
     font-weight: 600;
-    color: #aaa;
+    color: var(--text-aaa);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
@@ -5318,7 +5467,7 @@ input::-webkit-calendar-picker-indicator {
     flex: 1;
     height: 6px;
     border-radius: 3px;
-    background: #333;
+    background: var(--bg-slider);
     outline: none;
     appearance: none;
     -webkit-appearance: none;
@@ -5374,7 +5523,7 @@ input::-webkit-calendar-picker-indicator {
 
 .settings-number-input:focus, .settings-text-input:focus {
     outline: none;
-    border-color: #555;
+    border-color: var(--border-5);
     background: var(--bg-secondary);
 }
 
@@ -5412,7 +5561,7 @@ input::-webkit-calendar-picker-indicator {
 .settings-loading {
     padding: 48px 24px;
     text-align: center;
-    color: #aaa;
+    color: var(--text-aaa);
     font-size: 0.85rem;
 }
 
@@ -5439,7 +5588,7 @@ input::-webkit-calendar-picker-indicator {
 
 .settings-reset-button:hover {
     background: var(--bg-secondary);
-    border-color: #555;
+    border-color: var(--border-5);
     color: var(--text-primary);
 }
 
@@ -5499,18 +5648,18 @@ input::-webkit-calendar-picker-indicator {
     text-align: left;
     padding: 8px 10px;
     background: var(--bg-primary);
-    border: 1px solid #2f2f2f;
+    border: 1px solid var(--border-secondary);
     border-radius: 6px;
-    color: #d6d6d6;
+    color: var(--text-tertiary);
     font-size: 0.72rem;
     cursor: pointer;
     transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
 }
 
 .settings-link-button:hover {
-    border-color: #4a4a4a;
+    border-color: var(--border-4);
     color: var(--text-primary);
-    background: #121212;
+    background: var(--bg-tertiary);
 }
 
 .settings-help-actions {
@@ -5521,7 +5670,7 @@ input::-webkit-calendar-picker-indicator {
 
 .settings-help-about {
     background: var(--bg-primary);
-    border: 1px solid #2d2d2d;
+    border: 1px solid var(--border-secondary);
     border-radius: 6px;
     padding: 8px 10px;
 }
@@ -5535,14 +5684,14 @@ input::-webkit-calendar-picker-indicator {
 
 .settings-help-about-key {
     font-size: 0.66rem;
-    color: #9a9a9a;
+    color: var(--text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.45px;
 }
 
 .settings-help-about-value {
     font-size: 0.72rem;
-    color: #ececec;
+    color: var(--text-tertiary);
 }
 
 .settings-help-shortcuts {
@@ -5557,26 +5706,25 @@ input::-webkit-calendar-picker-indicator {
     justify-content: space-between;
     gap: 10px;
     font-size: 0.72rem;
-    color: #cdcdcd;
+    color: var(--text-tertiary);
 }
 
 .settings-help-shortcut-row code {
     font-size: 0.66rem;
-    color: #a8a8a8;
+    color: var(--text-secondary);
     background: var(--bg-primary);
     border: 1px solid var(--border-secondary);
     border-radius: 5px;
     padding: 2px 6px;
 }
 
-/* About Popover */
 .about-popover {
     position: fixed;
     top: 48px;
     right: 20px;
     width: 320px;
     background: var(--bg-tertiary);
-    border: 1px solid #272727;
+    border: 1px solid var(--border-25);
     border-radius: 14px;
     box-shadow: 0 18px 55px rgba(0, 0, 0, 0.8);
     padding: 18px 20px 20px;
@@ -5613,7 +5761,7 @@ input::-webkit-calendar-picker-indicator {
 .about-popover-subtitle {
     margin: 2px 0 0;
     font-size: 0.8rem;
-    color: #a0a0a0;
+    color: var(--text-secondary);
 }
 
 .about-popover-close {
@@ -5642,7 +5790,7 @@ input::-webkit-calendar-picker-indicator {
     justify-content: space-between;
     align-items: center;
     background: var(--bg-alpha-03);
-    border: 1px solid #2b2b2b;
+    border: 1px solid var(--border-secondary);
     border-radius: 10px;
     padding: 10px 12px;
     font-family: 'JetBrains Mono', 'Courier New', monospace;
@@ -5653,7 +5801,7 @@ input::-webkit-calendar-picker-indicator {
 .about-popover-version span:first-child {
     letter-spacing: 0.08em;
     font-size: 0.65rem;
-    color: #9f9f9f;
+    color: var(--text-secondary);
     text-transform: uppercase;
 }
 
@@ -5662,7 +5810,7 @@ input::-webkit-calendar-picker-indicator {
     flex-direction: column;
     gap: 6px;
     background: var(--bg-alpha-03);
-    border: 1px solid #2b2b2b;
+    border: 1px solid var(--border-secondary);
     border-radius: 10px;
     padding: 10px 12px;
     margin-top: 10px;
@@ -5673,7 +5821,7 @@ input::-webkit-calendar-picker-indicator {
 .about-popover-info-label {
     letter-spacing: 0.08em;
     font-size: 0.65rem;
-    color: #9f9f9f;
+    color: var(--text-secondary);
     text-transform: uppercase;
 }
 
@@ -5683,7 +5831,6 @@ input::-webkit-calendar-picker-indicator {
     line-height: 1.3;
 }
 
-/* Toast Notification Styles */
 .toast-container {
     position: fixed;
     bottom: 24px;
@@ -5770,44 +5917,42 @@ input::-webkit-calendar-picker-indicator {
     background: var(--bg-alpha-1)
 }
 
-/* Toast Types */
 .toast-error {
-    border-color: rgba(239, 68, 68, 0.4);
-    background: linear-gradient(135deg, #1a1a1a 0%, #1f1517 100%);
+    border-color: var(--toast-error-border);
+    background: var(--toast-error-surface);
 }
 
 .toast-error .toast-icon {
-    color: #ef4444;
+    color: var(--toast-error-text);
 }
 
 .toast-success {
-    border-color: rgba(34, 197, 94, 0.4);
-    background: linear-gradient(135deg, #1a1a1a 0%, #151f17 100%);
+    border-color: var(--toast-success-border);
+    background: var(--toast-success-surface);
 }
 
 .toast-success .toast-icon {
-    color: #22c55e;
+    color: var(--toast-success-text);
 }
 
 .toast-warning {
-    border-color: rgba(234, 179, 8, 0.4);
-    background: linear-gradient(135deg, #1a1a1a 0%, #1f1d15 100%);
+    border-color: var(--toast-warning-border);
+    background: var(--toast-warning-surface);
 }
 
 .toast-warning .toast-icon {
-    color: #eab308;
+    color: var(--toast-warning-text);
 }
 
 .toast-info {
-    border-color: rgba(59, 130, 246, 0.4);
-    background: linear-gradient(135deg, #1a1a1a 0%, #151a1f 100%);
+    border-color: var(--toast-info-border);
+    background: var(--toast-info-surface);
 }
 
 .toast-info .toast-icon {
-    color: #3b82f6;
+    color: var(--toast-info-text);
 }
 
-/* Confirmation Dialog Styles */
 .confirm-dialog-overlay {
     position: fixed;
     top: 0;
@@ -5823,7 +5968,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .confirm-dialog {
-    background: #1a1a1a;
+    background: var(--bg-secondary);
     border: 1px solid var(--border-primary);
     border-radius: 12px;
     padding: 24px;
@@ -5843,7 +5988,7 @@ input::-webkit-calendar-picker-indicator {
 .confirm-dialog-message {
     margin: 0 0 20px 0;
     font-size: 0.9rem;
-    color: #aaa;
+    color: var(--text-aaa);
     line-height: 1.5;
 }
 
@@ -5869,8 +6014,8 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .confirm-dialog-btn-cancel:hover {
-    background: #252525;
-    border-color: #444;
+    background: var(--color-25);
+    border-color: var(--border-4);
     color: var(--text-primary);
 }
 
@@ -5885,16 +6030,15 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .confirm-dialog-btn-danger {
-    background: #ef4444;
+    background: var(--error-color);
     border: none;
     color: var(--text-primary);
 }
 
 .confirm-dialog-btn-danger:hover {
-    background: #dc2626;
+    background: var(--error-hover);
 }
 
-/* Download Manager Styles */
 .download-manager-overlay {
     position: fixed;
     top: 32px;
@@ -5947,7 +6091,7 @@ input::-webkit-calendar-picker-indicator {
     margin: 0;
     font-size: 0.8rem;
     font-weight: 600;
-    color: #aaa;
+    color: var(--text-aaa);
     letter-spacing: 0.5px;
     flex-shrink: 0;
 }
@@ -6004,19 +6148,19 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .download-manager-content::-webkit-scrollbar-track {
-    background: #252525;
+    background: var(--color-25);
     border-radius: 5px;
     margin: 4px 0;
 }
 
 .download-manager-content::-webkit-scrollbar-thumb {
-    background: #555;
+    background: var(--color-5);
     border-radius: 5px;
-    border: 2px solid #252525;
+    border: 2px solid var(--border-25);
 }
 
 .download-manager-content::-webkit-scrollbar-thumb:hover {
-    background: #666;
+    background: var(--color-6);
 }
 
 .download-manager-empty {
@@ -6042,7 +6186,7 @@ input::-webkit-calendar-picker-indicator {
 
 .download-manager-empty-hint {
     font-size: 0.75rem;
-    color: #555;
+    color: var(--color-5);
     text-align: center;
     max-width: 300px;
 }
@@ -6112,7 +6256,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .download-expand-btn:hover {
-    color: #999;
+    color: var(--color-9);
     background: var(--bg-alpha-05);
 }
 
@@ -6173,7 +6317,7 @@ input::-webkit-calendar-picker-indicator {
 
 .download-action-btn:hover:not(:disabled) {
     background: var(--bg-alpha-08);
-    color: #999;
+    color: var(--color-9);
 }
 
 .download-action-btn:disabled {
@@ -6182,7 +6326,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .download-action-btn.cancel-btn:hover {
-    color: #ef4444;
+    color: var(--error-hover);
 }
 
 .download-action-btn.remove-btn:hover {
@@ -6240,7 +6384,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .download-detail-value {
-    color: #aaa;
+    color: var(--text-aaa);
     word-break: break-all;
     text-align: right;
     max-width: 60%;
@@ -6256,7 +6400,7 @@ input::-webkit-calendar-picker-indicator {
 
 .clear-completed-btn {
     background: transparent;
-    border: 1px solid #444;
+    border: 1px solid var(--border-4);
     color: var(--text-secondary);
     padding: 6px 12px;
     border-radius: 6px;
@@ -6268,8 +6412,8 @@ input::-webkit-calendar-picker-indicator {
 
 .clear-completed-btn:hover {
     background: var(--bg-alpha-05);
-    color: #aaa;
-    border-color: #555;
+    color: var(--text-aaa);
+    border-color: var(--border-5);
 }
 
 /* Download button active state in title bar */
@@ -6356,7 +6500,7 @@ input::-webkit-calendar-picker-indicator {
     background: var(--bg-alpha-03);
     padding: 3px 6px;
     border-radius: 3px;
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--bg-alpha-06);
 }
 
 .embedding-vector {
@@ -6373,7 +6517,7 @@ input::-webkit-calendar-picker-indicator {
     margin: 0;
     font-family: 'Courier New', monospace;
     font-size: 0.65rem;
-    color: #aaa;
+    color: var(--text-aaa);
     line-height: 1.3;
 }
 
@@ -6381,7 +6525,7 @@ input::-webkit-calendar-picker-indicator {
     margin: 0;
     font-family: 'Courier New', monospace;
     font-size: 0.65rem;
-    color: #aaa;
+    color: var(--text-aaa);
     line-height: 1.3;
 }
 
@@ -6478,7 +6622,7 @@ input::-webkit-calendar-picker-indicator {
     background: var(--bg-alpha-03);
     padding: 3px 6px;
     border-radius: 3px;
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--border-alpha-06);
 }
 
 .reranking-input-wrapper {
@@ -6497,7 +6641,7 @@ input::-webkit-calendar-picker-indicator {
 .reranking-label {
     font-size: 0.7rem;
     font-weight: 600;
-    color: #aaa;
+    color: var(--text-aaa);
     text-transform: uppercase;
     letter-spacing: 0.3px;
 }
@@ -6529,7 +6673,7 @@ input::-webkit-calendar-picker-indicator {
 
 .reranked-document:hover {
     border-color: var(--border-primary);
-    background: rgba(255, 255, 255, 0.04);
+    background: var(--bg-alpha-04);
 }
 
 .reranked-rank {
@@ -6602,7 +6746,7 @@ input::-webkit-calendar-picker-indicator {
     align-items: center;
     font-size: 0.75rem;
     font-weight: 500;
-    color: #aaa;
+    color: var(--text-aaa);
 }
 
 .transcription-result-container {
@@ -6677,7 +6821,7 @@ input::-webkit-calendar-picker-indicator {
 .audio-file-button {
     background: none;
     border: none;
-    color: #aaa;
+    color: var(--text-aaa);
     cursor: pointer;
     padding: 8px;
     display: flex;
@@ -6697,7 +6841,6 @@ input::-webkit-calendar-picker-indicator {
     cursor: not-allowed;
 }
 
-/* Image Generation */
 .image-generation-item {
     margin-bottom: 24px;
     padding: 16px;
@@ -6719,7 +6862,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .prompt-text {
-    color: #aaa;
+    color: var(--text-aaa);
 }
 
 .generated-images-row {
@@ -6771,7 +6914,7 @@ input::-webkit-calendar-picker-indicator {
     gap: 4px;
     background: var(--bg-secondary-alpha-7);
     color: var(--text-primary);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid var(--border-alpha-2);
     padding: 5px 8px;
     border-radius: 6px;
     cursor: pointer;
@@ -6794,7 +6937,7 @@ input::-webkit-calendar-picker-indicator {
     align-self: stretch;
     min-height: 200px;
     background: var(--bg-tertiary);
-    border: 1px dashed #444;
+    border: 1px dashed var(--border-4);
     border-radius: 8px;
     color: var(--text-secondary);
     font-size: 13px;
@@ -6812,7 +6955,7 @@ input::-webkit-calendar-picker-indicator {
     width: 20px;
     height: 20px;
     border: 2px solid var(--border-primary);
-    border-top-color: #888;
+    border-top-color: var(--border-8);
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }
@@ -6823,7 +6966,6 @@ input::-webkit-calendar-picker-indicator {
     }
 }
 
-/* Image Settings Panel */
 .image-settings-panel {
     display: flex;
     flex-wrap: wrap;
@@ -6874,7 +7016,7 @@ input::-webkit-calendar-picker-indicator {
 .image-setting input:focus,
 .image-setting select:focus {
     outline: none;
-    border-color: #555;
+    border-color: var(--border-5);
 }
 
 .image-setting input:disabled,
@@ -6920,7 +7062,7 @@ input::-webkit-calendar-picker-indicator {
     align-items: center;
     gap: 8px;
     padding: 12px 16px;
-    border: 1px dashed #444;
+    border: 1px dashed var(--border-4);
     border-radius: 8px;
     color: var(--text-secondary);
     font-size: 13px;
@@ -6930,7 +7072,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .image-reference-dropzone:hover {
-    border-color: #666;
+    border-color: var(--border-6);
     color: var(--text-tertiary);
 }
 
@@ -6938,7 +7080,6 @@ input::-webkit-calendar-picker-indicator {
    Streaming Transcription Styles
    ======================================== */
 
-/* Mic Button */
 .mic-button {
     display: flex;
     align-items: center;
@@ -6954,14 +7095,14 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .mic-button:hover:not(:disabled):not(.recording) {
-    border-color: #555;
+    border-color: var(--border-5);
     color: var(--text-tertiary);
 }
 
 .mic-button.recording {
     background: rgba(244, 67, 54, 0.15);
-    border-color: #f44336;
-    color: #f44336;
+    border-color: var(--error-color);
+    color: var(--error-color);
     animation: mic-pulse 1.5s ease-in-out infinite;
 }
 
@@ -7006,7 +7147,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .live-status .dot.connecting {
-    background-color: #ff9800;
+    background-color: var(--action-color);
 }
 
 .live-status .dot.speaking {
@@ -7015,7 +7156,7 @@ input::-webkit-calendar-picker-indicator {
 
 .live-status .level-meter {
     height: 6px;
-    background-color: #121212;
+    background-color: var(--bg-tertiary);
     border-radius: 3px;
     overflow: hidden;
     min-width: 80px;
@@ -7029,18 +7170,16 @@ input::-webkit-calendar-picker-indicator {
     transition: width 0.08s ease-out;
 }
 
-/* Transcription Error */
 .transcription-error {
     padding: 8px 12px;
     margin: 0 16px 8px;
-    background-color: rgba(244, 67, 54, 0.1);
-    border: 1px solid rgba(244, 67, 54, 0.3);
+    background-color: var(--error-background-color);
+    border: 1px solid var(--error-border);
     border-radius: 4px;
-    color: #f44336;
+    color: var(--error-color);
     font-size: 13px;
 }
 
-/* Status Bar Styles */
 .status-bar {
     display: flex;
     align-items: center;
@@ -7061,7 +7200,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .status-bar-label {
-    color: #555;
+    color: var(--color-5);
     font-size: 11px;
 }
 
@@ -7082,16 +7221,16 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .connection-indicator.connection-connected {
-    color: #4ade80; /* Green */
+    color: #4ade80;
 }
 
 .connection-indicator.connection-connecting {
-    color: #fbbf24; /* Yellow */
+    color: #fbbf24;
     animation: pulse 2s ease-in-out infinite;
 }
 
 .connection-indicator.connection-disconnected {
-    color: #ef4444; /* Red */
+    color: var(--error-color);
 }
 
 @keyframes pulse {
@@ -7132,8 +7271,8 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .launcher-card {
-    background: rgba(255, 255, 255, 0.015);
-    border: 1px solid rgba(255, 255, 255, 0.07);
+    background: var(--bg-alpha-02);
+    border: 1px solid var(--border-alpha-07);
     border-radius: 12px;
     padding: 11px;
     width: 100%;
@@ -7143,7 +7282,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .launcher-card:hover {
-    border-color: rgba(255, 255, 255, 0.15);
+    border-color: var(--border-alpha-15);
     background: var(--bg-alpha-03);
     transform: translateY(-1px);
 }
@@ -7164,7 +7303,7 @@ input::-webkit-calendar-picker-indicator {
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    color: rgba(255, 255, 255, 0.67);
+    color: var(--bg-alpha-07);
     font-size: 0.7rem;
     letter-spacing: 0.07em;
     text-transform: uppercase;
@@ -7175,8 +7314,8 @@ input::-webkit-calendar-picker-indicator {
     font-size: 0.66rem;
     padding: 2px 7px;
     border-radius: 999px;
-    border: 1px solid rgba(255, 255, 255, 0.11);
-    color: rgba(255, 255, 255, 0.55);
+    border: 1px solid var(--border-alpha-1);
+    color: var(--bg-alpha-6);
     background: var(--bg-alpha-02);
     line-height: 1.2;
     white-space: nowrap;
@@ -7185,7 +7324,7 @@ input::-webkit-calendar-picker-indicator {
 .launcher-card-title {
     margin: 8px 0 4px;
     font-size: clamp(0.82rem, 1.5vw, 0.94rem);
-    color: #f8f8f8;
+    color: var(--text-primary);
     letter-spacing: 0.005em;
     font-weight: 600;
 }
@@ -7194,7 +7333,7 @@ input::-webkit-calendar-picker-indicator {
     margin: 0;
     font-size: clamp(0.68rem, 1.15vw, 0.75rem);
     line-height: 1.45;
-    color: rgba(255, 255, 255, 0.52);
+    color: var(--bg-alpha-5);
     min-height: 2.2em;
 }
 
@@ -7215,7 +7354,7 @@ input::-webkit-calendar-picker-indicator {
 .logo-wall {
     margin-top: 11px;
     padding-top: 10px;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid var(--border-alpha-06);
     pointer-events: none;
 }
 
@@ -7225,7 +7364,7 @@ input::-webkit-calendar-picker-indicator {
     font-size: 0.63rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
-    color: rgba(255, 255, 255, 0.46);
+    color: var(--bg-alpha-4);
     font-weight: 600;
 }
 
@@ -7261,7 +7400,7 @@ input::-webkit-calendar-picker-indicator {
     height: clamp(22px, 3.2vw, 25px);
     border-radius: 6px;
     object-fit: cover;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border-alpha-05);
     box-shadow: none;
     filter: saturate(0.88);
     opacity: 0.9;
@@ -7346,7 +7485,7 @@ input::-webkit-calendar-picker-indicator {
     gap: 4px;
     margin-top: 11px;
     padding-top: 10px;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid var(--border-alpha-06);
     min-height: 0;
     pointer-events: none;
 }
@@ -7355,13 +7494,13 @@ input::-webkit-calendar-picker-indicator {
     font-size: 0.62rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
-    color: rgba(255, 255, 255, 0.42);
+    color: var(--bg-alpha-4);
     font-weight: 600;
 }
 
 .backend-preview-summary {
     margin: 0;
-    color: rgba(255, 255, 255, 0.58);
+    color: var(--bg-alpha-6);
     font-size: clamp(0.65rem, 1.1vw, 0.72rem);
     line-height: 1.4;
     white-space: normal;
@@ -7375,7 +7514,6 @@ input::-webkit-calendar-picker-indicator {
 }
 
 
-/* Backend Manager Component */
 .backend-manager {
     display: flex;
     flex-direction: column;
@@ -7383,14 +7521,13 @@ input::-webkit-calendar-picker-indicator {
     overflow-y: auto;
     padding: 10px 12px 12px;
     container-type: inline-size;
-    background: radial-gradient(110% 65% at 50% 0%, rgba(252, 204, 21, 0.02) 0%, rgba(252, 204, 21, 0) 60%),
-    linear-gradient(180deg, rgba(10, 10, 13, 0.84) 0%, rgba(7, 7, 10, 0.9) 100%);
+    background: var(--backend-manager-surface);
 }
 
 .backend-manager-header {
     margin-bottom: 8px;
     padding: 2px 2px 7px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
+    border-bottom: 1px solid var(--border-alpha-05);
 }
 
 .backend-manager-header-top {
@@ -7405,9 +7542,9 @@ input::-webkit-calendar-picker-indicator {
     justify-content: center;
     width: 24px;
     height: 24px;
-    border: 1px solid rgba(255, 255, 255, 0.11);
-    background: rgba(255, 255, 255, 0.04);
-    color: #9e9e9e;
+    border: 1px solid var(--border-alpha-1);
+    background: var(--bg-alpha-04);
+    color: var(--text-secondary);
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.15s ease;
@@ -7416,14 +7553,14 @@ input::-webkit-calendar-picker-indicator {
 
 .backend-manager-back-btn:hover {
     color: var(--text-primary);
-    background: rgba(255, 255, 255, 0.11);
-    border-color: rgba(255, 255, 255, 0.2);
+    background: var(--bg-alpha-1);
+    border-color: var(--border-alpha-2);
 }
 
 .backend-manager-header h3 {
     margin: 0;
     font-size: 0.82rem;
-    color: #a8a8a8;
+    color: var(--text-secondary);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.07em;
@@ -7431,7 +7568,7 @@ input::-webkit-calendar-picker-indicator {
 
 .backend-manager-header p {
     font-size: 0.73rem;
-    color: #858585;
+    color: var(--text-secondary);
     margin: 0;
 }
 
@@ -7458,9 +7595,9 @@ input::-webkit-calendar-picker-indicator {
     gap: 6px;
     min-width: 0;
     padding: 9px;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border-alpha-05);
     border-radius: 9px;
-    background: rgba(255, 255, 255, 0.01);
+    background: var(--bg-alpha-01);
     height: 100%;
 }
 
@@ -7481,20 +7618,20 @@ input::-webkit-calendar-picker-indicator {
     align-items: flex-start;
     gap: 3px;
     padding: 2px 0 3px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid var(--border-alpha-05);
 }
 
 .backend-recipe-title {
     font-size: 0.8rem;
     font-weight: 600;
-    color: #d0d0d0;
+    color: var(--text-secondary);
     margin: 0;
     flex-shrink: 0;
 }
 
 .backend-recipe-desc {
     font-size: 0.67rem;
-    color: #777;
+    color: var(--color-7);
     line-height: 1.2;
     white-space: nowrap;
     overflow: hidden;
@@ -7513,19 +7650,19 @@ input::-webkit-calendar-picker-indicator {
     align-items: center;
     justify-content: space-between;
     padding: 7px 8px;
-    background: rgba(255, 255, 255, 0.013);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--bg-alpha-01);
+    border: 1px solid var(--border-alpha-05);
     border-radius: 7px;
     transition: background 0.15s ease, border-color 0.15s ease;
 }
 
 .backend-card:hover {
     background: var(--bg-alpha-03);
-    border-color: rgba(255, 255, 255, 0.085);
+    border-color: var(--border-alpha-08);
 }
 
 .backend-card.installed {
-    border-color: rgba(255, 255, 255, 0.08);
+    border-color: var(--border-alpha-08);
 }
 
 .backend-card-info {
@@ -7545,11 +7682,11 @@ input::-webkit-calendar-picker-indicator {
 
 .backend-card-name {
     font-weight: 600;
-    color: #e3e3e3;
+    color: var(--text-tertiary);
 }
 
 .backend-card-separator {
-    color: #4f4f4f;
+    color: var(--text-secondary);
     font-size: 0.6rem;
 }
 
@@ -7565,7 +7702,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .backend-status-dot.not-installed {
-    background: #444;
+    background: var(--color-4);
 }
 
 .backend-card-desc {
@@ -7573,13 +7710,13 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .backend-version {
-    color: #6e6e6e;
+    color: var(--text-secondary);
     font-size: 0.6rem;
     line-height: 1.2;
 }
 
 .backend-version-link {
-    color: #75abd7;
+    color: var(--text-link);
     text-decoration: none;
     cursor: pointer;
     font-size: 0.6rem;
@@ -7594,12 +7731,12 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .backend-version-link:hover {
-    color: #96c5e9;
+    color: var(--text-link-hover);
     text-decoration: none;
 }
 
 .backend-size {
-    color: #626262;
+    color: var(--text-secondary);
     font-size: 0.6rem;
     line-height: 1.2;
 }
@@ -7623,13 +7760,13 @@ input::-webkit-calendar-picker-indicator {
     transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
     background: transparent;
     border: 1px solid transparent;
-    color: #999;
+    color: var(--color-9);
 }
 
 .backend-action-btn:hover {
-    background: rgba(255, 255, 255, 0.07);
+    background: var(--bg-alpha-07);
     color: var(--text-primary);
-    border-color: rgba(255, 255, 255, 0.12);
+    border-color: var(--border-alpha-1);
 }
 
 .backend-action-btn.install {