From f4efa5195fb0d07e89e605d1c8dfb7d0692eb877 Mon Sep 17 00:00:00 2001
From: master <>
Date: Sun, 29 Mar 2026 12:18:50 +0300
Subject: [PATCH] Fix VEX hub theming: replace swapped CSS vars, rgba colors,
 button colors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All 13 VEX hub components had the same swapped theme pattern:
- text-heading used as backgrounds → surface-elevated
- surface-secondary used as text color → text-heading
- border-primary used as text color → text-primary
- text-primary used as backgrounds → surface-tertiary
- status-info used as button bg → btn-primary-bg
- Hardcoded rgba() colors → CSS variable references
- text/border color swaps in border declarations

168 occurrences fixed across: vex-hub-dashboard, vex-statement-search,
vex-statement-detail, vex-statement-detail-panel, vex-create-workflow,
vex-hub-stats, vex-consensus, vex-conflict-resolution, vex-hub,
ai-explain-panel, ai-justify-panel, ai-remediate-panel, ai-consent-gate.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../vex-hub/ai-consent-gate.component.ts      | 38 ++++++------
 .../vex-hub/ai-explain-panel.component.ts     | 30 ++++-----
 .../vex-hub/ai-justify-panel.component.ts     | 38 ++++++------
 .../vex-hub/ai-remediate-panel.component.ts   | 62 +++++++++----------
 .../vex-conflict-resolution.component.ts      | 44 ++++++-------
 .../vex-hub/vex-consensus.component.ts        | 60 +++++++++---------
 .../vex-hub/vex-create-workflow.component.ts  | 56 ++++++++---------
 .../vex-hub/vex-hub-dashboard.component.ts    | 24 +++----
 .../vex-hub/vex-hub-stats.component.ts        | 50 +++++++--------
 .../vex-statement-detail-panel.component.ts   | 58 ++++++++---------
 .../vex-hub/vex-statement-detail.component.ts | 28 ++++-----
 .../vex-hub/vex-statement-search.component.ts | 34 +++++-----
 12 files changed, 261 insertions(+), 261 deletions(-)

diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-consent-gate.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-consent-gate.component.ts
index ccae5c9ab..26564b6a2 100644
--- a/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-consent-gate.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-consent-gate.component.ts
@@ -170,8 +170,8 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
     }
 
     .consent-dialog {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-2xl);
       width: 100%;
       max-width: 540px;
@@ -185,7 +185,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
       align-items: center;
       gap: 1rem;
       padding: 1.5rem;
-      border-bottom: 1px solid var(--color-text-primary);
+      border-bottom: 1px solid var(--color-border-primary);
     }
 
     .consent-icon {
@@ -210,7 +210,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
       flex: 1;
       font-size: 1.25rem;
       font-weight: var(--font-weight-bold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .btn-close {
@@ -228,7 +228,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
     }
 
     .btn-close:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: rgba(212, 201, 168, 0.3);
     }
 
@@ -260,7 +260,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
       align-items: flex-start;
       gap: 0.875rem;
       padding: 0.875rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
     }
 
@@ -285,18 +285,18 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
     }
 
     .feature-icon--remediate {
-      background: rgba(34, 197, 94, 0.2);
+      background: var(--color-status-success-bg);
       color: var(--color-status-success-border);
     }
 
     .feature-icon--justify {
-      background: rgba(168, 85, 247, 0.2);
+      background: var(--color-brand-primary-20);
       color: var(--color-status-excepted-border);
     }
 
     .feature-content strong {
       display: block;
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
       font-size: 0.875rem;
       margin-bottom: 0.25rem;
     }
@@ -308,8 +308,8 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
     }
 
     .data-notice {
-      background: var(--color-text-primary);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-tertiary);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       padding: 1rem;
       margin-bottom: 1.5rem;
@@ -352,7 +352,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
     .notice-emphasis {
       margin: 0;
       padding: 0.75rem;
-      background: rgba(34, 197, 94, 0.1);
+      background: var(--color-status-success-bg);
       border-radius: var(--radius-md);
       color: var(--color-status-success-border);
     }
@@ -387,7 +387,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
     }
 
     .consent-checkbox input:checked + .checkbox-custom {
-      background: var(--color-status-info);
+      background: var(--color-btn-primary-bg);
       border-color: var(--color-status-info);
     }
 
@@ -421,10 +421,10 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
 
     .scope-selector select {
       padding: 0.625rem 0.875rem;
-      background: var(--color-text-primary);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-tertiary);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-md);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
       font-size: 0.875rem;
     }
 
@@ -438,7 +438,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
       justify-content: flex-end;
       gap: 0.75rem;
       padding: 1.25rem 1.5rem;
-      border-top: 1px solid var(--color-text-primary);
+      border-top: 1px solid var(--color-border-primary);
     }
 
     .btn {
@@ -471,12 +471,12 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
 
     .btn--ghost {
       background: transparent;
-      border: 1px solid var(--color-text-primary);
+      border: 1px solid var(--color-border-primary);
       color: rgba(212, 201, 168, 0.3);
     }
 
     .btn--ghost:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
     }
 
     .btn-spinner {
diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-explain-panel.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-explain-panel.component.ts
index fe25d7c6c..ead09b974 100644
--- a/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-explain-panel.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-explain-panel.component.ts
@@ -210,7 +210,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
       width: 100%;
       max-width: 560px;
       height: 100%;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border-left: 1px solid var(--color-text-primary);
       display: flex;
       flex-direction: column;
@@ -231,7 +231,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
       justify-content: space-between;
       align-items: center;
       padding: 1.25rem 1.5rem;
-      border-bottom: 1px solid var(--color-text-primary);
+      border-bottom: 1px solid var(--color-border-primary);
       flex-shrink: 0;
     }
 
@@ -261,7 +261,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
       margin: 0;
       font-size: 1.125rem;
       font-weight: var(--font-weight-semibold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .panel-subtitle {
@@ -285,7 +285,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
     }
 
     .btn-close:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: rgba(212, 201, 168, 0.3);
     }
 
@@ -372,7 +372,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
     }
 
     .explanation-section {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
       padding: 1.25rem;
     }
@@ -432,7 +432,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
       font-family: ui-monospace, monospace;
       font-size: 1.25rem;
       font-weight: var(--font-weight-bold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .impact-value {
@@ -445,7 +445,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
       flex-direction: column;
       gap: 0.5rem;
       padding-top: 1rem;
-      border-top: 1px solid var(--color-text-primary);
+      border-top: 1px solid var(--color-border-primary);
     }
 
     .impact-tags {
@@ -456,7 +456,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
 
     .impact-tag {
       padding: 0.25rem 0.625rem;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border-radius: var(--radius-sm);
       font-size: 0.75rem;
       color: rgba(212, 201, 168, 0.3);
@@ -486,7 +486,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
       font-family: ui-monospace, monospace;
       font-size: 0.875rem;
       color: rgba(212, 201, 168, 0.3);
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       padding: 0.25rem 0.5rem;
       border-radius: var(--radius-sm);
     }
@@ -531,7 +531,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
       flex-wrap: wrap;
       gap: 1rem;
       padding: 1rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-lg);
     }
 
