diff --git a/frontend/src/index.css b/frontend/src/index.css
index 06749d8b..2fb1f923 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -8,14 +8,15 @@
 @import '@xyflow/react/dist/style.css';
 
 @theme {
-  /* ── Surface colors (Charcoal — sidebar darkest) ─ */
-  --color-bg-page: #1a1c23;
-  --color-bg-sidebar: #10121a;
-  --color-bg-card: #22252e;
-  --color-bg-card-hover: #282b35;
-  --color-bg-input: #282b35;
-  --color-bg-code: #14161e;
-  --color-bg-elevated: #2e3140;
+  /* ── Surface colors (Deep Charcoal — sidebar darkest) ─ */
+  --color-bg-page: #16181f;
+  --color-bg-sidebar: #0e1016;
+  --color-bg-card: #1e2028;
+  --color-bg-card-hover: #252830;
+  --color-bg-input: #252830;
+  --color-bg-code: #12141a;
+  --color-bg-elevated: #2a2d38;
+  --color-bg-raised: #303442;
 
   /* ── Text colors ───────────────────────────────── */
   --color-text-heading: #f0f2f5;
@@ -25,43 +26,45 @@
   --color-text-rail-label: #e2e5eb;
 
   /* ── Border colors ─────────────────────────────── */
-  --color-border-default: #2e3240;
+  --color-border-default: #2a2e3a;
   --color-border-hover: #3d4252;
 
-  /* ── Accent (ember orange) ─────────────────────── */
-  --color-accent: #f97316;
-  --color-accent-hover: #ea580c;
-  --color-accent-dim: rgba(249,115,22,0.10);
-  --color-accent-text: #fdba74;
+  /* ── Accent (electric blue) ───────────────────────── */
+  --color-accent: #60a5fa;
+  --color-accent-hover: #3b82f6;
+  --color-accent-dim: rgba(96,165,250,0.10);
+  --color-accent-text: #93c5fd;
 
   /* ── Semantic colors ───────────────────────────── */
   --color-success: #34d399;
   --color-success-dim: rgba(52,211,153,0.10);
-  --color-warning: #eab308;
-  --color-warning-dim: rgba(234,179,8,0.10);
+  --color-warning: #fbbf24;
+  --color-warning-dim: rgba(251,191,36,0.10);
   --color-danger: #f87171;
   --color-danger-dim: rgba(248,113,113,0.10);
+  --color-info: #67e8f9;
+  --color-info-dim: rgba(103,232,249,0.10);
 
   /* ── Tailwind semantic mappings ─────────────────── */
-  --color-background: #1a1c23;
+  --color-background: #16181f;
   --color-foreground: #e2e5eb;
-  --color-card: #22252e;
+  --color-card: #1e2028;
   --color-card-foreground: #e2e5eb;
-  --color-popover: #22252e;
+  --color-popover: #1e2028;
   --color-popover-foreground: #e2e5eb;
-  --color-primary: #f97316;
+  --color-primary: #60a5fa;
   --color-primary-foreground: #ffffff;
-  --color-secondary: #2e3140;
+  --color-secondary: #2a2d38;
   --color-secondary-foreground: #e2e5eb;
-  --color-muted: #2e3140;
+  --color-muted: #2a2d38;
   --color-muted-foreground: #848b9b;
-  --color-accent-tw: #2e3140;
+  --color-accent-tw: #2a2d38;
   --color-accent-foreground: #e2e5eb;
   --color-destructive: #f87171;
   --color-destructive-foreground: #ffffff;
-  --color-border: #2e3240;
-  --color-input: #282b35;
-  --color-ring: #f97316;
+  --color-border: #2a2e3a;
+  --color-input: #252830;
+  --color-ring: #60a5fa;
 
   /* ── Radii ─────────────────────────────────────── */
   --radius-sm: 5px;
@@ -191,11 +194,11 @@
   transition: filter 150ms ease, box-shadow 150ms ease, transform 150ms ease;
   &:hover {
     filter: brightness(1.1);
-    box-shadow: 0 2px 10px rgba(249, 115, 22, 0.2);
+    box-shadow: 0 2px 10px rgba(96, 165, 250, 0.2);
     transform: translateY(-1px);
   }
   &:active {
-    box-shadow: 0 0 4px rgba(249, 115, 22, 0.1);
+    box-shadow: 0 0 4px rgba(96, 165, 250, 0.1);
     transform: translateY(0);
   }
 }
@@ -226,7 +229,7 @@
 /* Tab/toggle group: active item gets elevated surface + faint accent glow */
 @utility tab-active-shadow {
   background: var(--color-bg-elevated);
-  box-shadow: 0 1px 4px rgba(249, 115, 22, 0.08);
+  box-shadow: 0 1px 4px rgba(96, 165, 250, 0.08);
 }
 
 /* Card hover lift — brighter border + subtle accent glow */
@@ -234,7 +237,7 @@
   transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
   &:hover {
     border-color: var(--color-border-hover);
-    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.06);
+    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.06);
     transform: translateY(-2px);
   }
   &:active {