diff --git a/packages/client/src/styles/code-block.scss b/packages/client/src/styles/code-block.scss
index a5d6c38..9e07d76 100644
--- a/packages/client/src/styles/code-block.scss
+++ b/packages/client/src/styles/code-block.scss
@@ -3,6 +3,11 @@
 // Shared code-block styles used by markdown rendering and tool payload details.
 // Keep these global so v-html output in both MarkdownRenderer.vue and MessageItem.vue
 // stays styled even though the HTML is not compiled as Vue template content.
+//
+// CYBER is a single dark theme, so there is no light variant: one rule set,
+// one palette. Syntax colors stay inside the established semantic set — cyan for
+// structure, green for strings, amber for literals, red for types, muted for
+// comments — so a code block never competes with the neon accent for attention.
 
 .hljs-code-block {
   margin: 8px 0;
@@ -21,13 +26,14 @@
     justify-content: space-between;
     align-items: center;
     padding: 6px 12px;
-    background: rgba(0, 0, 0, 0.03);
-    border-bottom: 1px solid $border-color;
+    background: $bg-card;
+    border-bottom: 1px solid var(--border-light);
 
     .code-lang {
       font-size: 11px;
-      color: $text-muted;
+      color: $accent-primary;
       text-transform: uppercase;
+      letter-spacing: 0.08em;
     }
 
     .copy-btn {
@@ -38,11 +44,11 @@
       cursor: pointer;
       padding: 2px 6px;
       border-radius: 3px;
-      transition: all $transition-fast;
+      transition: color $transition-fast, background-color $transition-fast;
 
       &:hover {
-        color: $text-primary;
-        background: rgba(0, 0, 0, 0.05);
+        color: $accent-primary;
+        background: rgba(var(--accent-primary-rgb), 0.1);
       }
     }
   }
@@ -81,9 +87,9 @@
       user-select: none;
       text-align: right;
       padding: 0 14px 0 10px;
-      color: #94a3b8;
-      background: rgba(15, 23, 42, 0.04);
-      border-right: 1px solid rgba(148, 163, 184, 0.25);
+      color: var(--text-faint);
+      background: rgba(0, 0, 0, 0.22);
+      border-right: 1px solid var(--border-light);
     }
 
     .diff-line-content {
@@ -92,54 +98,54 @@
     }
 
     .diff-line-file-header {
-      color: #475569;
-      background: rgba(148, 163, 184, 0.16);
+      color: $text-secondary;
+      background: rgba(var(--accent-info-rgb), 0.16);
     }
 
     .diff-line-hunk-header {
-      color: #1d4ed8;
-      background: rgba(59, 130, 246, 0.12);
+      color: $accent-primary;
+      background: rgba(var(--accent-primary-rgb), 0.12);
     }
 
     .diff-line-context-fold {
-      color: #64748b;
-      background: rgba(148, 163, 184, 0.1);
+      color: var(--text-faint);
+      background: rgba(255, 255, 255, 0.05);
       font-style: italic;
     }
 
     .diff-line-added {
-      color: #166534;
-      background: rgba(34, 197, 94, 0.14);
+      color: $success;
+      background: rgba(var(--success-rgb), 0.14);
 
       .diff-line-number {
-        color: #15803d;
-        background: rgba(34, 197, 94, 0.18);
+        color: $success;
+        background: rgba(var(--success-rgb), 0.2);
       }
     }
 
     .diff-line-removed {
-      color: #b91c1c;
-      background: rgba(239, 68, 68, 0.12);
+      color: $error;
+      background: rgba(var(--error-rgb), 0.14);
 
       .diff-line-number {
-        color: #dc2626;
-        background: rgba(239, 68, 68, 0.18);
+        color: $error;
+        background: rgba(var(--error-rgb), 0.2);
       }
     }
   }
 }
 