@@ -573,7 +573,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
 
     .error-state h3 {
       margin: 0 0 0.5rem;
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .error-state p {
@@ -584,7 +584,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
     /* Footer */
     .panel-footer {
       padding: 1rem 1.5rem;
-      border-top: 1px solid var(--color-text-primary);
+      border-top: 1px solid var(--color-border-primary);
       flex-shrink: 0;
     }
 
@@ -623,13 +623,13 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
     }
 
     .btn--secondary {
-      background: var(--color-text-primary);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-tertiary);
+      border: 1px solid var(--color-border-primary);
       color: rgba(212, 201, 168, 0.3);
     }
 
     .btn--secondary:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
     }
 
     .btn--ghost {
diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-justify-panel.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-justify-panel.component.ts
index ae1d0a22d..2d7670fc9 100644
--- a/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-justify-panel.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-justify-panel.component.ts
@@ -321,7 +321,7 @@ type JustificationType =
       width: 100%;
       max-width: 560px;
       height: 100%;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border-left: 1px solid var(--color-text-primary);
       display: flex;
       flex-direction: column;
@@ -338,7 +338,7 @@ type JustificationType =
       justify-content: space-between;
       align-items: center;
       padding: 1.25rem 1.5rem;
-      border-bottom: 1px solid var(--color-text-primary);
+      border-bottom: 1px solid var(--color-border-primary);
       flex-shrink: 0;
     }
 
@@ -352,7 +352,7 @@ type JustificationType =
       width: 44px;
       height: 44px;
       border-radius: var(--radius-xl);
-      background: rgba(168, 85, 247, 0.2);
+      background: var(--color-brand-primary-20);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -368,7 +368,7 @@ type JustificationType =
       margin: 0;
       font-size: 1.125rem;
       font-weight: var(--font-weight-semibold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .panel-subtitle {
@@ -392,7 +392,7 @@ type JustificationType =
     }
 
     .btn-close:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: rgba(212, 201, 168, 0.3);
     }
 
@@ -412,7 +412,7 @@ type JustificationType =
       margin: 0 0 0.5rem;
       font-size: 1.125rem;
       font-weight: var(--font-weight-semibold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .form-description {
@@ -428,7 +428,7 @@ type JustificationType =
     .context-section {
       margin-top: 1.5rem;
       padding: 1rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
     }
 
@@ -509,7 +509,7 @@ type JustificationType =
       align-items: center;
       gap: 1rem;
       padding: 1rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
     }
 
@@ -548,7 +548,7 @@ type JustificationType =
       justify-content: center;
       font-size: 1rem;
       font-weight: var(--font-weight-bold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .confidence-info {
@@ -589,12 +589,12 @@ type JustificationType =
     .suggestion-value {
       font-size: 0.9375rem;
       font-weight: var(--font-weight-medium);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     /* Draft Section */
     .draft-section {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
       overflow: hidden;
     }
@@ -619,7 +619,7 @@ type JustificationType =
       align-items: center;
       gap: 0.375rem;
       padding: 0.375rem 0.75rem;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border: none;
       border-radius: var(--radius-md);
       color: var(--color-text-muted);
@@ -629,7 +629,7 @@ type JustificationType =
     }
 
     .btn-copy:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: rgba(212, 201, 168, 0.3);
     }
 
@@ -653,7 +653,7 @@ type JustificationType =
 
     /* Evidence Section */
     .evidence-section {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
       padding: 1rem;
     }
@@ -679,7 +679,7 @@ type JustificationType =
       align-items: flex-start;
       gap: 0.5rem;
       padding: 0.5rem;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border-radius: var(--radius-md);
       font-size: 0.8125rem;
       color: rgba(212, 201, 168, 0.3);
@@ -695,7 +695,7 @@ type JustificationType =
 
     /* Checklist Section */
     .checklist-section {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
       padding: 1rem;
     }
@@ -770,7 +770,7 @@ type JustificationType =
       flex-wrap: wrap;
       gap: 1rem;
       padding: 0.75rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-lg);
     }
 
@@ -807,7 +807,7 @@ type JustificationType =
 
     .error-state h3 {
       margin: 0 0 0.5rem;
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .error-state p {
@@ -818,7 +818,7 @@ type JustificationType =
     /* Footer */
     .panel-footer {
       padding: 1rem 1.5rem;
-      border-top: 1px solid var(--color-text-primary);
+      border-top: 1px solid var(--color-border-primary);
       flex-shrink: 0;
     }
 
diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-remediate-panel.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-remediate-panel.component.ts
index 874a7fff9..a9b637c02 100644
--- a/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-remediate-panel.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-remediate-panel.component.ts
@@ -309,7 +309,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
       width: 100%;
       max-width: 560px;
       height: 100%;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border-left: 1px solid var(--color-text-primary);
       display: flex;
       flex-direction: column;
@@ -326,7 +326,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
       justify-content: space-between;
       align-items: center;
       padding: 1.25rem 1.5rem;
-      border-bottom: 1px solid var(--color-text-primary);
+      border-bottom: 1px solid var(--color-border-primary);
       flex-shrink: 0;
     }
 
@@ -340,7 +340,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
       width: 44px;
       height: 44px;
       border-radius: var(--radius-xl);
-      background: rgba(34, 197, 94, 0.2);
+      background: var(--color-status-success-bg);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -356,7 +356,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
       margin: 0;
       font-size: 1.125rem;
       font-weight: var(--font-weight-semibold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .panel-subtitle {
@@ -380,7 +380,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
     }
 
     .btn-close:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: rgba(212, 201, 168, 0.3);
     }
 
@@ -443,7 +443,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
       display: flex;
       gap: 1.5rem;
       padding: 0.875rem 1rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-lg);
       margin-bottom: 1.5rem;
     }
@@ -474,7 +474,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
     }
 
     .recommendation-card {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
       overflow: hidden;
       transition: all 0.2s ease;
@@ -501,7 +501,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
       width: 32px;
       height: 32px;
       border-radius: var(--radius-lg);
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -526,7 +526,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
     }
 
     .action-upgrade { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); }
