diff --git a/webclient/src/components/artifacts/ArtifactsPanel.vue b/webclient/src/components/artifacts/ArtifactsPanel.vue
index dd0ffc8..b87dba4 100644
--- a/webclient/src/components/artifacts/ArtifactsPanel.vue
+++ b/webclient/src/components/artifacts/ArtifactsPanel.vue
@@ -1047,8 +1047,8 @@
   max-width: var(--artifacts-width, min(600px, 42vw));
   display: flex;
   flex-direction: column;
-  background: #16161E;
-  border-left: 2px solid rgba(192, 202, 245, 0.24);
+  background: var(--gn-color-black);
+  border-left: 2px solid var(--gn-border-color-muted);
   min-height: 0;
   margin-right: calc(-1 * var(--artifacts-width, min(600px, 42vw)));
   opacity: 0;
@@ -1096,7 +1096,7 @@
 
 .artifacts-resize-handle:hover::after,
 .artifacts-panel.is-resizing .artifacts-resize-handle::after {
-  background: #FF9E64;
+  background: var(--gn-color-accent);
 }
 
 .artifacts-header {
@@ -1106,7 +1106,7 @@
   justify-content: space-between;
   gap: 12px;
   padding: 0 15px;
-  border-bottom: 2px solid rgba(192, 202, 245, 0.24);
+  border-bottom: 2px solid var(--gn-border-color-muted);
 }
 
 .artifacts-empty {
@@ -1116,7 +1116,7 @@
   align-items: center;
   justify-content: center;
   gap: 8px;
-  color: #787C99;
+  color: var(--gn-color-text-dark);
   font-size: 13px;
 }
 
@@ -1139,9 +1139,9 @@
   min-height: 46px;
   padding: 12px 15px;
   border: 0;
-  border-right: 2px solid rgba(192, 202, 245, 0.08);
+  border-right: 2px solid color-mix(in srgb, var(--gn-color-text-light) 8%, transparent);
   background: transparent;
-  color: #A9B1D6;
+  color: var(--gn-color-text-medium);
   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
@@ -1151,13 +1151,13 @@
 }
 
 .artifacts-tab:hover {
-  background: #7AA2F7;
-  color: #16161E;
+  background: var(--gn-color-secondary);
+  color: var(--gn-color-black);
 }
 
 .artifacts-tab.is-active {
-  background: #C0CAF5;
-  color: #16161E;
+  background: var(--gn-color-text-light);
+  color: var(--gn-color-black);
 }
 
 .artifacts-tab-count {
@@ -1167,21 +1167,21 @@
   min-width: 18px;
   height: 18px;
   padding: 0 5px;
-  background: #1F2335;
-  color: #787C99;
+  background: var(--gn-surface-panel);
+  color: var(--gn-color-text-dark);
   font-size: 11px;
   font-weight: 600;
 }
 
 .artifacts-tab.is-active .artifacts-tab-count {
   background: rgba(22, 22, 30, 0.2);
-  color: #16161E;
+  color: var(--gn-color-black);
 }
 
 .artifacts-list {
   max-height: calc(58px * 4);
   overflow-y: auto;
-  border-bottom: 2px solid rgba(192, 202, 245, 0.24);
+  border-bottom: 2px solid var(--gn-border-color-muted);
 }
 
 .artifact-item {
@@ -1192,22 +1192,22 @@
   gap: 10px;
   padding: 8px 12px;
   border: 2px solid transparent;
-  background: rgba(192, 202, 245, 0.045);
-  color: #C0CAF5;
+  background: color-mix(in srgb, var(--gn-color-text-light) 5%, transparent);
+  color: var(--gn-color-text-light);
   text-align: left;
   cursor: pointer;
   transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
 }
 
 .artifact-item:hover {
-  background: #7AA2F7;
-  color: #16161E;
+  background: var(--gn-color-secondary);
+  color: var(--gn-color-black);
 }
 
 .artifact-item.is-active {
-  border-color: #7AA2F7;
-  background: #7AA2F7;
-  color: #16161E;
+  border-color: var(--gn-color-secondary);
+  background: var(--gn-color-secondary);
+  color: var(--gn-color-black);
 }
 
 .artifact-icon {
@@ -1216,13 +1216,13 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #FF9E64;
-  background: rgba(192, 202, 245, 0.085);
+  color: var(--gn-color-accent);
+  background: var(--gn-surface-panel-strong);
 }
 
 .artifact-item:hover .artifact-icon,
 .artifact-item.is-active .artifact-icon {
-  color: #16161E;
+  color: var(--gn-color-black);
   background: rgba(22, 22, 30, 0.12);
 }
 
@@ -1249,7 +1249,7 @@
 
 .artifact-meta {
   font-size: 11px;
-  color: #787C99;
+  color: var(--gn-color-text-dark);
 }
 
 .artifact-item:hover .artifact-meta,
@@ -1271,13 +1271,13 @@
 .artifact-detail-title {
   font-size: 14px;
   font-weight: 600;
-  color: #C0CAF5;
+  color: var(--gn-color-text-light);
 }
 
 .artifact-detail-filename {
   margin-top: 3px;
   font-size: 12px;
-  color: #787C99;
+  color: var(--gn-color-text-dark);
 }
 
 .artifact-actions {
@@ -1292,24 +1292,24 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 2px solid rgba(192, 202, 245, 0.24);
-  background: #1F2335;
-  color: #C0CAF5;
+  border: 2px solid var(--gn-border-color-muted);
+  background: var(--gn-surface-panel);
+  color: var(--gn-color-text-light);
   text-decoration: none;
   cursor: pointer;
   transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
 }
 
 .artifact-action:hover {
-  background: #7AA2F7;
-  border-color: #7AA2F7;
-  color: #16161E;
+  background: var(--gn-color-secondary);
+  border-color: var(--gn-color-secondary);
+  color: var(--gn-color-black);
 }
 
 .artifact-preview {
   flex: 1;
   min-height: 0;
-  border-top: 2px solid rgba(192, 202, 245, 0.24);
+  border-top: 2px solid var(--gn-border-color-muted);
   background: #0f0f14;
 }
 
@@ -1341,11 +1341,11 @@
   font-family: "IBM Plex Mono", monospace;
   font-size: 12px;
   line-height: 1.6;
-  color: #C0CAF5;
+  color: var(--gn-color-text-light);
 }
 
 .artifact-source-error {
-  color: #F7768E;
+  color: var(--gn-color-error);
 }
 
 .artifact-source-state {
@@ -1353,7 +1353,7 @@
   align-items: center;
   gap: 8px;
   padding: 14px;
-  color: #787C99;
+  color: var(--gn-color-text-dark);
   font-size: 12px;
 }
 
@@ -1365,7 +1365,7 @@
   align-items: center;
   justify-content: center;
   gap: 8px;
-  color: #787C99;
+  color: var(--gn-color-text-dark);
   font-size: 13px;
 }
 