-// highlight.js theme override — higher-contrast, still calm
+// ─── highlight.js token colors ───────────────────────────────────────────
 .hljs-code-block {
   .hljs {
-    color: #1f2937;
+    color: $text-primary;
     background: none;
   }
 
   .hljs-keyword,
   .hljs-selector-tag,
   .hljs-meta .hljs-keyword {
-    color: #7c3aed;
+    color: $accent-primary;
     font-weight: 600;
   }
 
@@ -147,144 +153,43 @@
   .hljs-attr,
   .hljs-regexp,
   .hljs-template-variable {
-    color: #0f766e;
+    color: $success;
   }
 
   .hljs-number,
   .hljs-literal,
   .hljs-symbol,
   .hljs-bullet {
-    color: #b45309;
+    color: $warning;
   }
 
   .hljs-comment,
   .hljs-quote {
-    color: #6b7280;
+    color: var(--text-faint);
     font-style: italic;
   }
 
   .hljs-built_in,
   .hljs-title.class_,
   .hljs-title.function_ {
-    color: #2563eb;
+    color: $info;
   }
 
   .hljs-type,
   .hljs-variable,
   .hljs-property,
   .hljs-params {
-    color: #b91c1c;
+    color: $error;
   }
 
   .hljs-tag,
   .hljs-name,
   .hljs-section,
   .hljs-title {
-    color: #1f2937;
+    color: $text-primary;
   }
 
   .hljs-meta {
-    color: #6b7280;
-  }
-}
-
-// Dark mode highlight.js — clearer separation without neon
-.dark .hljs-code-block {
-  .hljs {
-    color: #e5e7eb;
-  }
-
-  &.hljs-unified-diff {
-    .diff-line-file-header {
-      color: #cbd5e1;
-      background: rgba(148, 163, 184, 0.18);
-    }
-
-    .diff-line-number {
-      color: #94a3b8;
-      background: rgba(15, 23, 42, 0.28);
-      border-right-color: rgba(148, 163, 184, 0.22);
-    }
-
-    .diff-line-hunk-header {
-      color: #93c5fd;
-      background: rgba(59, 130, 246, 0.18);
-    }
-
-    .diff-line-context-fold {
-      color: #cbd5e1;
-      background: rgba(148, 163, 184, 0.14);
-    }
-
-    .diff-line-added {
-      color: #86efac;
-      background: rgba(34, 197, 94, 0.18);
-
-      .diff-line-number {
-        color: #4ade80;
-        background: rgba(34, 197, 94, 0.22);
-      }
-    }
-
-    .diff-line-removed {
-      color: #fca5a5;
-      background: rgba(239, 68, 68, 0.18);
-
-      .diff-line-number {
-        color: #f87171;
-        background: rgba(239, 68, 68, 0.22);
-      }
-    }
-  }
-
-  .hljs-keyword,
-  .hljs-selector-tag,
-  .hljs-meta .hljs-keyword {
-    color: #c084fc;
-    font-weight: 600;
-  }
-
-  .hljs-string,
-  .hljs-attr,
-  .hljs-regexp,
-  .hljs-template-variable {
-    color: #5eead4;
-  }
-
-  .hljs-number,
-  .hljs-literal,
-  .hljs-symbol,
-  .hljs-bullet {
-    color: #fbbf24;
-  }
-
-  .hljs-comment,
-  .hljs-quote {
-    color: #94a3b8;
-    font-style: italic;
-  }
-
-  .hljs-built_in,
-  .hljs-title.class_,
-  .hljs-title.function_ {
-    color: #93c5fd;
-  }
-
-  .hljs-type,
-  .hljs-variable,
-  .hljs-property,
-  .hljs-params {
-    color: #fca5a5;
-  }
-
-  .hljs-tag,
-  .hljs-name,
-  .hljs-section,
-  .hljs-title {
-    color: #f3f4f6;
-  }
-
-  .hljs-meta {
-    color: #94a3b8;
+    color: var(--text-muted);
   }
 }