-    .action-patch { background: rgba(168, 85, 247, 0.2); color: var(--color-status-excepted-border); }
+    .action-patch { background: var(--color-brand-primary-20); color: var(--color-status-excepted-border); }
     .action-mitigate { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); }
     .action-workaround { background: rgba(249, 115, 22, 0.2); color: var(--color-severity-high-border); }
 
@@ -600,7 +600,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
       font-family: ui-monospace, monospace;
       font-size: 0.875rem;
       color: var(--color-status-success-border);
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       padding: 0.25rem 0.5rem;
       border-radius: var(--radius-sm);
     }
@@ -609,7 +609,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
       display: flex;
       align-items: center;
       gap: 0.5rem;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border-radius: var(--radius-md);
       padding: 0.75rem;
       overflow-x: auto;
@@ -629,7 +629,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
       display: flex;
       align-items: center;
       justify-content: center;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border: none;
       border-radius: var(--radius-md);
       color: var(--color-text-secondary);
@@ -639,7 +639,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
     }
 
     .btn-copy:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: rgba(212, 201, 168, 0.3);
     }
 
@@ -671,7 +671,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
     .notes-section {
       margin-top: 1.5rem;
       padding: 1rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
     }
 
@@ -732,7 +732,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
       flex-wrap: wrap;
       gap: 1rem;
       padding: 1rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-lg);
       margin-top: 1.5rem;
     }
@@ -770,7 +770,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
 
     .error-state h3 {
       margin: 0 0 0.5rem;
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .error-state p {
@@ -781,7 +781,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
     /* Footer */
     .panel-footer {
       padding: 1rem 1.5rem;
-      border-top: 1px solid var(--color-text-primary);
+      border-top: 1px solid var(--color-border-primary);
       flex-shrink: 0;
     }
 
@@ -815,13 +815,13 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
     }
 
     .btn--secondary {
-      background: var(--color-text-primary);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-tertiary);
+      border: 1px solid var(--color-border-primary);
       color: rgba(212, 201, 168, 0.3);
     }
 
     .btn--secondary:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
     }
 
     .btn--ghost {
@@ -837,7 +837,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
     .pr-section {
       margin-top: 1.5rem;
       padding: 1rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
     }
 
@@ -853,7 +853,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
       align-items: center;
       gap: 0.75rem;
       padding: 0.75rem;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border-radius: var(--radius-lg);
     }
 