@@ -1384,17 +1384,17 @@
 }
 
 .link-item .artifact-title {
-  color: #FF9E64;
+  color: var(--gn-color-accent);
 }
 
 .link-item:hover .artifact-title,
 .link-item.is-active .artifact-title {
-  color: #16161E;
+  color: var(--gn-color-black);
 }
 
 .link-detail {
   padding: 12px 15px;
-  border-top: 2px solid rgba(192, 202, 245, 0.24);
+  border-top: 2px solid var(--gn-border-color-muted);
 }
 
 .link-detail-header {
@@ -1403,7 +1403,7 @@
 
 .link-detail-count {
   font-size: 12px;
-  color: #787C99;
+  color: var(--gn-color-text-dark);
 }
 
 .link-actions {
@@ -1426,7 +1426,7 @@
 }
 
 .file-item.is-dir .artifact-title {
-  color: #A9B1D6;
+  color: var(--gn-color-text-medium);
 }
 
 .file-row-actions {
@@ -1509,18 +1509,18 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 2px solid rgba(192, 202, 245, 0.24);
-  background: #1F2335;
-  color: #C0CAF5;
+  border: 2px solid var(--gn-border-color-muted);
+  background: var(--gn-surface-panel);
+  color: var(--gn-color-text-light);
   font-size: 14px;
   cursor: pointer;
   transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
 }
 
 .files-refresh-btn:hover {
-  background: #7AA2F7;
-  border-color: #7AA2F7;
-  color: #16161E;
+  background: var(--gn-color-secondary);
+  border-color: var(--gn-color-secondary);
+  color: var(--gn-color-black);
 }
 
 .files-refresh-btn:disabled {
@@ -1555,7 +1555,7 @@
   gap: 8px;
   padding: 8px;
   font-size: 12px;
-  color: var(--color-text-dark, #787c99);
+  color: var(--gn-color-text-dark);
   pointer-events: none;
   transition: opacity 0.15s, transform 0.15s;
   will-change: transform, opacity;
@@ -1605,21 +1605,21 @@
    the detail grid's value text, where a filled background would render the
    text invisible (teal text on teal background). */
 .terminal-status-badge.status-busy {
-  background: #73DACA;
-  color: #16161E;
-  border-color: #73DACA;
+  background: var(--gn-color-success);
+  color: var(--gn-color-black);
+  border-color: var(--gn-color-success);
 }
 
 .terminal-status-badge.status-idle {
-  background: #7AA2F7;
-  color: #16161E;
-  border-color: #7AA2F7;
+  background: var(--gn-color-secondary);
+  color: var(--gn-color-black);
+  border-color: var(--gn-color-secondary);
 }
 
 .terminal-status-badge.status-closed {
-  background: #F7768E;
-  color: #16161E;
-  border-color: #F7768E;
+  background: var(--gn-color-error);
+  color: var(--gn-color-black);
+  border-color: var(--gn-color-error);
 }
 
 .terminal-detail {
@@ -1627,7 +1627,7 @@
   min-height: 0;
   display: flex;
   flex-direction: column;
-  border-top: 2px solid rgba(192, 202, 245, 0.24);
+  border-top: 2px solid var(--gn-border-color-muted);
   overflow-y: auto;
 }
 
@@ -1644,14 +1644,14 @@
 }
 
 .artifacts-tab-count.has-running {
-  background: #73DACA;
-  color: #16161E;
+  background: var(--gn-color-success);
+  color: var(--gn-color-black);
 }
 
 .terminal-detail-title {
   font-size: 14px;
   font-weight: 600;
-  color: #C0CAF5;
+  color: var(--gn-color-text-light);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1664,24 +1664,24 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  border: 2px solid rgba(192, 202, 245, 0.24);
-  background: #1F2335;
-  color: #C0CAF5;
+  border: 2px solid var(--gn-border-color-muted);
+  background: var(--gn-surface-panel);
+  color: var(--gn-color-text-light);
   font-size: 14px;
   cursor: pointer;
   transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
 }
 
 .terminal-detail-close:hover {
-  background: #7AA2F7;
-  border-color: #7AA2F7;
-  color: #16161E;
+  background: var(--gn-color-secondary);
+  border-color: var(--gn-color-secondary);
+  color: var(--gn-color-black);
 }
 
 .terminal-detail-meta {
   margin-top: 3px;
   font-size: 12px;
-  color: #787C99;
+  color: var(--gn-color-text-dark);
   word-break: break-word;
   line-height: 1.5;
 }
@@ -1691,7 +1691,7 @@
   flex-direction: column;
   gap: 6px;
   padding: 0 15px 12px;
-  border-bottom: 2px solid rgba(192, 202, 245, 0.12);
+  border-bottom: 2px solid color-mix(in srgb, var(--gn-color-text-light) 12%, transparent);
 }
 
 .terminal-detail-row {
@@ -1703,34 +1703,34 @@
 }
 
 .terminal-detail-label {
-  color: #787C99;
+  color: var(--gn-color-text-dark);
   flex-shrink: 0;
 }
 
 .terminal-detail-value {
-  color: #C0CAF5;
+  color: var(--gn-color-text-light);
   text-align: right;
   word-break: break-all;
 }
 
 /* Status colours inside detail rows — must be after .terminal-detail-value
-   so their color overrides the default #C0CAF5. */
+   so their color overrides the default var(--gn-color-text-light). */
 .terminal-detail-value.status-busy {
-  color: #73DACA;
+  color: var(--gn-color-success);
 }
 
 .terminal-detail-value.status-idle {
-  color: #7AA2F7;
+  color: var(--gn-color-secondary);
 }
 
 .terminal-detail-value.status-closed {
-  color: #F7768E;
+  color: var(--gn-color-error);
 }
 
 .terminal-detail-command {
   font-family: "IBM Plex Mono", monospace;
   font-size: 11px;
-  color: #FF9E64;
+  color: var(--gn-color-accent);
 }
 
 .terminal-output-wrap {
@@ -1747,8 +1747,8 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: #787C99;
-  border-bottom: 2px solid rgba(192, 202, 245, 0.12);
+  color: var(--gn-color-text-dark);
+  border-bottom: 2px solid color-mix(in srgb, var(--gn-color-text-light) 12%, transparent);
 }
 
 .terminal-output {
@@ -1761,6 +1761,6 @@
   font-family: "IBM Plex Mono", monospace;
   font-size: 12px;
   line-height: 1.6;
-  color: #C0CAF5;
+  color: var(--gn-color-text-light);
 }
 </style>
diff --git a/webclient/src/components/chat/ChatArea.vue b/webclient/src/components/chat/ChatArea.vue
index 92e1214..f5f978c 100644
--- a/webclient/src/components/chat/ChatArea.vue
+++ b/webclient/src/components/chat/ChatArea.vue
@@ -64,9 +64,9 @@
   align-items: center;
   gap: 8px;
   padding: 6px 16px;
-  background: rgba(224, 175, 104, 0.1);
-  border-bottom: 1px solid rgba(224, 175, 104, 0.3);
+  background: color-mix(in srgb, var(--gn-color-warning) 10%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--gn-color-warning) 30%, transparent);
   font-size: 13px;
