diff --git a/src/Web/StellaOps.Web/src/app/features/policy-decisioning/policy-decisioning-audit-shell.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-decisioning/policy-decisioning-audit-shell.component.ts
index 456997c69..2b640e6f2 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-decisioning/policy-decisioning-audit-shell.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-decisioning/policy-decisioning-audit-shell.component.ts
@@ -33,21 +33,9 @@ const PAGE_TABS: readonly StellaPageTab[] = [
   imports: [CommonModule, RouterOutlet, StellaPageTabsComponent],
   template: `
     <section class="policy-audit-shell" data-testid="policy-audit-shell">
-      <header class="section-header">
-        <div>
-          <p class="section-header__eyebrow">Audit</p>
-          <h2>Policy and VEX audit now share the same owner shell</h2>
-          <p>
-            Review mutable policy and VEX actions after the cutover without routing operators back
-            into retired sibling products.
-          </p>
-        </div>
-      </header>
-
       <stella-page-tabs
         [tabs]="pageTabs"
         [activeTab]="activeSubview()"
-        urlParam="tab"
         ariaLabel="Audit tabs"
         (tabChange)="onTabChange($event)"
       >
@@ -61,31 +49,6 @@ const PAGE_TABS: readonly StellaPageTab[] = [
       gap: 0.85rem;
     }
 
-    .section-header {
-      border: 1px solid var(--color-border-primary);
-      border-radius: var(--radius-lg);
-      background: var(--color-surface-primary);
-      padding: 1rem;
-    }
-
-    .section-header__eyebrow {
-      margin: 0 0 0.25rem;
-      color: var(--color-status-info);
-      font-size: 0.78rem;
-      font-weight: 700;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-    }
-
-    .section-header h2 {
-      margin: 0;
-      color: var(--color-text-heading);
-    }
-
-    .section-header p {
-      margin: 0.35rem 0 0;
-      color: var(--color-text-secondary);
-    }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-decisioning/policy-decisioning-vex-shell.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-decisioning/policy-decisioning-vex-shell.component.ts
index fec8b70ea..f1b3424e6 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-decisioning/policy-decisioning-vex-shell.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-decisioning/policy-decisioning-vex-shell.component.ts
@@ -46,21 +46,9 @@ const PAGE_TABS: readonly StellaPageTab[] = [
   imports: [CommonModule, RouterOutlet, StellaPageTabsComponent],
   template: `
     <section class="policy-vex-shell" data-testid="policy-vex-shell">
-      <header class="section-header">
-        <div>
-          <p class="section-header__eyebrow">VEX & Exceptions</p>
-          <h2>Mutable VEX actions now live in Decisioning Studio</h2>
-          <p>
-            Search statements, resolve consensus, open exception queues, and keep release-context
-            deep links inside the same policy shell.
-          </p>
-        </div>
-      </header>
-
       <stella-page-tabs
         [tabs]="pageTabs"
         [activeTab]="activeSubview()"
-        urlParam="tab"
         ariaLabel="VEX tabs"
         (tabChange)="onTabChange($event)"
       >
@@ -74,31 +62,6 @@ const PAGE_TABS: readonly StellaPageTab[] = [
       gap: 0.85rem;
     }
 
-    .section-header {
-      border: 1px solid var(--color-border-primary);
-      border-radius: var(--radius-lg);
-      background: var(--color-surface-primary);
-      padding: 1rem;
-    }
-
-    .section-header__eyebrow {
-      margin: 0 0 0.25rem;
-      color: var(--color-status-warning);
-      font-size: 0.78rem;
-      font-weight: 700;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-    }
-
-    .section-header h2 {
-      margin: 0;
-      color: var(--color-text-heading);
-    }
-
-    .section-header p {
-      margin: 0.35rem 0 0;
-      color: var(--color-text-secondary);
-    }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/batch-evaluation.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/batch-evaluation.component.ts
index aac40997e..e999e5c13 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/batch-evaluation.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/batch-evaluation.component.ts
@@ -448,7 +448,7 @@ import {
 
     .batch-evaluation__header h1 {
       margin: 0.25rem 0 0;
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
       font-size: 1.5rem;
     }
 
@@ -465,7 +465,7 @@ import {
     .tab-btn {
       padding: 0.6rem 1.25rem;
       background: transparent;
-      border: 1px solid var(--color-text-primary);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-lg);
       color: var(--color-text-muted);
       font-weight: var(--font-weight-medium);
@@ -474,14 +474,14 @@ import {
     }
 
     .tab-btn:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: rgba(212, 201, 168, 0.3);
     }
 
     .tab-btn--active {
       background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), transparent);
       border-color: var(--color-status-success);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .tab-content {
@@ -494,8 +494,8 @@ import {
     }
 
     .evaluation-form {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-heading);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       padding: 1.5rem;
       margin-bottom: 1.5rem;
@@ -511,7 +511,7 @@ import {
 
     .form-section h3 {
       margin: 0 0 0.75rem;
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
       font-size: 1rem;
     }
 
@@ -546,7 +546,7 @@ import {
     .form-field input[type='number'] {
       padding: 0.5rem 0.75rem;
       background: var(--color-surface-inverse);
-      border: 1px solid var(--color-text-primary);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-md);
       color: rgba(212, 201, 168, 0.3);
     }
@@ -576,7 +576,7 @@ import {
     .source-tab {
       padding: 0.5rem 1rem;
       background: transparent;
-      border: 1px solid var(--color-text-primary);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-md);
       color: var(--color-text-muted);
       font-size: 0.85rem;
@@ -585,7 +585,7 @@ import {
     }
 
     .source-tab:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: rgba(212, 201, 168, 0.3);
     }
 
@@ -597,7 +597,7 @@ import {
 
     .available-artifacts {
       background: var(--color-surface-inverse);
-      border: 1px solid var(--color-text-primary);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-lg);
       overflow: hidden;
     }
@@ -606,15 +606,15 @@ import {
       display: flex;
       gap: 0.75rem;
       padding: 0.75rem;
-      background: var(--color-text-heading);
-      border-bottom: 1px solid var(--color-text-heading);
+      background: var(--color-surface-elevated);
+      border-bottom: 1px solid var(--color-border-primary);
     }
 
     .search-input {
       flex: 1;
       padding: 0.5rem 0.75rem;
       background: var(--color-surface-inverse);
-      border: 1px solid var(--color-text-primary);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-md);
       color: rgba(212, 201, 168, 0.3);
     }
@@ -637,7 +637,7 @@ import {
     }
 
     .btn--secondary {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: rgba(212, 201, 168, 0.3);
     }
 
@@ -649,7 +649,7 @@ import {
     .btn--ghost {
       background: transparent;
       color: var(--color-text-muted);
-      border: 1px solid var(--color-text-primary);
+      border: 1px solid var(--color-border-primary);
     }
 
     .btn--sm {
@@ -688,7 +688,7 @@ import {
     }
 
     .artifact-option:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
     }
 
     .artifact-option--selected {
@@ -733,7 +733,7 @@ import {
       width: 100%;
       padding: 0.5rem 0.75rem;
       background: var(--color-surface-inverse);
-      border: 1px solid var(--color-text-primary);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-md);
       color: rgba(212, 201, 168, 0.3);
       margin-bottom: 0.5rem;
@@ -750,7 +750,7 @@ import {
       align-items: center;
       gap: 0.25rem;
       padding: 0.2rem 0.5rem;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: var(--color-text-muted);
       border-radius: var(--radius-sm);
       font-size: 0.8rem;
@@ -773,13 +773,13 @@ import {
       display: flex;
       justify-content: flex-end;
       padding-top: 1rem;
-      border-top: 1px solid var(--color-text-heading);
+      border-top: 1px solid var(--color-border-primary);
       margin-top: 1.5rem;
     }
 
     .live-results {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-heading);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       padding: 1.5rem;
     }
@@ -793,7 +793,7 @@ import {
 
     .results-header h3 {
       margin: 0;
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .progress-info {
@@ -821,12 +821,12 @@ import {
     }
 
     .status-badge[data-status='completed'] {
-      background: rgba(34, 197, 94, 0.15);
+      background: var(--color-status-success-bg);
       color: var(--color-status-success-border);
     }
 
     .status-badge[data-status='failed'] {
-      background: rgba(239, 68, 68, 0.15);
+      background: var(--color-status-error-bg);
       color: var(--color-status-error-border);
     }
 
@@ -836,7 +836,7 @@ import {
     }
 
     .status-badge[data-status='pending'] {
-      background: rgba(148, 163, 184, 0.15);
+      background: var(--color-surface-tertiary);
       color: var(--color-text-muted);
     }
 
@@ -850,7 +850,7 @@ import {
     .progress-bar {
       flex: 1;
       height: 8px;
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       border-radius: var(--radius-sm);
       overflow: hidden;
     }
@@ -979,7 +979,7 @@ import {
     }
 
     .finding-count--critical {
-      background: rgba(239, 68, 68, 0.15);
+      background: var(--color-status-error-bg);
       color: var(--color-status-error-border);
     }
 
@@ -1009,7 +1009,7 @@ import {
       justify-content: center;
       gap: 1rem;
       padding-top: 1rem;
-      border-top: 1px solid var(--color-text-heading);
+      border-top: 1px solid var(--color-border-primary);
     }
 
     .batch-complete p {
@@ -1030,8 +1030,8 @@ import {
 
     .history-filters select {
       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);
     }
@@ -1044,8 +1044,8 @@ import {
 
     .history-card {
       padding: 1rem;
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-heading);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       cursor: pointer;
       transition: all 150ms ease;
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/conflict-detection.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/conflict-detection.component.ts
index b22e16f8e..5af5427d6 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/conflict-detection.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/conflict-detection.component.ts
@@ -361,7 +361,7 @@ import {
 
     .conflict-detection__header h1 {
       margin: 0.25rem 0 0;
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
       font-size: 1.5rem;
     }
 
@@ -393,7 +393,7 @@ import {
     }
 
     .btn--secondary {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: rgba(212, 201, 168, 0.3);
     }
 
@@ -405,7 +405,7 @@ import {
     .btn--ghost {
       background: transparent;
       color: var(--color-text-muted);
-      border: 1px solid var(--color-text-primary);
+      border: 1px solid var(--color-border-primary);
     }
 
     .btn:hover:not(:disabled) {
@@ -419,15 +419,15 @@ import {
 
     .policy-selection {
       padding: 1.5rem;
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-heading);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       margin-bottom: 1.5rem;
     }
 
     .policy-selection h3 {
       margin: 0 0 0.25rem;
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
       font-size: 1rem;
     }
 
@@ -449,7 +449,7 @@ import {
       gap: 0.75rem;
       padding: 0.75rem 1rem;
       background: var(--color-surface-inverse);
-      border: 1px solid var(--color-text-primary);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-lg);
       cursor: pointer;
       transition: all 150ms ease;
@@ -497,7 +497,7 @@ import {
 
     .results-summary h3 {
       margin: 0 0 1rem;
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .summary-stats {
@@ -511,15 +511,15 @@ import {
       flex-direction: column;
       align-items: center;
       padding: 1rem;
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-heading);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-lg);
     }
 
     .stat-value {
       font-size: 1.75rem;
       font-weight: var(--font-weight-bold);
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .stat-label {
@@ -546,8 +546,8 @@ import {
     .conflict-filters {
       margin-bottom: 1.5rem;
       padding: 1rem;
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-heading);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
     }
 
@@ -571,8 +571,8 @@ import {
     }
 
     .conflict-card {
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-heading);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       overflow: hidden;
     }
@@ -619,7 +619,7 @@ import {
     }
 
     .severity-badge[data-severity='critical'] {
-      background: rgba(239, 68, 68, 0.15);
+      background: var(--color-status-error-bg);
       color: var(--color-status-error-border);
     }
 
@@ -645,7 +645,7 @@ import {
 
     .resolved-badge {
       padding: 0.2rem 0.5rem;
-      background: rgba(34, 197, 94, 0.15);
+      background: var(--color-status-success-bg);
       color: var(--color-status-success-border);
       border-radius: var(--radius-sm);
       font-size: 0.7rem;
@@ -727,7 +727,7 @@ import {
 
     .conflict-details {
       padding: 1rem;
-      border-top: 1px solid var(--color-text-heading);
+      border-top: 1px solid var(--color-border-primary);
       background: var(--color-surface-inverse);
     }
 
@@ -740,8 +740,8 @@ import {
 
     .value-panel {
       padding: 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-lg);
     }
 
@@ -772,7 +772,7 @@ import {
 
     .suggestions-section h4 {
       margin: 0 0 0.75rem;
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
       font-size: 0.9rem;
     }
 
@@ -784,8 +784,8 @@ import {
 
     .suggestion-card {
       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-lg);
       cursor: pointer;
       transition: all 150ms ease;
@@ -825,12 +825,12 @@ import {
     }
 
     .action-badge[data-action='merge'] {
-      background: rgba(34, 197, 94, 0.15);
+      background: var(--color-status-success-bg);
       color: var(--color-status-success-border);
     }
 
     .action-badge[data-action='remove'] {
-      background: rgba(239, 68, 68, 0.15);
+      background: var(--color-status-error-bg);
       color: var(--color-status-error-border);
     }
 
@@ -884,7 +884,7 @@ import {
 
     .resolution-info {
       padding: 0.75rem;
-      background: rgba(34, 197, 94, 0.1);
+      background: var(--color-status-success-bg);
       border-radius: var(--radius-lg);
     }
 
@@ -908,8 +908,8 @@ import {
       justify-content: space-between;
       align-items: center;
       padding: 1rem 1.5rem;
-      background: rgba(34, 197, 94, 0.1);
-      border: 1px solid rgba(34, 197, 94, 0.3);
+      background: var(--color-status-success-bg);
+      border: 1px solid var(--color-status-success-border);
       border-radius: var(--radius-xl);
       margin-bottom: 1.5rem;
     }
@@ -953,7 +953,7 @@ import {
     .spinner {
       width: 48px;
       height: 48px;
-      border: 4px solid var(--color-text-primary);
+      border: 4px solid var(--color-border-primary);
       border-top-color: var(--color-status-warning);
       border-radius: var(--radius-full);
       animation: spin 1s linear infinite;
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/coverage-fixture.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/coverage-fixture.component.ts
index 85a8fb096..0e5ef95ac 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/coverage-fixture.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/coverage-fixture.component.ts
@@ -278,7 +278,7 @@ import {
 
       .coverage__header h1 {
         margin: 0.25rem 0 0;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1.5rem;
       }
 
@@ -307,7 +307,7 @@ import {
       }
 
       .btn--secondary {
-        background: var(--color-text-primary);
+        background: var(--color-surface-tertiary);
         color: rgba(212, 201, 168, 0.3);
       }
 
@@ -326,8 +326,8 @@ import {
         gap: 2rem;
         align-items: center;
         padding: 1.5rem;
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         margin-bottom: 1.5rem;
       }
@@ -398,7 +398,7 @@ import {
       .summary-card__value {
         font-size: 1.5rem;
         font-weight: var(--font-weight-bold);
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
       }
 
       .summary-card--success .summary-card__value {
@@ -443,8 +443,8 @@ import {
       }
 
       .coverage__rules {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
         margin-bottom: 1.5rem;
@@ -459,7 +459,7 @@ import {
 
       .rules-header h3 {
         margin: 0;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1rem;
       }
 
@@ -471,7 +471,7 @@ import {
       .filter-btn {
         padding: 0.35rem 0.75rem;
         background: transparent;
-        border: 1px solid var(--color-text-primary);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-md);
         color: var(--color-text-muted);
         font-size: 0.8rem;
@@ -498,7 +498,7 @@ import {
       .rule-card {
         padding: 1rem;
         background: var(--color-surface-inverse);
-        border: 1px solid var(--color-text-heading);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-lg);
         border-left-width: 4px;
       }
@@ -523,7 +523,7 @@ import {
       }
 
       .rule-name {
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-weight: var(--font-weight-semibold);
       }
 
@@ -543,14 +543,14 @@ import {
       .coverage-bar {
         flex: 1;
         height: 8px;
-        background: var(--color-text-heading);
+        background: var(--color-surface-elevated);
         border-radius: var(--radius-sm);
         overflow: hidden;
       }
 
       .coverage-bar__fill {
         height: 100%;
-        background: var(--color-text-secondary);
+        background: var(--color-surface-tertiary);
         border-radius: var(--radius-sm);
         transition: width 300ms ease;
       }
@@ -595,21 +595,21 @@ import {
       }
 
       .coverage__tests {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
       }
 
       .coverage__tests h3 {
         margin: 0 0 1rem;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1rem;
       }
 
       .tests-table {
         overflow-x: auto;
-        border: 1px solid var(--color-text-heading);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-lg);
       }
 
@@ -622,7 +622,7 @@ import {
       td {
         padding: 0.75rem;
         text-align: left;
-        border-bottom: 1px solid var(--color-text-heading);
+        border-bottom: 1px solid var(--color-border-primary);
       }
 
       th {
@@ -639,11 +639,11 @@ import {
       }
 
       .row--passed {
-        background: rgba(34, 197, 94, 0.05);
+        background: var(--color-status-success-bg);
       }
 
       .row--failed {
-        background: rgba(239, 68, 68, 0.05);
+        background: var(--color-status-error-bg);
       }
 
       .test-status {
@@ -655,12 +655,12 @@ import {
       }
 
       .test-status[data-status='passed'] {
-        background: rgba(34, 197, 94, 0.15);
+        background: var(--color-status-success-bg);
         color: var(--color-status-success-border);
       }
 
       .test-status[data-status='failed'] {
-        background: rgba(239, 68, 68, 0.15);
+        background: var(--color-status-error-bg);
         color: var(--color-status-error-border);
       }
 
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/effective-policy-viewer.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/effective-policy-viewer.component.ts
index 3048edbc6..6b3e6229f 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/effective-policy-viewer.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/effective-policy-viewer.component.ts
@@ -184,7 +184,7 @@ import {
 
       .effective-policy__header h1 {
         margin: 0.25rem 0 0;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1.5rem;
       }
 
@@ -220,8 +220,8 @@ import {
       .effective-policy__filters {
         margin-bottom: 1.5rem;
         padding: 1rem;
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
       }
 
@@ -244,8 +244,8 @@ import {
       }
 
       .resource-card {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
       }
@@ -256,7 +256,7 @@ import {
         align-items: flex-start;
         margin-bottom: 1rem;
         padding-bottom: 1rem;
-        border-bottom: 1px solid var(--color-text-heading);
+        border-bottom: 1px solid var(--color-border-primary);
       }
 
       .resource-info {
@@ -271,7 +271,7 @@ import {
         border-radius: var(--radius-sm);
         font-size: 0.7rem;
         font-weight: var(--font-weight-bold);
-        background: var(--color-text-heading);
+        background: var(--color-surface-elevated);
         color: var(--color-text-muted);
       }
 
@@ -286,7 +286,7 @@ import {
       }
 
       .resource-type[data-type='tenant'] {
-        background: rgba(34, 197, 94, 0.15);
+        background: var(--color-status-success-bg);
         color: var(--color-status-success-border);
       }
 
@@ -344,7 +344,7 @@ import {
         width: 24px;
         height: 24px;
         border-radius: var(--radius-full);
-        background: var(--color-text-primary);
+        background: var(--color-surface-tertiary);
         color: rgba(212, 201, 168, 0.3);
         font-size: 0.75rem;
         font-weight: var(--font-weight-semibold);
@@ -363,7 +363,7 @@ import {
       }
 
       .policy-name {
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-weight: var(--font-weight-medium);
       }
 
@@ -376,12 +376,12 @@ import {
         padding: 0.15rem 0.4rem;
         border-radius: var(--radius-sm);
         font-size: 0.7rem;
-        background: var(--color-text-heading);
+        background: var(--color-surface-elevated);
         color: var(--color-text-muted);
       }
 
       .policy-scope[data-scope='tenant'] {
-        background: rgba(34, 197, 94, 0.15);
+        background: var(--color-status-success-bg);
         color: var(--color-status-success-border);
       }
 
@@ -418,7 +418,7 @@ import {
         gap: 0.5rem;
         margin-top: 1rem;
         padding-top: 1rem;
-        border-top: 1px solid var(--color-text-heading);
+        border-top: 1px solid var(--color-border-primary);
       }
 
       .merged-label {
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-audit-log.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-audit-log.component.ts
index 18f386766..77b3f2aec 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-audit-log.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-audit-log.component.ts
@@ -210,7 +210,7 @@ import {
 
       .audit-log__header h1 {
         margin: 0.25rem 0 0;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1.5rem;
       }
 
@@ -234,7 +234,7 @@ import {
       }
 
       .btn--secondary {
-        background: var(--color-text-primary);
+        background: var(--color-surface-tertiary);
         color: rgba(212, 201, 168, 0.3);
       }
 
@@ -250,8 +250,8 @@ import {
       .audit-log__filters {
         margin-bottom: 1.5rem;
         padding: 1rem;
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
       }
 
@@ -320,7 +320,7 @@ import {
         width: 2px;
         flex: 1;
         min-height: 20px;
-        background: var(--color-text-heading);
+        background: var(--color-surface-elevated);
       }
 
       .audit-entry:last-child .indicator-line {
@@ -330,8 +330,8 @@ import {
       .audit-entry__content {
         flex: 1;
         padding: 1rem;
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         margin-bottom: 1rem;
       }
@@ -352,7 +352,7 @@ import {
       }
 
       .audit-action[data-action='created'] {
-        background: rgba(34, 197, 94, 0.15);
+        background: var(--color-status-success-bg);
         color: var(--color-status-success-border);
       }
 
@@ -376,7 +376,7 @@ import {
 
       .audit-action[data-action='deleted'],
       .audit-action[data-action='rejected'] {
-        background: rgba(239, 68, 68, 0.15);
+        background: var(--color-status-error-bg);
         color: var(--color-status-error-border);
       }
 
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-diff-viewer.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-diff-viewer.component.ts
index 0a648ba4c..5ce19a23e 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-diff-viewer.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-diff-viewer.component.ts
@@ -192,7 +192,7 @@ import {
 
       .diff-viewer__header h1 {
         margin: 0.25rem 0 0;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1.5rem;
       }
 
@@ -215,12 +215,12 @@ import {
       }
 
       .version-badge--from {
-        background: rgba(239, 68, 68, 0.15);
+        background: var(--color-status-error-bg);
         color: var(--color-status-error-border);
       }
 
       .version-badge--to {
-        background: rgba(34, 197, 94, 0.15);
+        background: var(--color-status-success-bg);
         color: var(--color-status-success-border);
       }
 
@@ -240,15 +240,15 @@ import {
         flex-direction: column;
         gap: 0.25rem;
         padding: 1rem;
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
       }
 
       .stat-value {
         font-size: 1.5rem;
         font-weight: var(--font-weight-bold);
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
       }
 
       .stat-card--add .stat-value {
@@ -271,8 +271,8 @@ import {
       }
 
       .file-diff {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         overflow: hidden;
       }
@@ -300,7 +300,7 @@ import {
       }
 
       .file-diff__header:hover {
-        background: var(--color-text-primary);
+        background: var(--color-surface-tertiary);
       }
 
       .file-info {
@@ -321,12 +321,12 @@ import {
       }
 
       .file-change-type[data-type='added'] {
-        background: rgba(34, 197, 94, 0.15);
+        background: var(--color-status-success-bg);
         color: var(--color-status-success-border);
       }
 
       .file-change-type[data-type='removed'] {
-        background: rgba(239, 68, 68, 0.15);
+        background: var(--color-status-error-bg);
         color: var(--color-status-error-border);
       }
 
@@ -362,7 +362,7 @@ import {
       }
 
       .file-diff__content {
-        border-top: 1px solid var(--color-text-heading);
+        border-top: 1px solid var(--color-border-primary);
       }
 
       .binary-notice {
@@ -373,7 +373,7 @@ import {
       }
 
       .diff-hunk {
-        border-bottom: 1px solid var(--color-text-heading);
+        border-bottom: 1px solid var(--color-border-primary);
       }
 
       .diff-hunk:last-child {
@@ -399,11 +399,11 @@ import {
       }
 
       .diff-line--added {
-        background: rgba(34, 197, 94, 0.1);
+        background: var(--color-status-success-bg);
       }
 
       .diff-line--removed {
-        background: rgba(239, 68, 68, 0.1);
+        background: var(--color-status-error-bg);
       }
 
       .line-number {
@@ -413,15 +413,15 @@ import {
         text-align: right;
         color: var(--color-text-secondary);
         user-select: none;
-        border-right: 1px solid var(--color-text-heading);
+        border-right: 1px solid var(--color-border-primary);
       }
 
       .line-number--old {
-        background: rgba(239, 68, 68, 0.05);
+        background: var(--color-status-error-bg);
       }
 
       .line-number--new {
-        background: rgba(34, 197, 94, 0.05);
+        background: var(--color-status-success-bg);
       }
 
       .line-indicator {
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-exception.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-exception.component.ts
index faf9c4494..b900c9c75 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-exception.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-exception.component.ts
@@ -271,7 +271,7 @@ import {
 
       .policy-exception__header h1 {
         margin: 0.25rem 0 0;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1.5rem;
       }
 
@@ -295,7 +295,7 @@ import {
       }
 
       .btn--secondary {
-        background: var(--color-text-primary);
+        background: var(--color-surface-tertiary);
         color: rgba(212, 201, 168, 0.3);
       }
 
@@ -314,8 +314,8 @@ import {
       }
 
       .policy-exception__form {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1.5rem;
         margin-bottom: 1.5rem;
@@ -323,7 +323,7 @@ import {
 
       .policy-exception__form h3 {
         margin: 0 0 1rem;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
       }
 
       .form-row {
@@ -335,7 +335,7 @@ import {
       .form-section {
         margin-top: 1rem;
         padding-top: 1rem;
-        border-top: 1px solid var(--color-text-heading);
+        border-top: 1px solid var(--color-border-primary);
       }
 
       .form-section h4 {
@@ -361,7 +361,7 @@ import {
       .field textarea {
         padding: 0.5rem 0.75rem;
         background: var(--color-surface-inverse);
-        border: 1px solid var(--color-text-primary);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-md);
         color: rgba(212, 201, 168, 0.3);
         font-family: inherit;
@@ -394,7 +394,7 @@ import {
       .filter-btn {
         padding: 0.4rem 0.85rem;
         background: transparent;
-        border: 1px solid var(--color-text-primary);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-md);
         color: var(--color-text-muted);
         font-size: 0.85rem;
@@ -419,8 +419,8 @@ import {
       }
 
       .exception-card {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
         border-left-width: 4px;
@@ -470,7 +470,7 @@ import {
       }
 
       .exception-status[data-status='approved'] {
-        background: rgba(34, 197, 94, 0.15);
+        background: var(--color-status-success-bg);
         color: var(--color-status-success-border);
       }
 
@@ -480,7 +480,7 @@ import {
       }
 
       .exception-status[data-status='rejected'] {
-        background: rgba(239, 68, 68, 0.15);
+        background: var(--color-status-error-bg);
         color: var(--color-status-error-border);
       }
 
@@ -495,12 +495,12 @@ import {
         border-radius: var(--radius-sm);
         font-size: 0.75rem;
         font-weight: var(--font-weight-semibold);
-        background: var(--color-text-heading);
+        background: var(--color-surface-elevated);
         color: var(--color-text-muted);
       }
 
       .exception-severity[data-severity='critical'] {
-        background: rgba(239, 68, 68, 0.15);
+        background: var(--color-status-error-bg);
         color: var(--color-status-error-border);
       }
 
@@ -516,7 +516,7 @@ import {
 
       .exception-name {
         margin: 0;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1rem;
       }
 
@@ -536,7 +536,7 @@ import {
       }
 
       .action-btn--revoke:hover {
-        background: rgba(239, 68, 68, 0.1);
+        background: var(--color-status-error-bg);
       }
 
       .exception-description {
@@ -604,7 +604,7 @@ import {
 
       .tag {
         padding: 0.2rem 0.5rem;
-        background: var(--color-text-heading);
+        background: var(--color-surface-elevated);
         border-radius: var(--radius-sm);
         color: var(--color-text-muted);
         font-size: 0.75rem;
@@ -633,8 +633,8 @@ import {
 
       .revoke-dialog__content {
         position: relative;
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1.5rem;
         max-width: 500px;
@@ -643,7 +643,7 @@ import {
 
       .revoke-dialog__content h3 {
         margin: 0 0 0.5rem;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
       }
 
       .revoke-dialog__content > p {
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-lint.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-lint.component.ts
index e888a1d74..4296e1303 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-lint.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-lint.component.ts
@@ -249,7 +249,7 @@ import {
 
       .policy-lint__header h1 {
         margin: 0.25rem 0 0;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1.5rem;
       }
 
@@ -290,19 +290,19 @@ import {
         display: flex;
         gap: 1rem;
         padding: 1rem;
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
       }
 
       .status-card--success {
         border-color: var(--color-status-success);
-        background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), transparent);
+        background: linear-gradient(135deg, var(--color-status-success-bg), transparent);
       }
 
       .status-card--error {
         border-color: var(--color-status-error);
-        background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), transparent);
+        background: linear-gradient(135deg, var(--color-status-error-bg), transparent);
       }
 
       .status-card__icon {
@@ -312,22 +312,22 @@ import {
         width: 48px;
         height: 48px;
         border-radius: var(--radius-full);
-        background: var(--color-text-heading);
+        background: var(--color-surface-elevated);
       }
 
       .status-card--success .status-card__icon {
-        background: rgba(34, 197, 94, 0.2);
+        background: var(--color-status-success-bg);
         color: var(--color-status-success);
       }
 
       .status-card--error .status-card__icon {
-        background: rgba(239, 68, 68, 0.2);
+        background: var(--color-status-error-bg);
         color: var(--color-status-error);
       }
 
       .status-card__content h3 {
         margin: 0;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1.1rem;
       }
 
@@ -352,15 +352,15 @@ import {
         flex-direction: column;
         gap: 0.25rem;
         padding: 1rem;
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
       }
 
       .summary-card__value {
         font-size: 2rem;
         font-weight: var(--font-weight-bold);
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
       }
 
       .summary-card--error .summary-card__value {
@@ -386,8 +386,8 @@ import {
         gap: 1.5rem;
         margin-bottom: 1.5rem;
         padding: 1rem;
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
       }
 
@@ -400,7 +400,7 @@ import {
       .filter-btn {
         padding: 0.35rem 0.75rem;
         background: transparent;
-        border: 1px solid var(--color-text-primary);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-md);
         color: var(--color-text-muted);
         font-size: 0.8rem;
@@ -427,8 +427,8 @@ import {
 
       .issue-card {
         padding: 1rem;
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         border-left-width: 4px;
       }
@@ -464,7 +464,7 @@ import {
       }
 
       .issue-severity[data-severity='error'] {
-        background: rgba(239, 68, 68, 0.15);
+        background: var(--color-status-error-bg);
         color: var(--color-status-error-border);
       }
 
@@ -497,7 +497,7 @@ import {
       .issue-fixable {
         margin-left: auto;
         padding: 0.15rem 0.5rem;
-        background: rgba(34, 197, 94, 0.15);
+        background: var(--color-status-success-bg);
         color: var(--color-status-success-border);
         border-radius: var(--radius-sm);
         font-size: 0.7rem;
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-merge-preview.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-merge-preview.component.ts
index 55cc349e2..5abd9246a 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-merge-preview.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-merge-preview.component.ts
@@ -226,7 +226,7 @@ import {
 
       .merge-preview__header h1 {
         margin: 0.25rem 0 0;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1.5rem;
       }
 
@@ -236,8 +236,8 @@ import {
       }
 
       .merge-preview__sources {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1.5rem;
         margin-bottom: 1.5rem;
@@ -264,7 +264,7 @@ import {
       .field select {
         padding: 0.5rem 0.75rem;
         background: var(--color-surface-inverse);
-        border: 1px solid var(--color-text-primary);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-md);
         color: rgba(212, 201, 168, 0.3);
       }
@@ -316,15 +316,15 @@ import {
         flex-direction: column;
         gap: 0.25rem;
         padding: 1rem;
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
       }
 
       .summary-card__value {
         font-size: 1.5rem;
         font-weight: var(--font-weight-bold);
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
       }
 
       .summary-card--success .summary-card__value {
@@ -346,8 +346,8 @@ import {
 
       .merge-preview__conflicts,
       .merge-preview__rules {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
         margin-bottom: 1.5rem;
@@ -356,7 +356,7 @@ import {
       .merge-preview__conflicts h3,
       .merge-preview__rules h3 {
         margin: 0 0 1rem;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1rem;
       }
 
@@ -400,7 +400,7 @@ import {
       }
 
       .conflict-type[data-type='incompatible'] {
-        background: rgba(239, 68, 68, 0.15);
+        background: var(--color-status-error-bg);
         color: var(--color-status-error-border);
       }
 
@@ -413,7 +413,7 @@ import {
       .conflict-resolution {
         margin-left: auto;
         padding: 0.2rem 0.5rem;
-        background: rgba(34, 197, 94, 0.15);
+        background: var(--color-status-success-bg);
         color: var(--color-status-success-border);
         border-radius: var(--radius-sm);
         font-size: 0.75rem;
@@ -430,7 +430,7 @@ import {
 
       .comparison-side {
         padding: 0.75rem;
-        background: var(--color-text-heading);
+        background: var(--color-surface-elevated);
         border-radius: var(--radius-md);
       }
 
@@ -463,9 +463,9 @@ import {
 
       .conflict-card__resolved {
         padding: 0.75rem;
-        background: rgba(34, 197, 94, 0.1);
+        background: var(--color-status-success-bg);
         border-radius: var(--radius-md);
-        border: 1px solid rgba(34, 197, 94, 0.3);
+        border: 1px solid var(--color-status-success-border);
       }
 
       .resolved-label {
@@ -502,7 +502,7 @@ import {
 
       .rule-name {
         font-weight: var(--font-weight-semibold);
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
       }
 
       .rule-id {
@@ -535,7 +535,7 @@ import {
 
       .source-tag {
         padding: 0.15rem 0.4rem;
-        background: var(--color-text-heading);
+        background: var(--color-surface-elevated);
         border-radius: var(--radius-sm);
         font-size: 0.75rem;
         color: var(--color-text-muted);
@@ -543,7 +543,7 @@ import {
 
       .rule-card__value {
         padding: 0.5rem;
-        background: var(--color-text-heading);
+        background: var(--color-surface-elevated);
         border-radius: var(--radius-md);
       }
 
@@ -567,8 +567,8 @@ import {
         align-items: center;
         gap: 0.75rem;
         padding: 1rem;
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
       }
 
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/promotion-gate.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/promotion-gate.component.ts
index 8ef470cd4..521bdd97d 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/promotion-gate.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/promotion-gate.component.ts
@@ -256,7 +256,7 @@ import {
 
       .promotion-gate__header h1 {
         margin: 0.25rem 0 0;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1.5rem;
       }
 
@@ -310,19 +310,19 @@ import {
         flex-direction: column;
         gap: 0.25rem;
         padding: 1rem;
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
       }
 
       .info-card--ready {
         border-color: var(--color-status-success);
-        background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), transparent);
+        background: linear-gradient(135deg, var(--color-status-success-bg), transparent);
       }
 
       .info-card--blocked {
         border-color: var(--color-status-error);
-        background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), transparent);
+        background: linear-gradient(135deg, var(--color-status-error-bg), transparent);
       }
 
       .info-label {
@@ -335,7 +335,7 @@ import {
       .info-value {
         font-size: 1rem;
         font-weight: var(--font-weight-semibold);
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
       }
 
       .info-card--ready .info-value {
@@ -351,8 +351,8 @@ import {
         justify-content: space-between;
         align-items: center;
         padding: 1rem 1.25rem;
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         margin-bottom: 1.5rem;
       }
@@ -389,7 +389,7 @@ import {
       }
 
       .stat--blocking {
-        background: rgba(239, 68, 68, 0.15);
+        background: var(--color-status-error-bg);
         color: var(--color-status-error-border);
       }
 
@@ -399,8 +399,8 @@ import {
       }
 
       .promotion-gate__checklist {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
         margin-bottom: 1.5rem;
@@ -408,7 +408,7 @@ import {
 
       .promotion-gate__checklist h3 {
         margin: 0 0 1rem;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1rem;
       }
 
@@ -477,12 +477,12 @@ import {
 
       .check-name {
         font-weight: var(--font-weight-semibold);
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
       }
 
       .check-required {
         padding: 0.15rem 0.4rem;
-        background: rgba(239, 68, 68, 0.15);
+        background: var(--color-status-error-bg);
         color: var(--color-status-error-border);
         border-radius: var(--radius-sm);
         font-size: 0.7rem;
@@ -531,8 +531,8 @@ import {
       }
 
       .promotion-gate__override {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
         margin-bottom: 1.5rem;
@@ -542,8 +542,8 @@ import {
         display: flex;
         gap: 1rem;
         padding: 1rem;
-        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-border);
         border-radius: var(--radius-lg);
         margin-bottom: 1rem;
       }
@@ -584,7 +584,7 @@ import {
       .field textarea {
         padding: 0.75rem;
         background: var(--color-surface-inverse);
-        border: 1px solid var(--color-text-primary);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-lg);
         color: rgba(212, 201, 168, 0.3);
         resize: vertical;
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-dashboard.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-dashboard.component.ts
index a8635c4d6..31edb66cc 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-dashboard.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-dashboard.component.ts
@@ -231,7 +231,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
 
       .shadow-dashboard__header h1 {
         margin: 0.25rem 0 0;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1.5rem;
       }
 
@@ -248,8 +248,8 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
       }
 
       .card {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
       }
@@ -263,7 +263,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
       .card__value {
         font-size: 1.75rem;
         font-weight: var(--font-weight-bold);
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
       }
 
       .card__label {
@@ -322,12 +322,12 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
       }
 
       .btn--secondary {
-        background: var(--color-text-primary);
+        background: var(--color-surface-tertiary);
       }
 
       .shadow-dashboard__breakdown {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
         margin-bottom: 1.5rem;
@@ -335,7 +335,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
 
       .shadow-dashboard__breakdown h3 {
         margin: 0 0 1rem;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1rem;
       }
 
@@ -358,7 +358,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
 
       .breakdown-item__bar {
         height: 8px;
-        background: var(--color-text-heading);
+        background: var(--color-surface-elevated);
         border-radius: var(--radius-sm);
         overflow: hidden;
       }
@@ -377,8 +377,8 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
       }
 
       .shadow-dashboard__table {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
       }
@@ -389,7 +389,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
 
       .table-header h3 {
         margin: 0;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1rem;
       }
 
@@ -401,7 +401,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
 
       .table-scroll {
         overflow-x: auto;
-        border: 1px solid var(--color-text-heading);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-lg);
       }
 
@@ -414,7 +414,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
       td {
         padding: 0.75rem;
         text-align: left;
-        border-bottom: 1px solid var(--color-text-heading);
+        border-bottom: 1px solid var(--color-border-primary);
       }
 
       th {
@@ -433,7 +433,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
       }
 
       .row--diverged {
-        background: rgba(239, 68, 68, 0.05);
+        background: var(--color-status-error-bg);
       }
 
       .cell--mono {
@@ -451,12 +451,12 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
       }
 
       .status-badge--match {
-        background: rgba(34, 197, 94, 0.15);
+        background: var(--color-status-success-bg);
         color: var(--color-status-success);
       }
 
       .status-badge--diverged {
-        background: rgba(239, 68, 68, 0.15);
+        background: var(--color-status-error-bg);
         color: var(--color-status-error);
       }
 
@@ -466,12 +466,12 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
         border-radius: var(--radius-sm);
         font-size: 0.75rem;
         font-weight: var(--font-weight-medium);
-        background: var(--color-text-heading);
+        background: var(--color-surface-elevated);
         color: rgba(212, 201, 168, 0.3);
       }
 
       .decision-chip[data-decision='deny'] {
-        background: rgba(239, 68, 68, 0.15);
+        background: var(--color-status-error-bg);
         color: var(--color-status-error-border);
       }
 
@@ -481,7 +481,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
       }
 
       .decision-chip[data-decision='allow'] {
-        background: rgba(34, 197, 94, 0.15);
+        background: var(--color-status-success-bg);
         color: var(--color-status-success-border);
       }
 
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-indicator.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-indicator.component.ts
index 360a20df0..3564cdd59 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-indicator.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-indicator.component.ts
@@ -103,8 +103,8 @@ import { ShadowModeConfig } from '../../core/api/policy-simulation.models';
         gap: 0.75rem;
         padding: 0.5rem 1rem;
         border-radius: var(--radius-lg);
-        background: var(--color-text-primary);
-        border: 1px solid var(--color-text-primary);
+        background: var(--color-surface-tertiary);
+        border: 1px solid var(--color-border-primary);
         font-size: 0.875rem;
       }
 
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-console.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-console.component.ts
index 181525589..a72b5b578 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-console.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-console.component.ts
@@ -349,7 +349,7 @@ import {
 
       .sim-console__header h1 {
         margin: 0.25rem 0 0;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1.5rem;
       }
 
@@ -370,7 +370,7 @@ import {
         border-radius: var(--radius-full);
         font-size: 0.8rem;
         font-weight: var(--font-weight-semibold);
-        border: 1px solid var(--color-text-primary);
+        border: 1px solid var(--color-border-primary);
       }
 
       .status-pill--completed {
@@ -407,8 +407,8 @@ import {
       }
 
       .sim-console__form {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
       }
@@ -416,7 +416,7 @@ import {
       .form-section {
         margin-bottom: 1.25rem;
         padding-bottom: 1rem;
-        border-bottom: 1px solid var(--color-text-heading);
+        border-bottom: 1px solid var(--color-border-primary);
       }
 
       .form-section:last-of-type {
@@ -462,7 +462,7 @@ import {
       textarea {
         padding: 0.5rem 0.75rem;
         background: var(--color-surface-inverse);
-        border: 1px solid var(--color-text-primary);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-md);
         color: rgba(212, 201, 168, 0.3);
         font-family: inherit;
@@ -506,7 +506,7 @@ import {
       }
 
       .btn--secondary {
-        background: var(--color-text-primary);
+        background: var(--color-surface-tertiary);
         color: rgba(212, 201, 168, 0.3);
       }
 
@@ -525,8 +525,8 @@ import {
       .results-diff,
       .results-findings,
       .results-explain {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
       }
@@ -536,7 +536,7 @@ import {
       .results-findings h3,
       .results-explain h3 {
         margin: 0 0 1rem;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
         font-size: 1rem;
       }
 
@@ -556,7 +556,7 @@ import {
       .summary-item__value {
         font-size: 1.5rem;
         font-weight: var(--font-weight-bold);
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
       }
 
       .summary-item--success .summary-item__value {
@@ -592,12 +592,12 @@ import {
         padding: 0.25rem 0.5rem;
         border-radius: var(--radius-sm);
         font-size: 0.8rem;
-        background: var(--color-text-heading);
+        background: var(--color-surface-elevated);
         color: rgba(212, 201, 168, 0.3);
       }
 
       .decision-chip[data-decision='deny'] {
-        background: rgba(239, 68, 68, 0.15);
+        background: var(--color-status-error-bg);
         color: var(--color-status-error-border);
       }
 
@@ -607,7 +607,7 @@ import {
       }
 
       .decision-chip[data-decision='allow'] {
-        background: rgba(34, 197, 94, 0.15);
+        background: var(--color-status-success-bg);
         color: var(--color-status-success-border);
       }
 
@@ -675,7 +675,7 @@ import {
 
       .table-scroll {
         overflow-x: auto;
-        border: 1px solid var(--color-text-heading);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-lg);
       }
 
@@ -688,7 +688,7 @@ import {
       td {
         padding: 0.75rem;
         text-align: left;
-        border-bottom: 1px solid var(--color-text-heading);
+        border-bottom: 1px solid var(--color-border-primary);
       }
 
       th {
@@ -719,7 +719,7 @@ import {
       }
 
       .decision-badge[data-decision='deny'] {
-        background: rgba(239, 68, 68, 0.15);
+        background: var(--color-status-error-bg);
         color: var(--color-status-error-border);
       }
 
@@ -729,12 +729,12 @@ import {
       }
 
       .decision-badge[data-decision='allow'] {
-        background: rgba(34, 197, 94, 0.15);
+        background: var(--color-status-success-bg);
         color: var(--color-status-success-border);
       }
 
       .severity-badge[data-severity='critical'] {
-        background: rgba(239, 68, 68, 0.15);
+        background: var(--color-status-error-bg);
         color: var(--color-status-error-border);
       }
 
@@ -749,7 +749,7 @@ import {
       }
 
       .severity-badge[data-severity='low'] {
-        background: rgba(34, 197, 94, 0.15);
+        background: var(--color-status-success-bg);
         color: var(--color-status-success-border);
       }
 
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-dashboard.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-dashboard.component.ts
index dcc2a7e95..3e4e4ab55 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-dashboard.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-dashboard.component.ts
@@ -33,14 +33,6 @@ const SIMULATION_TABS: readonly StellaPageTab[] = [
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
     <section class="simulation">
-      <header class="simulation__header">
-        <div class="simulation__title-group">
-          <p class="simulation__eyebrow">Admin / Policy</p>
-          <h1 class="simulation__title">Policy Simulation Studio</h1>
-          <p class="simulation__subtitle">Test, validate, and promote policy changes safely with shadow mode and simulation tools.</p>
-        </div>
-      </header>
-    
       <!-- MANDATORY: Shadow Mode Indicator - Visible on all policy views -->
       <div class="simulation__shadow-banner">
         <app-shadow-mode-indicator
@@ -168,7 +160,6 @@ const SIMULATION_TABS: readonly StellaPageTab[] = [
       <stella-page-tabs
         [tabs]="SIMULATION_TABS"
         [activeTab]="activeTab()"
-        urlParam="tab"
         (tabChange)="onTabChange($any($event))"
         ariaLabel="Policy simulation sections"
       >
@@ -179,8 +170,8 @@ const SIMULATION_TABS: readonly StellaPageTab[] = [
     styles: [`
     :host {
       display: block;
-      background: var(--color-surface-inverse);
-      color: var(--color-border-primary);
+      background: var(--color-surface-primary);
+      color: var(--color-text-primary);
       min-height: 100vh;
     }
 
@@ -190,32 +181,6 @@ const SIMULATION_TABS: readonly StellaPageTab[] = [
       padding: 1.5rem;
     }
 
-    .simulation__header {
-      margin-bottom: 1rem;
-    }
-
-    .simulation__eyebrow {
-      margin: 0;
-      color: var(--color-status-excepted);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      font-size: 0.75rem;
-      font-weight: var(--font-weight-semibold);
-    }
-
-    .simulation__title {
-      margin: 0.25rem 0 0;
-      font-size: 1.75rem;
-      font-weight: var(--font-weight-bold);
-      color: var(--color-surface-secondary);
-    }
-
-    .simulation__subtitle {
-      margin: 0.25rem 0 0;
-      color: var(--color-text-muted);
-      font-size: 0.95rem;
-    }
-
     .simulation__shadow-banner {
       margin-bottom: 1rem;
     }
@@ -223,7 +188,7 @@ const SIMULATION_TABS: readonly StellaPageTab[] = [
     .simulation__promotion-status {
       margin-bottom: 1rem;
       padding: 1rem;
-      background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.05));
+      background: linear-gradient(135deg, var(--color-brand-primary-10), transparent);
       border: 1px solid var(--color-status-excepted);
       border-radius: var(--radius-xl);
     }
@@ -282,7 +247,7 @@ const SIMULATION_TABS: readonly StellaPageTab[] = [
       background: linear-gradient(135deg, var(--color-status-success), var(--color-status-success));
       border: none;
       border-radius: var(--radius-lg);
-      color: white;
+      color: var(--color-text-inverse);
       font-weight: var(--font-weight-semibold);
       font-size: 0.85rem;
       cursor: pointer;
@@ -291,11 +256,11 @@ const SIMULATION_TABS: readonly StellaPageTab[] = [
 
     .btn--promote:hover:not(:disabled) {
       transform: translateY(-1px);
-      box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3);
+      box-shadow: 0 8px 20px var(--color-status-success-bg);
     }
 
     .btn--promote:disabled {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: var(--color-text-secondary);
       cursor: not-allowed;
     }
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-history.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-history.component.ts
index b6e088cac..076f2e056 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-history.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-history.component.ts
@@ -401,7 +401,7 @@ import {
 
     .sim-history__header h1 {
       margin: 0.25rem 0 0;
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
       font-size: 1.5rem;
     }
 
@@ -430,7 +430,7 @@ import {
     }
 
     .btn--secondary {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: rgba(212, 201, 168, 0.3);
     }
 
@@ -446,8 +446,8 @@ import {
     .sim-history__filters {
       margin-bottom: 1.5rem;
       padding: 1rem;
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-heading);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
     }
 
@@ -486,8 +486,8 @@ import {
       display: flex;
       gap: 1rem;
       padding: 1rem;
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-heading);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       transition: all 150ms ease;
     }
@@ -545,12 +545,12 @@ import {
     }
 
     .status-badge[data-status='completed'] {
-      background: rgba(34, 197, 94, 0.15);
+      background: var(--color-status-success-bg);
       color: var(--color-status-success-border);
     }
 
     .status-badge[data-status='failed'] {
-      background: rgba(239, 68, 68, 0.15);
+      background: var(--color-status-error-bg);
       color: var(--color-status-error-border);
     }
 
@@ -614,7 +614,7 @@ import {
     }
 
     .finding-count--critical {
-      background: rgba(239, 68, 68, 0.15);
+      background: var(--color-status-error-bg);
       color: var(--color-status-error-border);
     }
 
@@ -668,7 +668,7 @@ import {
 
     .tag {
       padding: 0.15rem 0.4rem;
-      background: var(--color-text-heading);
+      background: var(--color-surface-elevated);
       color: var(--color-text-muted);
       border-radius: var(--radius-sm);
       font-size: 0.7rem;
@@ -694,7 +694,7 @@ import {
       width: 32px;
       height: 32px;
       background: transparent;
-      border: 1px solid var(--color-text-primary);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-md);
       color: var(--color-text-muted);
       cursor: pointer;
@@ -702,7 +702,7 @@ import {
     }
 
     .action-btn:hover {
-      background: var(--color-text-primary);
+      background: var(--color-surface-tertiary);
       color: rgba(212, 201, 168, 0.3);
     }
 
@@ -745,8 +745,8 @@ import {
     .comparison-modal__content,
     .reproducibility-modal__content {
       position: relative;
-      background: var(--color-text-heading);
-      border: 1px solid var(--color-text-heading);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-xl);
       padding: 1.5rem;
       max-width: 700px;
@@ -766,7 +766,7 @@ import {
     .comparison-header h3,
     .reproducibility-header h3 {
       margin: 0;
-      color: var(--color-surface-secondary);
+      color: var(--color-text-heading);
     }
 
     .close-btn {
@@ -902,7 +902,7 @@ import {
     }
 
     .reproducibility-status--pass {
-      background: rgba(34, 197, 94, 0.1);
+      background: var(--color-status-success-bg);
     }
 
     .reproducibility-status--pass svg {
@@ -914,7 +914,7 @@ import {
     }
 
     .reproducibility-status--fail {
-      background: rgba(239, 68, 68, 0.1);
+      background: var(--color-status-error-bg);
     }
 
     .reproducibility-status--fail svg {