@@ -866,7 +866,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
     }
 
     .pr-status--open, .pr-status--review_requested { background: var(--color-status-success-text); color: #fff; }
-    .pr-status--draft { background: var(--color-text-primary); color: var(--color-text-muted); }
+    .pr-status--draft { background: var(--color-surface-tertiary); color: var(--color-text-muted); }
     .pr-status--approved { background: var(--color-status-info-text); color: #fff; }
     .pr-status--changes_requested { background: var(--color-status-warning-text); color: #fff; }
     .pr-status--merged { background: var(--color-status-excepted); color: var(--color-status-excepted-border); }
@@ -902,7 +902,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
     .ci-status--pending, .ci-status--running { background: var(--color-status-warning-text); color: #fff; }
     .ci-status--success { background: var(--color-status-success-text); color: #fff; }
     .ci-status--failure { background: var(--color-status-error-text); color: #fff; }
-    .ci-status--skipped { background: var(--color-text-primary); color: var(--color-text-muted); }
+    .ci-status--skipped { background: var(--color-surface-tertiary); color: var(--color-text-muted); }
 
     .btn-copy-link {
       width: 32px;
@@ -917,7 +917,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
       cursor: pointer;
     }
 
-    .btn-copy-link:hover { background: var(--color-text-primary); color: rgba(212, 201, 168, 0.3); }
+    .btn-copy-link:hover { background: var(--color-surface-tertiary); color: rgba(212, 201, 168, 0.3); }
     .btn-copy-link svg { width: 16px; height: 16px; }
 
     .pr-creating-state {
@@ -946,8 +946,8 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
       align-items: center;
       gap: 0.75rem;
       padding: 0.75rem;
-      background: rgba(239, 68, 68, 0.1);
-      border: 1px solid rgba(239, 68, 68, 0.3);
+      background: var(--color-status-error-bg);
+      border: 1px solid var(--color-status-error-bg);
       border-radius: var(--radius-md);
     }
 
@@ -956,7 +956,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
 
     .btn-retry {
       padding: 0.375rem 0.75rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border: none;
       border-radius: var(--radius-sm);
       color: rgba(212, 201, 168, 0.3);
@@ -964,7 +964,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
       cursor: pointer;
     }
 
-    .btn-retry:hover { background: var(--color-text-secondary); }
+    .btn-retry:hover { background: var(--color-surface-tertiary); }
 
     .scm-selector {
       display: flex;
@@ -981,8 +981,8 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
     .scm-select {
       flex: 1;
       padding: 0.5rem 0.75rem;
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-md);
       color: rgba(212, 201, 168, 0.3);
       font-size: 0.8125rem;
diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-conflict-resolution.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-conflict-resolution.component.ts
index 94a18827e..3d444528e 100644
--- a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-conflict-resolution.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-conflict-resolution.component.ts
@@ -289,8 +289,8 @@ interface ConflictingStatement {
     }
 
     .resolution-container {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-2xl);
       width: 100%;
       max-width: 800px;
@@ -305,7 +305,7 @@ interface ConflictingStatement {
       justify-content: space-between;
       align-items: center;
       padding: 1.25rem 1.5rem;
-      border-bottom: 1px solid var(--color-text-primary);
+      border-bottom: 1px solid var(--color-border-primary);
     }
 
     .header-content {
@@ -318,7 +318,7 @@ interface ConflictingStatement {
       margin: 0;
       font-size: 1.25rem;
       font-weight: var(--font-weight-bold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .header-cve {
@@ -342,7 +342,7 @@ interface ConflictingStatement {
     }
 
     .btn-close:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: rgba(212, 201, 168, 0.3);
     }
 
@@ -429,7 +429,7 @@ interface ConflictingStatement {
 
     /* Conflict Breakdown */
     .conflict-breakdown {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
       padding: 1.25rem;
       margin-bottom: 1.5rem;
@@ -468,7 +468,7 @@ interface ConflictingStatement {
     .bar-container {
       flex: 1;
       height: 8px;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border-radius: var(--radius-sm);
       overflow: hidden;
     }
@@ -481,7 +481,7 @@ interface ConflictingStatement {
 
     .bar-fill--affected { background: var(--color-status-error); }
     .bar-fill--not_affected { background: var(--color-status-success); }
-    .bar-fill--fixed { background: var(--color-status-info); }
+    .bar-fill--fixed { background: var(--color-btn-primary-bg); }
     .bar-fill--under_investigation { background: var(--color-status-warning); }
 
     .status-count {
@@ -517,7 +517,7 @@ interface ConflictingStatement {
     }
 
     .statement-card {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border: 2px solid var(--color-text-primary);
       border-radius: var(--radius-xl);
       cursor: pointer;
@@ -554,8 +554,8 @@ interface ConflictingStatement {
     }
 
     .issuer-badge--vendor { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); }
-    .issuer-badge--cert { background: rgba(168, 85, 247, 0.2); color: var(--color-status-excepted-border); }
-    .issuer-badge--oss { background: rgba(34, 197, 94, 0.2); color: var(--color-status-success-border); }
+    .issuer-badge--cert { background: var(--color-brand-primary-20); color: var(--color-status-excepted-border); }
+    .issuer-badge--oss { background: var(--color-status-success-bg); color: var(--color-status-success-border); }
     .issuer-badge--researcher { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); }
     .issuer-badge--ai_generated { background: rgba(244, 114, 182, 0.2); color: var(--color-status-excepted-border); }
 
@@ -604,8 +604,8 @@ interface ConflictingStatement {
       margin-bottom: 0.75rem;
     }
 
-    .status-badge--affected { background: rgba(239, 68, 68, 0.2); color: var(--color-status-error-border); }
-    .status-badge--not_affected { background: rgba(34, 197, 94, 0.2); color: var(--color-status-success-border); }
+    .status-badge--affected { background: var(--color-status-error-bg); color: var(--color-status-error-border); }
+    .status-badge--not_affected { background: var(--color-status-success-bg); color: var(--color-status-success-border); }
     .status-badge--fixed { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); }
     .status-badge--under_investigation { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); }
 
@@ -623,7 +623,7 @@ interface ConflictingStatement {
     .justification-type {
       font-size: 0.75rem;
       color: var(--color-status-excepted-border);
-      background: rgba(168, 85, 247, 0.15);
+      background: var(--color-brand-primary-20);
       padding: 0.25rem 0.5rem;
       border-radius: var(--radius-sm);
     }
@@ -633,7 +633,7 @@ interface ConflictingStatement {
       justify-content: space-between;
       padding: 0.75rem 1.25rem;
       background: rgba(0, 0, 0, 0.1);
-      border-top: 1px solid var(--color-text-primary);
+      border-top: 1px solid var(--color-border-primary);
     }
 
     .timestamp {
@@ -654,7 +654,7 @@ interface ConflictingStatement {
       padding: 0.625rem;
       font-size: 0.75rem;
       color: var(--color-text-secondary);
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
     }
 
     .statement-card--selected .selection-indicator {
@@ -669,7 +669,7 @@ interface ConflictingStatement {
 
     /* Resolution Options */
     .resolution-options {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
       padding: 1.25rem;
     }
@@ -693,8 +693,8 @@ interface ConflictingStatement {
       align-items: flex-start;
       gap: 0.75rem;
       padding: 1rem;
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       cursor: pointer;
       transition: all 0.15s ease;
@@ -728,7 +728,7 @@ interface ConflictingStatement {
       content: '';
       width: 10px;
       height: 10px;
-      background: var(--color-status-info);
+      background: var(--color-btn-primary-bg);
       border-radius: var(--radius-full);
     }
 
@@ -780,7 +780,7 @@ interface ConflictingStatement {
 
     .error-state h3 {
       margin: 0 0 0.5rem;
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .error-state p {
@@ -794,7 +794,7 @@ interface ConflictingStatement {
       justify-content: space-between;
       align-items: center;
       padding: 1rem 1.5rem;
-      border-top: 1px solid var(--color-text-primary);
+      border-top: 1px solid var(--color-border-primary);
     }
 
     .selection-status {
diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-consensus.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-consensus.component.ts
index 1edaebe16..04e14c0bd 100644
--- a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-consensus.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-consensus.component.ts
@@ -329,7 +329,7 @@ import {
     }
 
     .btn-back:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: var(--color-status-info-border);
     }
 
@@ -342,7 +342,7 @@ import {
       margin: 0;
       font-size: 1.5rem;
       font-weight: var(--font-weight-bold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .consensus-header__subtitle {
@@ -353,8 +353,8 @@ import {
 
     /* Search Panel */
     .search-panel {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       padding: 1.25rem;
       margin-bottom: 1.5rem;
@@ -385,10 +385,10 @@ import {
 
     .search-field input {
       padding: 0.625rem 0.875rem;
-      background: var(--color-text-primary);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-tertiary);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-md);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
       font-size: 0.875rem;
     }
 
@@ -423,12 +423,12 @@ import {
 
     .btn--ghost {
       background: transparent;
-      border: 1px solid var(--color-text-primary);
+      border: 1px solid var(--color-border-primary);
       color: rgba(212, 201, 168, 0.3);
     }
 
     .btn--ghost:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
     }
 
     .btn--text {
@@ -474,8 +474,8 @@ import {
 
     /* Consensus Summary */
     .consensus-summary {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       padding: 1.5rem;
       margin-bottom: 1.5rem;
@@ -533,7 +533,7 @@ import {
       align-items: center;
       gap: 0.375rem;
       padding: 0.5rem 0.75rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-md);
       font-size: 0.875rem;
       color: var(--color-status-success-border);
@@ -550,7 +550,7 @@ import {
       align-items: center;
       gap: 1rem;
       padding: 1rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-lg);
       margin-bottom: 1.25rem;
       border-left: 4px solid;
@@ -583,7 +583,7 @@ import {
 
     .conflict-alert__content strong {
       display: block;
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
       font-size: 0.875rem;
     }
 
@@ -607,7 +607,7 @@ import {
     .stat-value {
       font-size: 1.5rem;
       font-weight: var(--font-weight-bold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .stat-label {
@@ -618,8 +618,8 @@ import {
 
     /* Voting Section */
     .voting-section {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       padding: 1.5rem;
       margin-bottom: 1.5rem;
@@ -643,7 +643,7 @@ import {
     .vote-group {
       position: relative;
       padding: 0.75rem 1rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-lg);
       overflow: hidden;
     }
@@ -659,7 +659,7 @@ import {
 
     .vote-group--affected .vote-group__bar { background: var(--color-status-error); }
     .vote-group--not_affected .vote-group__bar { background: var(--color-status-success); }
-    .vote-group--fixed .vote-group__bar { background: var(--color-status-info); }
+    .vote-group--fixed .vote-group__bar { background: var(--color-btn-primary-bg); }
     .vote-group--under_investigation .vote-group__bar { background: var(--color-status-warning); }
 
     .vote-group__label {
@@ -687,7 +687,7 @@ import {
     }
 
     .vote-card {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
       overflow: hidden;
       transition: all 0.2s ease;
@@ -736,7 +736,7 @@ import {
 
     .issuer-name {
       font-weight: var(--font-weight-semibold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .issuer-type {
@@ -782,7 +782,7 @@ import {
 
     .metric-bar {
       height: 6px;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border-radius: var(--radius-sm);
       overflow: hidden;
     }
@@ -805,7 +805,7 @@ import {
 
     .vote-justification {
       padding: 0.75rem;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border-radius: var(--radius-md);
       margin-bottom: 1rem;
     }
@@ -835,8 +835,8 @@ import {
 
     /* Hints Section */
     .hints-section {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       padding: 1.5rem;
       margin-bottom: 1.5rem;
@@ -863,7 +863,7 @@ import {
       align-items: flex-start;
       gap: 0.75rem;
       padding: 0.75rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-lg);
       color: rgba(212, 201, 168, 0.3);
       font-size: 0.875rem;
@@ -879,7 +879,7 @@ import {
 
     /* Conflicts Section */
     .conflicts-section {
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border: 1px solid var(--color-status-error-text);
       border-radius: var(--radius-xl);
       padding: 1.5rem;
@@ -901,7 +901,7 @@ import {
     }
 
     .conflict-card {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
       overflow: hidden;
       margin-bottom: 1rem;
@@ -963,7 +963,7 @@ import {
       flex-direction: column;
       gap: 0.375rem;
       padding: 0.75rem;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border-radius: var(--radius-md);
       margin-bottom: 0.5rem;
     }
@@ -990,7 +990,7 @@ import {
 
     .conflict-suggestion {
       padding: 1rem;
-      border-top: 1px solid var(--color-text-primary);
+      border-top: 1px solid var(--color-border-primary);
     }
 
     .conflict-suggestion strong {
diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-create-workflow.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-create-workflow.component.ts
index beab14db1..328cb04ff 100644
--- a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-create-workflow.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-create-workflow.component.ts
@@ -477,8 +477,8 @@ interface EvidenceItem {
     }
 
     .workflow-container {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-2xl);
       width: 100%;
       max-width: 700px;
@@ -493,14 +493,14 @@ interface EvidenceItem {
       justify-content: space-between;
       align-items: center;
       padding: 1.25rem 1.5rem;
-      border-bottom: 1px solid var(--color-text-primary);
+      border-bottom: 1px solid var(--color-border-primary);
     }
 
     .workflow-header h2 {
       margin: 0;
       font-size: 1.25rem;
       font-weight: var(--font-weight-bold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .btn-close {
@@ -518,7 +518,7 @@ interface EvidenceItem {
     }
 
     .btn-close:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: rgba(212, 201, 168, 0.3);
     }
 
@@ -532,7 +532,7 @@ interface EvidenceItem {
       display: flex;
       justify-content: space-between;
       padding: 1.25rem 1.5rem;
-      border-bottom: 1px solid var(--color-text-primary);
+      border-bottom: 1px solid var(--color-border-primary);
       background: rgba(30, 41, 59, 0.5);
     }
 
@@ -549,7 +549,7 @@ interface EvidenceItem {
       width: 32px;
       height: 32px;
       border-radius: var(--radius-full);
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border: 2px solid var(--color-text-primary);
       display: flex;
       align-items: center;
@@ -604,7 +604,7 @@ interface EvidenceItem {
       margin: 0 0 0.5rem;
       font-size: 1.125rem;
       font-weight: var(--font-weight-semibold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .step-description {
@@ -652,7 +652,7 @@ interface EvidenceItem {
       align-items: flex-start;
       gap: 1rem;
       padding: 1rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border: 2px solid var(--color-text-primary);
       border-radius: var(--radius-xl);
       cursor: pointer;
@@ -670,12 +670,12 @@ interface EvidenceItem {
 
     .status-option--selected.status-option--affected {
       border-color: var(--color-status-error);
-      background: rgba(239, 68, 68, 0.1);
+      background: var(--color-status-error-bg);
     }
 
     .status-option--selected.status-option--not_affected {
       border-color: var(--color-status-success);
-      background: rgba(34, 197, 94, 0.1);
+      background: var(--color-status-success-bg);
     }
 
     .status-option--selected.status-option--fixed {
@@ -704,12 +704,12 @@ interface EvidenceItem {
     }
 
     .status-option--affected .status-icon {
-      background: rgba(239, 68, 68, 0.2);
+      background: var(--color-status-error-bg);
       color: var(--color-status-error-border);
     }
 
     .status-option--not_affected .status-icon {
-      background: rgba(34, 197, 94, 0.2);
+      background: var(--color-status-success-bg);
       color: var(--color-status-success-border);
     }
 
@@ -745,7 +745,7 @@ interface EvidenceItem {
     .justification-type-btn {
       display: block;
       padding: 0.875rem 1rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border: 2px solid var(--color-text-primary);
       border-radius: var(--radius-xl);
       text-align: left;
@@ -792,7 +792,7 @@ interface EvidenceItem {
       align-items: center;
       gap: 1rem;
       padding: 0.875rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
     }
 
@@ -808,10 +808,10 @@ interface EvidenceItem {
     }
 
     .evidence-icon--sbom { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); }
-    .evidence-icon--attestation { background: rgba(168, 85, 247, 0.2); color: var(--color-status-excepted-border); }
+    .evidence-icon--attestation { background: var(--color-brand-primary-20); color: var(--color-status-excepted-border); }
     .evidence-icon--reachability { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); }
     .evidence-icon--advisory { background: rgba(244, 114, 182, 0.2); color: var(--color-status-excepted-border); }
-    .evidence-icon--other { background: rgba(148, 163, 184, 0.2); color: var(--color-text-muted); }
+    .evidence-icon--other { background: var(--color-surface-tertiary); color: var(--color-text-muted); }
 
     .evidence-info {
       flex: 1;
@@ -860,7 +860,7 @@ interface EvidenceItem {
 
     .add-evidence-form {
       padding: 1rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
     }
 
@@ -873,7 +873,7 @@ interface EvidenceItem {
 
     /* Review */
     .review-card {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
       overflow: hidden;
     }
@@ -885,8 +885,8 @@ interface EvidenceItem {
       padding: 1rem 1.25rem;
     }
 
-    .review-header--affected { background: rgba(239, 68, 68, 0.15); }
-    .review-header--not_affected { background: rgba(34, 197, 94, 0.15); }
+    .review-header--affected { background: var(--color-status-error-bg); }
+    .review-header--not_affected { background: var(--color-status-success-bg); }
     .review-header--fixed { background: rgba(59, 130, 246, 0.15); }
     .review-header--under_investigation { background: rgba(245, 158, 11, 0.15); }
 
@@ -917,7 +917,7 @@ interface EvidenceItem {
       align-items: flex-start;
       gap: 1rem;
       padding: 0.625rem 0;
-      border-bottom: 1px solid var(--color-text-primary);
+      border-bottom: 1px solid var(--color-border-primary);
     }
 
     .review-row:last-child {
@@ -944,7 +944,7 @@ interface EvidenceItem {
     code.review-value {
       font-family: ui-monospace, monospace;
       font-size: 0.8125rem;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       padding: 0.25rem 0.5rem;
       border-radius: var(--radius-sm);
       word-break: break-all;
@@ -965,7 +965,7 @@ interface EvidenceItem {
 
     .evidence-chip {
       padding: 0.25rem 0.625rem;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border-radius: var(--radius-sm);
       font-size: 0.75rem;
       color: var(--color-text-muted);
@@ -996,7 +996,7 @@ interface EvidenceItem {
       display: flex;
       justify-content: space-between;
       padding: 1rem 1.5rem;
-      border-top: 1px solid var(--color-text-primary);
+      border-top: 1px solid var(--color-border-primary);
     }
 
     .footer-left,
@@ -1039,8 +1039,8 @@ interface EvidenceItem {
     }
 
     .btn--secondary {
-      background: var(--color-text-primary);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-tertiary);
+      border: 1px solid var(--color-border-primary);
       color: rgba(212, 201, 168, 0.3);
     }
 
@@ -1050,7 +1050,7 @@ interface EvidenceItem {
     }
 
     .btn--secondary:hover:not(:disabled) {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
     }
 
     .btn--ghost {
diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-dashboard.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-dashboard.component.ts
index 943efe51c..60556497a 100644
--- a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-dashboard.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-dashboard.component.ts
@@ -262,7 +262,7 @@ import {
       margin: 0.25rem 0 0;
       font-size: 1.75rem;
       font-weight: var(--font-weight-bold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .dashboard__subtitle {
@@ -318,8 +318,8 @@ import {
     }
 
     .stat-card {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       padding: 1.25rem;
       display: flex;
@@ -357,7 +357,7 @@ import {
     .stat-card__value {
       font-size: 2rem;
       font-weight: var(--font-weight-bold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
       line-height: 1;
     }
 
@@ -370,7 +370,7 @@ import {
       font-size: 0.75rem;
       color: var(--color-text-secondary);
       padding-top: 0.5rem;
-      border-top: 1px solid var(--color-text-primary);
+      border-top: 1px solid var(--color-border-primary);
     }
 
     .stat-card__trend--up { color: var(--color-status-success-border); }
@@ -378,8 +378,8 @@ import {
 
     /* Dashboard Sections */
     .dashboard__section {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       padding: 1.5rem;
       margin-bottom: 1.5rem;
@@ -415,7 +415,7 @@ import {
 
     .source-card__bar {
       height: 8px;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-sm);
       overflow: hidden;
     }
@@ -453,13 +453,13 @@ import {
       align-items: center;
       gap: 1rem;
       padding: 0.75rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-lg);
       transition: background 0.15s ease;
     }
 
     .activity-item:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
     }
 
     .activity-item__icon {
@@ -478,7 +478,7 @@ import {
 
     .activity-item__icon--created { background: var(--color-status-success-text); color: #fff; }
     .activity-item__icon--updated { background: var(--color-status-info-text); color: #fff; }
-    .activity-item__icon--superseded { background: var(--color-text-primary); color: var(--color-text-muted); }
+    .activity-item__icon--superseded { background: var(--color-surface-tertiary); color: var(--color-text-muted); }
 
     .activity-item__content {
       flex: 1;
@@ -490,7 +490,7 @@ import {
     .activity-item__cve {
       font-family: ui-monospace, monospace;
       font-weight: var(--font-weight-semibold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
       font-size: 0.875rem;
     }
 
diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-stats.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-stats.component.ts
index d323a5b78..9382a48df 100644
--- a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-stats.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-stats.component.ts
@@ -249,7 +249,7 @@ import {
     }
 
     .btn-back:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: var(--color-status-info-border);
     }
 
@@ -262,7 +262,7 @@ import {
       margin: 0;
       font-size: 1.5rem;
       font-weight: var(--font-weight-bold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .stats-header__subtitle {
@@ -304,8 +304,8 @@ import {
       align-items: center;
       gap: 1.25rem;
       padding: 1.5rem;
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-2xl);
     }
 
@@ -338,7 +338,7 @@ import {
     .summary-value {
       font-size: 2.5rem;
       font-weight: var(--font-weight-bold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
       line-height: 1;
     }
 
@@ -351,8 +351,8 @@ import {
 
     /* Distribution Section */
     .distribution-section {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-2xl);
       padding: 1.5rem;
       margin-bottom: 1.5rem;
@@ -383,7 +383,7 @@ import {
       flex-direction: column;
       align-items: center;
       padding: 1rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
       text-align: center;
     }
@@ -391,7 +391,7 @@ import {
     .status-visual {
       width: 60px;
       height: 80px;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border-radius: var(--radius-lg);
       position: relative;
       overflow: hidden;
@@ -421,7 +421,7 @@ import {
     .status-count {
       font-size: 1.5rem;
       font-weight: var(--font-weight-bold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .status-label {
@@ -440,7 +440,7 @@ import {
       flex-wrap: wrap;
       gap: 1rem;
       padding-top: 1rem;
-      border-top: 1px solid var(--color-text-primary);
+      border-top: 1px solid var(--color-border-primary);
     }
 
     .legend-item {
@@ -459,13 +459,13 @@ import {
 
     .legend-item--affected .legend-color { background: var(--color-status-error); }
     .legend-item--not_affected .legend-color { background: var(--color-status-success); }
-    .legend-item--fixed .legend-color { background: var(--color-status-info); }
+    .legend-item--fixed .legend-color { background: var(--color-btn-primary-bg); }
     .legend-item--under_investigation .legend-color { background: var(--color-status-warning); }
 
     /* Sources Section */
     .sources-section {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-2xl);
       padding: 1.5rem;
       margin-bottom: 1.5rem;
@@ -509,8 +509,8 @@ import {
     }
 
     .source-icon--vendor { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); }
-    .source-icon--cert { background: rgba(168, 85, 247, 0.2); color: var(--color-status-excepted-border); }
-    .source-icon--oss { background: rgba(34, 197, 94, 0.2); color: var(--color-status-success-border); }
+    .source-icon--cert { background: var(--color-brand-primary-20); color: var(--color-status-excepted-border); }
+    .source-icon--oss { background: var(--color-status-success-bg); color: var(--color-status-success-border); }
     .source-icon--researcher { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); }
     .source-icon--ai_generated { background: rgba(244, 114, 182, 0.2); color: var(--color-status-excepted-border); }
 
@@ -523,7 +523,7 @@ import {
     .source-bar-container {
       flex: 1;
       height: 8px;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-sm);
       overflow: hidden;
     }
@@ -550,7 +550,7 @@ import {
     .source-count {
       font-size: 0.875rem;
       font-weight: var(--font-weight-semibold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .source-percent {
@@ -560,8 +560,8 @@ import {
 
     /* Activity Section */
     .activity-section {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-2xl);
       padding: 1.5rem;
       margin-bottom: 1.5rem;
@@ -585,7 +585,7 @@ import {
       align-items: center;
       gap: 1rem;
       padding: 0.75rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
     }
 
@@ -604,7 +604,7 @@ import {
     }
 
     .activity-indicator--created {
-      background: rgba(34, 197, 94, 0.2);
+      background: var(--color-status-success-bg);
       color: var(--color-status-success-border);
     }
 
@@ -650,8 +650,8 @@ import {
 
     /* Trends Section */
     .trends-section {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-2xl);
       padding: 1.5rem;
     }
@@ -693,7 +693,7 @@ import {
 
     .trend-bar--affected { background: var(--color-status-error); }
     .trend-bar--not_affected { background: var(--color-status-success); }
-    .trend-bar--fixed { background: var(--color-status-info); }
+    .trend-bar--fixed { background: var(--color-btn-primary-bg); }
 
     .trend-date {
       font-size: 0.6875rem;
diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail-panel.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail-panel.component.ts
index 0eafdc772..216c96734 100644
--- a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail-panel.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail-panel.component.ts
@@ -317,7 +317,7 @@ import {
       width: 100%;
       max-width: 560px;
       height: 100%;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border-left: 1px solid var(--color-text-primary);
       display: flex;
       flex-direction: column;
@@ -334,7 +334,7 @@ import {
       justify-content: space-between;
       align-items: center;
       padding: 1.25rem 1.5rem;
-      border-bottom: 1px solid var(--color-text-primary);
+      border-bottom: 1px solid var(--color-border-primary);
       flex-shrink: 0;
     }
 
@@ -358,17 +358,17 @@ import {
       height: 22px;
     }
 
-    .panel-icon--affected { background: rgba(239, 68, 68, 0.2); color: var(--color-status-error-border); }
-    .panel-icon--not_affected { background: rgba(34, 197, 94, 0.2); color: var(--color-status-success-border); }
+    .panel-icon--affected { background: var(--color-status-error-bg); color: var(--color-status-error-border); }
+    .panel-icon--not_affected { background: var(--color-status-success-bg); color: var(--color-status-success-border); }
     .panel-icon--fixed { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); }
     .panel-icon--under_investigation { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); }
-    .panel-icon--default { background: rgba(148, 163, 184, 0.2); color: var(--color-text-muted); }
+    .panel-icon--default { background: var(--color-surface-tertiary); color: var(--color-text-muted); }
 
     .panel-title h2 {
       margin: 0;
       font-size: 1.125rem;
       font-weight: var(--font-weight-semibold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .panel-subtitle {
@@ -392,7 +392,7 @@ import {
     }
 
     .btn-close:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: rgba(212, 201, 168, 0.3);
     }
 
@@ -450,12 +450,12 @@ import {
     }
 
     .status-banner--affected {
-      background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(185, 28, 28, 0.2));
+      background: linear-gradient(135deg, var(--color-status-error-bg), rgba(185, 28, 28, 0.2));
       color: var(--color-status-error-border);
     }
 
     .status-banner--not_affected {
-      background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(21, 128, 61, 0.2));
+      background: linear-gradient(135deg, var(--color-status-success-bg), rgba(21, 128, 61, 0.2));
       color: var(--color-status-success-border);
     }
 
@@ -480,7 +480,7 @@ import {
       align-items: center;
       gap: 0.375rem;
       padding: 0.25rem 0.625rem;
-      background: rgba(168, 85, 247, 0.2);
+      background: var(--color-brand-primary-20);
       border-radius: var(--radius-md);
       font-size: 0.6875rem;
       color: var(--color-status-excepted-border);
@@ -493,7 +493,7 @@ import {
     }
 
     .detail-section {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-xl);
       padding: 1.25rem;
     }
@@ -543,7 +543,7 @@ import {
     .info-value--code {
       font-family: ui-monospace, monospace;
       font-size: 0.8125rem;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       padding: 0.5rem;
       border-radius: var(--radius-md);
       word-break: break-all;
@@ -556,7 +556,7 @@ import {
     .type-badge {
       display: inline-block;
       padding: 0.25rem 0.75rem;
-      background: rgba(168, 85, 247, 0.2);
+      background: var(--color-brand-primary-20);
       border-radius: var(--radius-md);
       font-size: 0.75rem;
       font-weight: var(--font-weight-medium);
@@ -574,7 +574,7 @@ import {
       align-items: center;
       gap: 1rem;
       padding: 0.75rem;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border-radius: var(--radius-xl);
     }
 
@@ -590,8 +590,8 @@ import {
     }
 
     .issuer-icon--vendor { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); }
-    .issuer-icon--cert { background: rgba(168, 85, 247, 0.2); color: var(--color-status-excepted-border); }
-    .issuer-icon--oss { background: rgba(34, 197, 94, 0.2); color: var(--color-status-success-border); }
+    .issuer-icon--cert { background: var(--color-brand-primary-20); color: var(--color-status-excepted-border); }
+    .issuer-icon--oss { background: var(--color-status-success-bg); color: var(--color-status-success-border); }
     .issuer-icon--researcher { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); }
     .issuer-icon--ai_generated { background: rgba(244, 114, 182, 0.2); color: var(--color-status-excepted-border); }
 
@@ -695,7 +695,7 @@ import {
       align-items: center;
       gap: 0.375rem;
       padding: 0.375rem 0.75rem;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border-radius: var(--radius-md);
       font-size: 0.75rem;
       color: var(--color-text-muted);
@@ -721,8 +721,8 @@ import {
       align-items: center;
       gap: 1rem;
       padding: 0.875rem;
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       text-decoration: none;
       transition: all 0.15s ease;
@@ -748,9 +748,9 @@ import {
     }
 
     .evidence-icon--sbom { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); }
-    .evidence-icon--attestation { background: rgba(168, 85, 247, 0.2); color: var(--color-status-excepted-border); }
+    .evidence-icon--attestation { background: var(--color-brand-primary-20); color: var(--color-status-excepted-border); }
     .evidence-icon--reachability { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); }
-    .evidence-icon--other { background: rgba(148, 163, 184, 0.2); color: var(--color-text-muted); }
+    .evidence-icon--other { background: var(--color-surface-tertiary); color: var(--color-text-muted); }
 
     .evidence-content {
       flex: 1;
@@ -778,7 +778,7 @@ import {
 
     .detail-section--meta {
       background: transparent;
-      border: 1px dashed var(--color-text-primary);
+      border: 1px dashed var(--color-border-primary);
       padding: 1rem;
     }
 
@@ -787,7 +787,7 @@ import {
       justify-content: space-between;
       align-items: center;
       padding: 0.5rem 0;
-      border-bottom: 1px solid var(--color-text-primary);
+      border-bottom: 1px solid var(--color-border-primary);
     }
 
     .meta-row:last-child {
@@ -807,7 +807,7 @@ import {
     code.meta-value {
       font-family: ui-monospace, monospace;
       font-size: 0.6875rem;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       padding: 0.125rem 0.375rem;
       border-radius: var(--radius-sm);
     }
@@ -839,7 +839,7 @@ import {
 
     .error-state h3 {
       margin: 0 0 0.5rem;
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .error-state p {
@@ -849,7 +849,7 @@ import {
 
     .panel-footer {
       padding: 1rem 1.5rem;
-      border-top: 1px solid var(--color-text-primary);
+      border-top: 1px solid var(--color-border-primary);
       flex-shrink: 0;
     }
 
@@ -888,13 +888,13 @@ import {
     }
 
     .btn--secondary {
-      background: var(--color-text-primary);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-tertiary);
+      border: 1px solid var(--color-border-primary);
       color: rgba(212, 201, 168, 0.3);
     }
 
     .btn--secondary:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
     }
 
     .btn--ghost {
diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail.component.ts
index 7fd7eae60..0c802257f 100644
--- a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail.component.ts
@@ -288,7 +288,7 @@ import {
 
     .error-state h3 {
       margin: 0 0 0.5rem;
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .error-state p {
@@ -320,7 +320,7 @@ import {
     }
 
     .btn-back:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: var(--color-status-info-border);
     }
 
@@ -340,7 +340,7 @@ import {
       margin: 0;
       font-size: 1.75rem;
       font-weight: var(--font-weight-bold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
       font-family: ui-monospace, monospace;
     }
 
@@ -391,8 +391,8 @@ import {
 
     /* Detail Cards */
     .detail-card {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       padding: 1.5rem;
       margin-bottom: 1.5rem;
@@ -429,7 +429,7 @@ import {
       font-family: ui-monospace, monospace;
       font-size: 0.875rem;
       color: rgba(212, 201, 168, 0.3);
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       padding: 0.5rem 0.75rem;
       border-radius: var(--radius-md);
       word-break: break-all;
@@ -467,7 +467,7 @@ import {
     .justification-section {
       margin-top: 1.5rem;
       padding-top: 1.5rem;
-      border-top: 1px solid var(--color-text-primary);
+      border-top: 1px solid var(--color-border-primary);
     }
 
     .justification-section label {
@@ -481,7 +481,7 @@ import {
     }
 
     .justification-text {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       padding: 1rem;
       border-radius: var(--radius-lg);
       color: rgba(212, 201, 168, 0.3);
@@ -501,7 +501,7 @@ import {
       align-items: center;
       gap: 1rem;
       padding: 0.875rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-lg);
     }
 
@@ -554,14 +554,14 @@ import {
       display: flex;
       align-items: center;
       justify-content: center;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       border-radius: var(--radius-md);
       color: var(--color-status-info-border);
       transition: all 0.15s ease;
     }
 
     .evidence-item__link:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: var(--color-status-info-border);
     }
 
@@ -601,13 +601,13 @@ import {
     }
 
     .btn--secondary {
-      background: var(--color-text-primary);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-tertiary);
+      border: 1px solid var(--color-border-primary);
       color: rgba(212, 201, 168, 0.3);
     }
 
     .btn--secondary:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
     }
 
     .btn--ai {
diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-search.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-search.component.ts
index 8b76b5697..3c8efced4 100644
--- a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-search.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-search.component.ts
@@ -262,7 +262,7 @@ import {
     }
 
     .btn-back:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: var(--color-status-info-border);
     }
 
@@ -275,7 +275,7 @@ import {
       margin: 0;
       font-size: 1.5rem;
       font-weight: var(--font-weight-bold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .search-header__subtitle {
@@ -286,8 +286,8 @@ import {
 
     /* Filters */
     .filters-panel {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       padding: 1.25rem;
       margin-bottom: 1.5rem;
@@ -357,8 +357,8 @@ import {
 
     /* Results */
     .results-panel {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       overflow: hidden;
     }
@@ -368,7 +368,7 @@ import {
       justify-content: space-between;
       align-items: center;
       padding: 1rem 1.25rem;
-      border-bottom: 1px solid var(--color-text-primary);
+      border-bottom: 1px solid var(--color-border-primary);
     }
 
     .results-count {
@@ -384,8 +384,8 @@ import {
 
     .btn-pagination {
       padding: 0.375rem 0.75rem;
-      background: var(--color-text-primary);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-tertiary);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-sm);
       color: rgba(212, 201, 168, 0.3);
       font-size: 0.75rem;
@@ -394,7 +394,7 @@ import {
     }
 
     .btn-pagination:hover:not(:disabled) {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
     }
 
     .btn-pagination:disabled {
@@ -415,7 +415,7 @@ import {
 
     .statements-table th {
       padding: 0.75rem 1rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       font-size: 0.75rem;
       font-weight: var(--font-weight-semibold);
       color: var(--color-text-muted);
@@ -426,7 +426,7 @@ import {
 
     .statements-table td {
       padding: 0.875rem 1rem;
-      border-bottom: 1px solid var(--color-text-primary);
+      border-bottom: 1px solid var(--color-border-primary);
       font-size: 0.875rem;
       color: rgba(212, 201, 168, 0.3);
     }
@@ -437,7 +437,7 @@ import {
     }
 
     .statements-table tr:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
     }
 
     .statements-table tr.selected {
@@ -514,8 +514,8 @@ import {
       display: flex;
       align-items: center;
       justify-content: center;
-      background: var(--color-text-primary);
-      border: 1px solid var(--color-text-primary);
+      background: var(--color-surface-tertiary);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-md);
       color: var(--color-text-muted);
       cursor: pointer;
@@ -523,7 +523,7 @@ import {
     }
 
     .btn-action:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: rgba(212, 201, 168, 0.3);
     }
 
@@ -555,7 +555,7 @@ import {
       width: 64px;
       height: 64px;
       border-radius: var(--radius-2xl);
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       display: flex;
       align-items: center;
       justify-content: center;