-  color: var(--color-warning, #e0af68);
+  color: var(--gn-color-warning);
 }
 </style>
diff --git a/webclient/src/components/chat/ChatHeader.vue b/webclient/src/components/chat/ChatHeader.vue
index bac1f39..936bc33 100644
--- a/webclient/src/components/chat/ChatHeader.vue
+++ b/webclient/src/components/chat/ChatHeader.vue
@@ -95,8 +95,8 @@
   padding: 0 4px;
   font-size: 10px;
   line-height: 1;
-  background: var(--accent, #4ec9b0);
-  color: #11111b;
+  background: var(--gn-color-secondary);
+  color: var(--gn-color-black);
 }
 
 .recall-banner {
@@ -104,14 +104,14 @@
   align-items: center;
   gap: 8px;
   padding: 6px 12px;
-  background: rgba(var(--color-accent-rgb, 122, 162, 247), 0.12);
-  border-bottom: 1px solid var(--color-border, #3b4261);
+  background: color-mix(in srgb, var(--gn-color-secondary) 12%, transparent);
+  border-bottom: 1px solid var(--gn-border-color-muted);
   font-size: 12px;
-  color: var(--color-text, #a9b1d6);
+  color: var(--gn-color-text-medium);
 }
 
 .recall-banner i {
-  color: var(--color-accent, #7aa2f7);
+  color: var(--gn-color-secondary);
   font-size: 14px;
 }
 
@@ -125,7 +125,7 @@
 .recall-btn {
   background: none;
   border: none;
-  color: var(--color-text-dark, #787c99);
+  color: var(--gn-color-text-dark);
   cursor: pointer;
   padding: 2px 4px;
   font-size: 14px;
@@ -135,7 +135,7 @@
 }
 
 .recall-btn:hover {
-  color: var(--color-text, #a9b1d6);
-  background: rgba(255,255,255,0.06);
+  color: var(--gn-color-text-medium);
+  background: color-mix(in srgb, var(--gn-color-text-light) 6%, transparent);
 }
 </style>
diff --git a/webclient/src/components/chat/FilePreviewStrip.vue b/webclient/src/components/chat/FilePreviewStrip.vue
index 1adcaa2..fcfde25 100644
--- a/webclient/src/components/chat/FilePreviewStrip.vue
+++ b/webclient/src/components/chat/FilePreviewStrip.vue
@@ -52,8 +52,8 @@
     position: absolute;
     top: -4px;
     right: -4px;
-    background: var(--surface-panel, #1f2335);
-    border: 1px solid var(--border-color-muted);
+    background: var(--gn-surface-panel);
+    border: 1px solid var(--gn-border-color-muted);
     width: 18px;
     height: 18px;
     display: flex;
@@ -61,9 +61,9 @@
     justify-content: center;
     font-size: 10px;
     cursor: pointer;
-    color: var(--color-text-dark);
+    color: var(--gn-color-text-dark);
 
-    &:hover { color: var(--color-error); }
+    &:hover { color: var(--gn-color-error); }
   }
 }
 
@@ -71,7 +71,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-text-medium, #8b95c7);
+  color: var(--gn-color-text-medium);
 
   .ph-spin {
     animation: spin 0.9s linear infinite;
diff --git a/webclient/src/components/chat/InputBar.vue b/webclient/src/components/chat/InputBar.vue
index 9e58efc..d947dc4 100644
--- a/webclient/src/components/chat/InputBar.vue
+++ b/webclient/src/components/chat/InputBar.vue
@@ -203,7 +203,7 @@
   gap: 6px;
   padding: 4px 8px;
   font-size: 12px;
-  color: var(--color-warning, #e0af68);
+  color: var(--gn-color-warning);
   margin-bottom: 4px;
 }
 
@@ -213,7 +213,7 @@
   gap: 6px;
   padding: 4px 8px;
   font-size: 12px;
-  color: var(--color-text-medium, #8b95c7);
+  color: var(--gn-color-text-medium);
   margin-bottom: 4px;
 
   .ph-spin {
diff --git a/webclient/src/components/chat/MessageList.vue b/webclient/src/components/chat/MessageList.vue
index aa9e7a2..51eb6e1 100644
--- a/webclient/src/components/chat/MessageList.vue
+++ b/webclient/src/components/chat/MessageList.vue
@@ -322,7 +322,7 @@
   align-items: center;
   justify-content: center;
   font-size: 26px;
-  color: var(--color-text-medium, #8b95c7);
+  color: var(--gn-color-text-medium);
   pointer-events: none;
 
   .animate-spin {
@@ -346,8 +346,8 @@
   gap: 8px;
   padding: 8px;
   font-size: 13px;
-  color: var(--color-fg-muted, #a9b1d6);
-  background: var(--color-bg-primary, transparent);
+  color: var(--gn-color-text-medium);
+  background: transparent;
   pointer-events: none;
 }
 
@@ -367,8 +367,8 @@
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: var(--color-secondary, #7aa2f7);
-  color: var(--color-black, #1a1b2e);
+  background: var(--gn-color-secondary);
+  color: var(--gn-color-black);
   border: none;
   cursor: pointer;
   display: flex;
diff --git a/webclient/src/components/chat/QueuedMessagesChip.vue b/webclient/src/components/chat/QueuedMessagesChip.vue
index b7fe4c5..6a7fdbe 100644
--- a/webclient/src/components/chat/QueuedMessagesChip.vue
+++ b/webclient/src/components/chat/QueuedMessagesChip.vue
@@ -34,18 +34,18 @@
   gap: 6px;
   padding: 3px 10px;
   border-radius: 999px;
-  border: 1px solid var(--border-color-muted, rgba(128, 128, 128, 0.25));
-  background: var(--surface-panel-muted, rgba(128, 128, 128, 0.08));
+  border: 1px solid var(--gn-border-color-muted);
+  background: var(--gn-surface-panel-muted);
   font-size: 12px;
-  color: var(--color-text-medium, #999);
+  color: var(--gn-color-text-medium);
 
-  i { color: var(--color-primary, #7aa2f7); }
+  i { color: var(--gn-color-secondary); }
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
 
-  &.queued i { color: var(--color-primary, #7aa2f7); }
+  &.queued i { color: var(--gn-color-secondary); }
 }
 
 .fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
diff --git a/webclient/src/components/messages/AssistantMessage.vue b/webclient/src/components/messages/AssistantMessage.vue
index 9d01f83..4260e21 100644
--- a/webclient/src/components/messages/AssistantMessage.vue
+++ b/webclient/src/components/messages/AssistantMessage.vue
@@ -271,6 +271,6 @@
 .msg-rate-btn:hover { opacity: 1; }
 .msg-rate-btn.active {
   opacity: 1;
-  color: var(--accent, #4ec9b0);
+  color: var(--gn-color-secondary);
 }
 </style>
diff --git a/webclient/src/components/messages/CompressionNotice.vue b/webclient/src/components/messages/CompressionNotice.vue
index ac64473..7a7ef06 100644
--- a/webclient/src/components/messages/CompressionNotice.vue
+++ b/webclient/src/components/messages/CompressionNotice.vue
@@ -28,8 +28,8 @@
   gap: 8px;
   padding: 8px 12px;
   border-radius: 8px;
-  background: var(--color-bg-tertiary, #2a2b3d);
-  color: var(--color-text-muted, #8b8fa3);
+  background: var(--gn-surface-panel-strong);
+  color: var(--gn-color-text-dark);
   font-size: 13px;
 }
 .compression-pending i {
diff --git a/webclient/src/components/messages/ContentCard.vue b/webclient/src/components/messages/ContentCard.vue
index c3b24a7..a6d7db2 100644
--- a/webclient/src/components/messages/ContentCard.vue
+++ b/webclient/src/components/messages/ContentCard.vue
@@ -317,8 +317,8 @@
 <style scoped>
 .content-card {
   margin: 8px 0;
-  background: var(--surface, #1e1e2e);
-  border: 1px solid var(--border, #2a2a3e);
+  background: var(--gn-surface-panel);
+  border: 1px solid var(--gn-border-color-muted);
   overflow: hidden;
 }
 
@@ -345,7 +345,7 @@
   flex: 1;
   font-size: 0.9em;
   font-weight: 500;
-  color: var(--text, #cdd6f4);
+  color: var(--gn-color-text-light);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -355,8 +355,8 @@
   font-size: 0.7em;
   text-transform: uppercase;
   padding: 2px 8px;
-  background: var(--accent-muted, #313244);
-  color: var(--accent, #4ec9b0);
+  background: color-mix(in srgb, var(--gn-color-secondary) 14%, var(--gn-surface-panel));
+  color: var(--gn-color-secondary);
 }
 
 .content-actions {
@@ -372,22 +372,22 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--border, #2a2a3e);
-  background: var(--surface-elevated, #242438);
-  color: var(--text, #cdd6f4);
+  border: 1px solid var(--gn-border-color-muted);
+  background: color-mix(in srgb, var(--gn-color-grey) 12%, var(--gn-surface-panel));
+  color: var(--gn-color-text-light);
   text-decoration: none;
   cursor: pointer;
 }
 
 .content-actions a:hover,
 .content-actions button:hover {
-  color: var(--accent, #4ec9b0);
-  border-color: var(--accent, #4ec9b0);
+  color: var(--gn-color-secondary);
+  border-color: var(--gn-color-secondary);
 }
 
 .content-chevron {
   transition: transform 0.2s;
-  color: var(--text-muted, #6c7086);
+  color: var(--gn-color-text-dark);
 }
 
 .content-card[open] .content-chevron {
@@ -395,7 +395,7 @@
 }
 
 .content-body {
-  border-top: 1px solid var(--border, #2a2a3e);
+  border-top: 1px solid var(--gn-border-color-muted);
   overflow: auto;
 }
 
@@ -425,7 +425,7 @@
   object-fit: contain;
   cursor: zoom-in;
   display: block;
-  background: var(--surface, #1e1e2e);
+  background: var(--gn-surface-panel);
 }
 
 .content-image-skeleton {
@@ -434,9 +434,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--surface-elevated, #242438);
-  border-bottom: 1px solid var(--border, #2a2a3e);
-  color: var(--text-muted, #6c7086);
+  background: color-mix(in srgb, var(--gn-color-grey) 12%, var(--gn-surface-panel));
+  border-bottom: 1px solid var(--gn-border-color-muted);
+  color: var(--gn-color-text-dark);
 }
 
 .content-image-spinner {
@@ -452,13 +452,13 @@
   width: 100%;
   max-height: 60vh;
   display: block;
-  background: var(--surface, #1e1e2e);
+  background: var(--gn-surface-panel);
 }
 
 .content-source {
   max-height: 500px;
   overflow: auto;
-  background: #11111b;
+  background: var(--gn-color-black);
 }
 
 .content-source-code,
@@ -469,11 +469,11 @@
   font-family: "IBM Plex Mono", monospace;
   font-size: 12px;
   line-height: 1.6;
-  color: var(--text, #cdd6f4);
+  color: var(--gn-color-text-light);
 }
 
 .content-source-error {
-  color: var(--error, #f7768e);
+  color: var(--gn-color-error);
 }
 
 .content-source-state {
@@ -481,14 +481,14 @@
   align-items: center;
   gap: 8px;
   padding: 14px;
-  color: var(--text-muted, #6c7086);
+  color: var(--gn-color-text-dark);
   font-size: 12px;
 }
 
 .content-unknown {
   padding: 24px;
   text-align: center;
-  color: var(--text-muted, #6c7086);
+  color: var(--gn-color-text-dark);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -503,7 +503,7 @@
 .unknown-name {
   font-size: 0.95em;
   font-weight: 500;
-  color: var(--text, #cdd6f4);
+  color: var(--gn-color-text-light);
   word-break: break-word;
   max-width: 100%;
 }
@@ -513,8 +513,8 @@
   margin-top: 4px;
   padding: 6px 14px;
   border-radius: 0;
-  background: var(--accent-muted, #313244);
-  color: var(--accent, #4ec9b0);
+  background: color-mix(in srgb, var(--gn-color-secondary) 14%, var(--gn-surface-panel));
+  color: var(--gn-color-secondary);
   text-decoration: none;
   font-size: 0.85em;
   font-weight: 500;
@@ -522,14 +522,14 @@
 }
 
 .unknown-open:hover {
-  background: var(--border, #2a2a3e);
+  background: var(--gn-border-color-muted);
 }
 
 /* Type-specific accents */
-.content-card.is-stl .content-badge { color: #f5c2e7; }
-.content-card.is-html .content-badge { color: #89b4fa; }
-.content-card.is-svg .content-badge { color: #a6e3a1; }
-.content-card.is-pdf .content-badge { color: #fab387; }
+.content-card.is-stl .content-badge { color: var(--gn-color-info); }
+.content-card.is-html .content-badge { color: var(--gn-color-secondary); }
+.content-card.is-svg .content-badge { color: var(--gn-color-success); }
+.content-card.is-pdf .content-badge { color: var(--gn-color-accent); }
 .content-card.is-image .content-badge { color: #89dceb; }
-.content-card.is-video .content-badge { color: #f38ba8; }
+.content-card.is-video .content-badge { color: var(--gn-color-error); }
 </style>
diff --git a/webclient/src/components/messages/UiComponentCard.vue b/webclient/src/components/messages/UiComponentCard.vue
index 39c6ac2..92ca978 100644
--- a/webclient/src/components/messages/UiComponentCard.vue
+++ b/webclient/src/components/messages/UiComponentCard.vue
@@ -38,8 +38,8 @@
 <style scoped>
 .ui-component-card {
   margin: 8px 0;
-  background: var(--surface, #1e1e2e);
-  border: 1px solid var(--border, #2a2a3e);
+  background: var(--gn-surface-panel);
+  border: 1px solid var(--gn-border-color-muted);
   overflow: hidden;
 }
 
@@ -48,7 +48,7 @@
   align-items: center;
   gap: 8px;
   padding: 10px 14px;
-  border-bottom: 1px solid var(--border, #2a2a3e);
+  border-bottom: 1px solid var(--gn-border-color-muted);
   user-select: none;
 }
 
@@ -61,7 +61,7 @@
   flex: 1;
   font-size: 0.9em;
   font-weight: 500;
-  color: var(--text, #cdd6f4);
+  color: var(--gn-color-text-light);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -71,8 +71,8 @@
   font-size: 0.7em;
   text-transform: uppercase;
   padding: 2px 8px;
-  background: var(--accent-muted, #313244);
-  color: var(--accent, #4ec9b0);
+  background: color-mix(in srgb, var(--gn-color-secondary) 14%, var(--gn-surface-panel));
+  color: var(--gn-color-secondary);
 }
 
 .ui-component-body {
@@ -80,7 +80,7 @@
 }
 
 .ui-component-fallback {
-  color: var(--text-muted, #6c7086);
+  color: var(--gn-color-text-dark);
 }
 
 .ui-component-fallback-title {
diff --git a/webclient/src/components/settings/ApiKeysPanel.vue b/webclient/src/components/settings/ApiKeysPanel.vue
index c01328a..968113c 100644
--- a/webclient/src/components/settings/ApiKeysPanel.vue
+++ b/webclient/src/components/settings/ApiKeysPanel.vue
@@ -140,20 +140,20 @@
   font-size: 1.1rem;
   font-weight: 600;
   margin: 0;
-  color: var(--color-text, #a9b1d6);
+  color: var(--gn-color-text-medium);
 }
 
 .api-keys-description {
   margin: 0 0 16px;
   font-size: 0.875rem;
-  color: var(--color-text-secondary, #a9b1d6);
+  color: var(--gn-color-text-medium);
 }
 
 .api-keys-loading,
 .api-keys-empty {
   padding: 24px;
   text-align: center;
-  color: var(--color-text-dark, #787c99);
+  color: var(--gn-color-text-dark);
   font-size: 0.9rem;
 }
 
@@ -163,13 +163,13 @@
   gap: 8px;
   padding: 12px;
   margin-bottom: 16px;
-  border: 1px solid var(--color-warning, #e0af68);
+  border: 1px solid var(--gn-color-warning);
   border-radius: 8px;
-  color: var(--color-text-secondary, #a9b1d6);
+  color: var(--gn-color-text-medium);
   font-size: 0.875rem;
 
   i {
-    color: var(--color-warning, #e0af68);
+    color: var(--gn-color-warning);
     font-size: 16px;
     flex-shrink: 0;
   }
@@ -182,27 +182,27 @@
   align-items: center;
   padding: 10px 12px;
   font-size: 0.875rem;
-  border-bottom: 1px solid var(--color-border, #3b4261);
+  border-bottom: 1px solid var(--gn-border-color-muted);
 }
 
 .api-keys-header-row {
   font-weight: 600;
-  color: var(--color-text-secondary, #a9b1d6);
+  color: var(--gn-color-text-medium);
   border-bottom-width: 2px;
 }
 
 .col-name {
-  color: var(--color-text, #a9b1d6);
+  color: var(--gn-color-text-medium);
 }
 
 .col-prefix {
   font-family: monospace;
-  color: var(--color-text-secondary, #a9b1d6);
+  color: var(--gn-color-text-medium);
 }
 
 .col-created,
 .col-last-used {
-  color: var(--color-text-dark, #787c99);
+  color: var(--gn-color-text-dark);
 }
 
 .col-actions {
diff --git a/webclient/src/components/settings/NotificationSettingsPanel.vue b/webclient/src/components/settings/NotificationSettingsPanel.vue
index feccd58..d0ac9f8 100644
--- a/webclient/src/components/settings/NotificationSettingsPanel.vue
+++ b/webclient/src/components/settings/NotificationSettingsPanel.vue
@@ -74,13 +74,13 @@
   font-size: 1.1rem;
   font-weight: 600;
   margin: 0 0 12px;
-  color: var(--color-text, #a9b1d6);
+  color: var(--gn-color-text-medium);
 }
 
 .notifications-description {
   margin: 0 0 16px;
   font-size: 0.875rem;
-  color: var(--color-text-secondary, #a9b1d6);
+  color: var(--gn-color-text-medium);
 }
 
 .notifications-unsupported {
@@ -88,9 +88,9 @@
   align-items: flex-start;
   gap: 8px;
   padding: 12px;
-  border: 1px solid var(--color-border, #3b4261);
+  border: 1px solid var(--gn-border-color-muted);
   border-radius: 8px;
-  color: var(--color-text-dark, #787c99);
+  color: var(--gn-color-text-dark);
   font-size: 0.875rem;
 
   i {
@@ -105,18 +105,18 @@
   justify-content: space-between;
   gap: 16px;
   padding: 14px 16px;
-  border: 1px solid var(--color-border, #3b4261);
+  border: 1px solid var(--gn-border-color-muted);
   border-radius: 8px;
 }
 
 .notifications-row-title {
   font-size: 0.9rem;
-  color: var(--color-text, #a9b1d6);
+  color: var(--gn-color-text-medium);
 }
 
 .notifications-row-status {
   font-size: 0.8rem;
-  color: var(--color-text-dark, #787c99);
+  color: var(--gn-color-text-dark);
   margin-top: 2px;
 }
 </style>
\ No newline at end of file
diff --git a/webclient/src/components/settings/SettingsView.vue b/webclient/src/components/settings/SettingsView.vue
index b6eb541..1ad3184 100644
--- a/webclient/src/components/settings/SettingsView.vue
+++ b/webclient/src/components/settings/SettingsView.vue
@@ -36,8 +36,8 @@
   align-items: center;
   gap: 12px;
   padding: 16px 20px;
-  border-bottom: 1px solid var(--color-border, #3b4261);
-  background: var(--surface-panel, #1f2335);
+  border-bottom: 1px solid var(--gn-border-color-muted);
+  background: var(--gn-surface-panel);
 }
 
 .settings-sidebar-toggle {
@@ -51,7 +51,7 @@
   font-size: 1.25rem;
   font-weight: 600;
   margin: 0;
-  color: var(--color-text, #a9b1d6);
+  color: var(--gn-color-text-medium);
 }
 
 .settings-body {
diff --git a/webclient/src/components/settings/ShowTokenModal.vue b/webclient/src/components/settings/ShowTokenModal.vue
index e40ba29..a16baaa 100644
--- a/webclient/src/components/settings/ShowTokenModal.vue
+++ b/webclient/src/components/settings/ShowTokenModal.vue
@@ -48,7 +48,7 @@
 .show-token-warning {
   margin: 0 0 16px;
   font-size: 0.875rem;
-  color: var(--color-warning, #e0af68);
+  color: var(--gn-color-warning);
   display: flex;
   align-items: center;
   gap: 6px;
@@ -63,8 +63,8 @@
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
-  background: var(--surface-panel, #1f2335);
-  border: 1px solid var(--color-border, #3b4261);
+  background: var(--gn-surface-panel);
+  border: 1px solid var(--gn-border-color-muted);
   border-radius: 6px;
 }
 
@@ -73,6 +73,6 @@
   font-family: monospace;
   font-size: 0.85rem;
   word-break: break-all;
-  color: var(--color-text, #a9b1d6);
+  color: var(--gn-color-text-medium);
 }
 </style>
diff --git a/webclient/src/components/sidebar/AppSidebar.vue b/webclient/src/components/sidebar/AppSidebar.vue
index 4a3ea5d..0b8df60 100644
--- a/webclient/src/components/sidebar/AppSidebar.vue
+++ b/webclient/src/components/sidebar/AppSidebar.vue
@@ -297,7 +297,7 @@
   display: block;
   padding-top: $space-sm;
   padding-bottom: $space-sm;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--gn-border-color-muted);
 }
 
 .sidebar-search-inner {
@@ -357,12 +357,12 @@
 
 .recall-filter-btn.active,
 .recall-filter-btn:hover {
-  color: var(--color-accent, #7aa2f7);
+  color: var(--gn-color-secondary);
 }
 
 .sidebar-footer {
   padding: 12px 16px;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--gn-border-color-muted);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -381,12 +381,12 @@
 }
 
 .user-info:hover .user-name {
-  color: var(--color-text-primary);
+  color: var(--gn-color-text-light);
 }
 
 .user-name {
   font-size: 13px;
-  color: var(--color-text-secondary);
+  color: var(--gn-color-text-medium);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/webclient/src/components/sidebar/SessionItem.vue b/webclient/src/components/sidebar/SessionItem.vue
index e1d2f20..eeb76d3 100644
--- a/webclient/src/components/sidebar/SessionItem.vue
+++ b/webclient/src/components/sidebar/SessionItem.vue
@@ -141,7 +141,7 @@
 }
 
 .recall-badge {
-  color: var(--color-accent, #f59e0b);
+  color: var(--gn-color-accent);
   font-size: 0.85em;
   flex-shrink: 0;
 }
diff --git a/webclient/src/components/sidebar/SessionList.vue b/webclient/src/components/sidebar/SessionList.vue
index c6c3c7a..6e507f0 100644
--- a/webclient/src/components/sidebar/SessionList.vue
+++ b/webclient/src/components/sidebar/SessionList.vue
@@ -228,7 +228,7 @@
   align-items: center;
   gap: 8px;
   padding: 32px 16px;
-  color: var(--color-text-dark, #787c99);
+  color: var(--gn-color-text-dark);
   font-size: 13px;
 
   i { font-size: 32px; opacity: 0.4; }
@@ -241,7 +241,7 @@
   justify-content: center;
   gap: 10px;
   padding: 28px 16px;
-  color: var(--color-text-dark, #787c99);
+  color: var(--gn-color-text-dark);
   font-size: 12px;
 }
 
@@ -252,8 +252,8 @@
 .sessions-spinner {
   width: 16px;
   height: 16px;
-  border: 2px solid var(--color-border, #3b4261);
-  border-top-color: var(--color-accent, #7aa2f7);
+  border: 2px solid var(--gn-border-color-muted);
+  border-top-color: var(--gn-color-secondary);
   border-radius: 50%;
   animation: sessions-spin 0.8s linear infinite;
 }
@@ -275,7 +275,7 @@
   gap: 8px;
   padding: 8px;
   font-size: 12px;
-  color: var(--color-text-dark, #787c99);
+  color: var(--gn-color-text-dark);
   pointer-events: none;
   transition: opacity 0.15s, transform 0.15s;
   will-change: transform, opacity;
@@ -284,8 +284,8 @@
 .ptr-spinner {
   width: 16px;
   height: 16px;
-  border: 2px solid var(--color-border, #3b4261);
-  border-top-color: var(--color-accent, #7aa2f7);
+  border: 2px solid var(--gn-border-color-muted);
+  border-top-color: var(--gn-color-secondary);
   border-radius: 50%;
   transition: transform 0.15s;
 }
diff --git a/webclient/src/components/ui/CardGrid.vue b/webclient/src/components/ui/CardGrid.vue
index 1dab4df..0316c35 100644
--- a/webclient/src/components/ui/CardGrid.vue
+++ b/webclient/src/components/ui/CardGrid.vue
@@ -132,7 +132,7 @@
 .card-grid-title {
   font-size: 1rem;
   font-weight: 600;
-  color: var(--text, #cdd6f4);
+  color: var(--gn-color-text-light);
 }
 
 .card-grid-items {
@@ -150,8 +150,8 @@
 .card-grid-item {
   display: flex;
   flex-direction: column;
-  background: var(--surface-elevated, #242438);
-  border: 1px solid var(--border, #2a2a3e);
+  background: color-mix(in srgb, var(--gn-color-grey) 12%, var(--gn-surface-panel));
+  border: 1px solid var(--gn-border-color-muted);
   overflow: hidden;
   cursor: pointer;
   transition: border-color 0.15s, transform 0.1s;
@@ -159,7 +159,7 @@
 
 .card-grid-item:hover,
 .card-grid-item:focus {
-  border-color: var(--accent, #4ec9b0);
+  border-color: var(--gn-color-secondary);
   outline: none;
 }
 
@@ -171,7 +171,7 @@
   width: 100%;
   height: 140px;
   object-fit: cover;
-  background: var(--surface, #1e1e2e);
+  background: var(--gn-surface-panel);
 }
 
 .card-no-image {
@@ -180,9 +180,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--text-muted, #6c7086);
+  color: var(--gn-color-text-dark);
   font-size: 2rem;
-  background: var(--surface, #1e1e2e);
+  background: var(--gn-surface-panel);
 }
 
 .card-content {
@@ -196,13 +196,13 @@
 .card-title {
   font-weight: 600;
   font-size: 0.95rem;
-  color: var(--text, #cdd6f4);
+  color: var(--gn-color-text-light);
   line-height: 1.3;
 }
 
 .card-subtitle {
   font-size: 0.8rem;
-  color: var(--text-muted, #6c7086);
+  color: var(--gn-color-text-dark);
 }
 
 .card-meta {
@@ -218,17 +218,17 @@
 }
 
 .card-meta-label {
-  color: var(--text-muted, #6c7086);
+  color: var(--gn-color-text-dark);
 }
 
 .card-meta-value {
-  color: var(--text, #cdd6f4);
+  color: var(--gn-color-text-light);
   font-weight: 500;
 }
 
 .card-description {
   font-size: 0.8rem;
-  color: var(--text, #cdd6f4);
+  color: var(--gn-color-text-light);
   line-height: 1.4;
   opacity: 0.85;
   display: -webkit-box;
@@ -240,7 +240,7 @@
 .card-grid-more {
   text-align: center;
   font-size: 0.8rem;
-  color: var(--text-muted, #6c7086);
+  color: var(--gn-color-text-dark);
 }
 
 .card-modal-overlay {
@@ -259,8 +259,8 @@
   width: 100%;
   max-width: 560px;
   max-height: 90vh;
-  background: var(--surface, #1e1e2e);
-  border: 1px solid var(--border, #2a2a3e);
+  background: var(--gn-surface-panel);
+  border: 1px solid var(--gn-border-color-muted);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -275,16 +275,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--surface-elevated, #242438);
-  border: 1px solid var(--border, #2a2a3e);
-  color: var(--text, #cdd6f4);
+  background: color-mix(in srgb, var(--gn-color-grey) 12%, var(--gn-surface-panel));
+  border: 1px solid var(--gn-border-color-muted);
+  color: var(--gn-color-text-light);
   cursor: pointer;
   z-index: 2;
 }
 
 .card-modal-close:hover {
-  border-color: var(--accent, #4ec9b0);
-  color: var(--accent, #4ec9b0);
+  border-color: var(--gn-color-secondary);
+  color: var(--gn-color-secondary);
 }
 
 .card-modal-scroll {
@@ -296,7 +296,7 @@
   width: 100%;
   max-height: 320px;
   object-fit: cover;
-  background: var(--surface, #1e1e2e);
+  background: var(--gn-surface-panel);
 }
 
 .card-modal-content {
@@ -310,11 +310,11 @@
   margin: 0;
   font-size: 1.3rem;
   font-weight: 600;
-  color: var(--text, #cdd6f4);
+  color: var(--gn-color-text-light);
 }
 
 .card-modal-subtitle {
-  color: var(--text-muted, #6c7086);
+  color: var(--gn-color-text-dark);
   font-size: 0.9rem;
 }
 
@@ -328,7 +328,7 @@
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--text-muted, #6c7086);
+  color: var(--gn-color-text-dark);
 }
 
 .card-modal-meta-grid {
@@ -338,27 +338,27 @@
 }
 
 .card-modal-meta-cell {
-  background: var(--surface-elevated, #242438);
-  border: 1px solid var(--border, #2a2a3e);
+  background: color-mix(in srgb, var(--gn-color-grey) 12%, var(--gn-surface-panel));
+  border: 1px solid var(--gn-border-color-muted);
   padding: 10px;
 }
 
 .card-modal-meta-label {
   font-size: 0.7rem;
-  color: var(--text-muted, #6c7086);
+  color: var(--gn-color-text-dark);
   margin-bottom: 4px;
 }
 
 .card-modal-meta-value {
   font-size: 0.9rem;
-  color: var(--text, #cdd6f4);
+  color: var(--gn-color-text-light);
   font-weight: 500;
 }
 
 .card-modal-text {
   margin: 0;
   line-height: 1.5;
-  color: var(--text, #cdd6f4);
+  color: var(--gn-color-text-light);
 }
 
 .card-modal-details {
@@ -372,7 +372,7 @@
   justify-content: space-between;
   gap: 12px;
   padding: 8px 0;
-  border-bottom: 1px solid var(--border, #2a2a3e);
+  border-bottom: 1px solid var(--gn-border-color-muted);
 }
 
 .card-modal-detail-row:last-child {
@@ -380,13 +380,13 @@
 }
 
 .card-modal-detail-row dt {
-  color: var(--text-muted, #6c7086);
+  color: var(--gn-color-text-dark);
   font-size: 0.85rem;
 }
 
 .card-modal-detail-row dd {
   margin: 0;
-  color: var(--text, #cdd6f4);
+  color: var(--gn-color-text-light);
   font-size: 0.85rem;
   text-align: right;
   word-break: break-word;
@@ -402,14 +402,14 @@
   display: inline-flex;
   align-items: center;
   padding: 8px 14px;
-  background: var(--accent-muted, #313244);
-  color: var(--accent, #4ec9b0);
+  background: color-mix(in srgb, var(--gn-color-secondary) 14%, var(--gn-surface-panel));
+  color: var(--gn-color-secondary);
   text-decoration: none;
   font-size: 0.85rem;
   font-weight: 500;
 }
 
 .card-modal-action:hover {
-  background: var(--border, #2a2a3e);
+  background: var(--gn-border-color-muted);
 }
 </style>
diff --git a/webclient/src/components/ui/ContextBar.vue b/webclient/src/components/ui/ContextBar.vue
index 04479a4..ec179cb 100644
--- a/webclient/src/components/ui/ContextBar.vue
+++ b/webclient/src/components/ui/ContextBar.vue
@@ -36,10 +36,10 @@
   font-size: 11px;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
-  color: var(--color-success);
+  color: var(--gn-color-success);
   white-space: nowrap;
 
-  &.is-warn { color: var(--color-warning); }
-  &.is-crit { color: var(--color-error); }
+  &.is-warn { color: var(--gn-color-warning); }
+  &.is-crit { color: var(--gn-color-error); }
 }
 </style>
diff --git a/webclient/src/components/ui/Form.vue b/webclient/src/components/ui/Form.vue
index cad5c92..66d2d12 100644
--- a/webclient/src/components/ui/Form.vue
+++ b/webclient/src/components/ui/Form.vue
@@ -367,12 +367,12 @@
 .ui-form-title {
   font-size: 1rem;
   font-weight: 600;
-  color: var(--text, #cdd6f4);
+  color: var(--gn-color-text-light);
 }
 
 .ui-form-description {
   font-size: 0.85rem;
-  color: var(--text-muted, #6c7086);
+  color: var(--gn-color-text-dark);
   line-height: 1.4;
 }
 
@@ -389,41 +389,41 @@
 }
 
 .ui-form-field.has-error .ui-form-input {
-  border-color: var(--color-error, #f38ba8);
+  border-color: var(--gn-color-error);
 }
 
 .ui-form-label {
   font-size: 0.85rem;
   font-weight: 500;
-  color: var(--text, #cdd6f4);
+  color: var(--gn-color-text-light);
 }
 
 .ui-form-required {
-  color: var(--color-error, #f38ba8);
+  color: var(--gn-color-error);
   margin-left: 2px;
 }
 
 .ui-form-field-hint {
   font-size: 0.75rem;
-  color: var(--text-muted, #6c7086);
+  color: var(--gn-color-text-dark);
 }
 
 .ui-form-input {
   padding: 10px 12px;
-  background: var(--surface, #1e1e2e);
-  border: 1px solid var(--border, #2a2a3e);
-  color: var(--text, #cdd6f4);
+  background: var(--gn-surface-panel);
+  border: 1px solid var(--gn-border-color-muted);
+  color: var(--gn-color-text-light);
   font-size: 0.9rem;
   outline: none;
   transition: border-color 0.15s;
 }
 
 .ui-form-input:focus {
-  border-color: var(--accent, #4ec9b0);
+  border-color: var(--gn-color-secondary);
 }
 
 .ui-form-input::placeholder {
-  color: var(--text-muted, #6c7086);
+  color: var(--gn-color-text-dark);
 }
 
 select.ui-form-input {
@@ -445,20 +445,20 @@
   align-items: center;
   gap: 8px;
   font-size: 0.9rem;
-  color: var(--text, #cdd6f4);
+  color: var(--gn-color-text-light);
   cursor: pointer;
 }
 
 .ui-form-checkbox input {
   width: 18px;
   height: 18px;
-  accent-color: var(--accent, #4ec9b0);
+  accent-color: var(--gn-color-secondary);
   cursor: pointer;
 }
 
 .ui-form-error {
   font-size: 0.8rem;
-  color: var(--color-error, #f38ba8);
+  color: var(--gn-color-error);
 }
 
 .ui-form-submit {
@@ -468,8 +468,8 @@
   gap: 8px;
   align-self: flex-start;
   padding: 10px 18px;
-  background: var(--accent, #4ec9b0);
-  color: var(--surface, #1e1e2e);
+  background: var(--gn-color-secondary);
+  color: var(--gn-surface-panel);
   border: none;
   font-size: 0.9rem;
   font-weight: 600;
@@ -510,7 +510,7 @@
   align-items: center;
   gap: 6px;
   font-size: 0.85rem;
-  color: var(--accent, #4ec9b0);
+  color: var(--gn-color-secondary);
 }
 
 .ui-form-summary {
@@ -524,7 +524,7 @@
   justify-content: space-between;
   gap: 12px;
   padding: 8px 0;
-  border-bottom: 1px solid var(--border, #2a2a3e);
+  border-bottom: 1px solid var(--gn-border-color-muted);
 }
 
 .ui-form-summary-row:last-child {
@@ -532,13 +532,13 @@
 }
 
 .ui-form-summary-row dt {
-  color: var(--text-muted, #6c7086);
+  color: var(--gn-color-text-dark);
   font-size: 0.85rem;
 }
 
 .ui-form-summary-row dd {
   margin: 0;
-  color: var(--text, #cdd6f4);
+  color: var(--gn-color-text-light);
   font-size: 0.85rem;
   text-align: right;
   word-break: break-word;
diff --git a/webclient/src/components/ui/ImageLightbox.vue b/webclient/src/components/ui/ImageLightbox.vue
index 7ed1b6d..95aeb65 100644
--- a/webclient/src/components/ui/ImageLightbox.vue
+++ b/webclient/src/components/ui/ImageLightbox.vue
@@ -78,7 +78,7 @@
   justify-content: center;
   gap: 8px;
   padding: 32px;
-  color: #787C99;
+  color: var(--gn-color-text-dark);
   font-size: 13px;
 }
 .lightbox-error i {
diff --git a/webclient/src/components/ui/LoginScreen.vue b/webclient/src/components/ui/LoginScreen.vue
index 35e60f3..5ef0943 100644
--- a/webclient/src/components/ui/LoginScreen.vue
+++ b/webclient/src/components/ui/LoginScreen.vue
@@ -24,7 +24,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #111;
+  background: var(--gn-color-black);
   z-index: 9999;
 }
 
@@ -34,7 +34,7 @@
   align-items: center;
   gap: 16px;
   padding: 48px 40px;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--gn-border-color-muted);
   border-radius: 16px;
   max-width: 360px;
   width: 90%;
@@ -48,13 +48,13 @@
 .login-title {
   font-size: 24px;
   font-weight: 700;
-  color: var(--color-text-primary);
+  color: var(--gn-color-text-light);
   margin: 0;
 }
 
 .login-subtitle {
   font-size: 14px;
-  color: var(--color-text-secondary);
+  color: var(--gn-color-text-medium);
   margin: 0;
 }
 
diff --git a/webclient/src/components/ui/SelectionToolbar.vue b/webclient/src/components/ui/SelectionToolbar.vue
index 5b6b7ce..eadcf44 100644
--- a/webclient/src/components/ui/SelectionToolbar.vue
+++ b/webclient/src/components/ui/SelectionToolbar.vue
@@ -6,7 +6,7 @@
       :style="{ top: pos.y + 'px', left: pos.x + 'px' }"
       @mousedown.prevent
     >
-      <GnButton variant="warning" size="sm" icon="ph ph-quotes" style="color:#000" title="Reply to selection" @click="handleReply">
+      <GnButton variant="warning" size="sm" icon="ph ph-quotes" style="color:var(--gn-color-black)" title="Reply to selection" @click="handleReply">
         Reply
       </GnButton>
     </div>
@@ -88,7 +88,7 @@
   transform: translateX(-50%);
   z-index: 900;
   pointer-events: all;
-  background: #e0af68;
-  color: black;
+  background: var(--gn-color-warning);
+  color: var(--gn-color-black);
 }
 </style>
diff --git a/webclient/src/styles/app.scss b/webclient/src/styles/app.scss
index bdea59b..f04945a 100644
--- a/webclient/src/styles/app.scss
+++ b/webclient/src/styles/app.scss
@@ -288,7 +288,7 @@
   }
 
   .session-recall-icon {
-    color: var(--color-accent, #7aa2f7);
+    color: var(--gn-color-secondary);
   }
 }
 
@@ -465,8 +465,8 @@
 }
 
 .msg-user--recall .msg-user-bubble {
-  background: rgba(122, 162, 247, 0.12);
-  border: 1px solid rgba(122, 162, 247, 0.25);
+  background: color-mix(in srgb, var(--gn-color-secondary) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--gn-color-secondary) 25%, transparent);
 
   .msg-user-text {
     color: $color-text-light;
@@ -478,7 +478,7 @@
   align-items: center;
   gap: 4px;
   font-size: 11px;
-  color: #7aa2f7;
+  color: var(--gn-color-secondary);
   margin-bottom: 4px;
   opacity: 0.85;
 }
@@ -1731,16 +1731,10 @@
   }
 }
 
-// ─── UI kit overrides ──────────────────────────────────────────────────────
+// ─── Disclosure chevrons ───────────────────────────────────────────────────
 
-// Disable btn-icon icon rotation on hover — too distracting for utility buttons.
-// Use .with-rotate class to opt back in where rotation makes sense.
-.btn-icon:not(.with-rotate) .ph {
-  transform: none !important;
-  transition: none !important;
-}
-
-// Tool card chevron should still rotate (opt-in)
+// Kit 1.0 dropped the hover icon rotation entirely; app-owned
+// tool/thinking cards keep the open-state chevron flip.
 .tool-card[open] > summary .tool-chevron,
 .thinking-card[open] > summary .tool-chevron {
   transform: rotate(180deg) !important;