Fix button, tag, and code block colors to use theme tokens

- Replace btn backgrounds from --color-status-info to --color-btn-primary-bg
  across all governance and simulation components (30+ instances)
- Fix code block backgrounds to use --color-terminal-bg instead of
  --color-surface-inverse for proper syntax display contrast
- Fix JSON code text from --color-text-muted to --color-terminal-text
  for readable code on dark backgrounds

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/Web/StellaOps.Web/src/app/features/policy-governance/conflict-resolution-wizard.component.ts

@@ -472,7 +472,7 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
     }
 
     .wizard-step--active .wizard-step__number {
-      background: var(--color-status-info);
+      background: var(--color-btn-primary-bg);
       color: var(--color-text-heading);
     }
 
@@ -908,8 +908,8 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
       border: none;
     }
 
-    .btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
+    .btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
-    .btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
+    .btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
     .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
     .btn--secondary { background: var(--color-surface-tertiary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); }

src/Web/StellaOps.Web/src/app/features/policy-governance/impact-preview.component.ts

@@ -223,8 +223,8 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
       border: none;
     }
 
-    .btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
+    .btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
-    .btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
+    .btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
     .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
     .btn--ghost { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border-primary); }

src/Web/StellaOps.Web/src/app/features/policy-governance/policy-conflict-dashboard.component.ts

@@ -271,8 +271,8 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
       border: none;
     }
 
-    .btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
+    .btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
-    .btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
+    .btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
     .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
     .btn--secondary { background: var(--color-surface-tertiary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); }

src/Web/StellaOps.Web/src/app/features/policy-governance/policy-validator.component.ts

@@ -264,8 +264,8 @@ import {
       border: none;
     }
 
-    .btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
+    .btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
-    .btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
+    .btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
     .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
     .btn--secondary { background: var(--color-surface-tertiary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); }

src/Web/StellaOps.Web/src/app/features/policy-governance/risk-budget-config.component.ts

@@ -260,12 +260,12 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
     }
 
     .btn--primary {
-      background: var(--color-status-info);
+      background: var(--color-btn-primary-bg);
       color: var(--color-btn-primary-text);
     }
 
     .btn--primary:hover:not(:disabled) {
-      background: var(--color-status-info);
+      background: var(--color-btn-primary-bg);
     }
 
     .btn--primary:disabled {

src/Web/StellaOps.Web/src/app/features/policy-governance/risk-budget-dashboard.component.ts

@@ -234,13 +234,13 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
     .btn--small {
       padding: 0.35rem 0.75rem;
       font-size: 0.8rem;
-      background: var(--color-status-info);
+      background: var(--color-btn-primary-bg);
       color: var(--color-text-heading);
       border: none;
     }
 
     .btn--small:hover {
-      background: var(--color-status-info);
+      background: var(--color-btn-primary-bg);
     }
 
     /* Progress Bar */

src/Web/StellaOps.Web/src/app/features/policy-governance/risk-profile-editor.component.ts

@@ -293,8 +293,8 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
       border: none;
     }
 
-    .btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
+    .btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
-    .btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
+    .btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
     .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
     .btn--secondary { background: var(--color-surface-tertiary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); }
@@ -508,7 +508,7 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
     }
 
     .toggle-small input:checked + .toggle-small__slider {
-      background: var(--color-status-info);
+      background: var(--color-btn-primary-bg);
     }
 
     .toggle-small input:checked + .toggle-small__slider:before {

src/Web/StellaOps.Web/src/app/features/policy-governance/risk-profile-list.component.ts

@@ -195,8 +195,8 @@ import { StellaFilterChipComponent } from '../../shared/components/stella-filter
       border: none;
     }
 
-    .btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
+    .btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
-    .btn--primary:hover { background: var(--color-status-info); }
+    .btn--primary:hover { background: var(--color-btn-primary-bg-hover); }
 
     .btn--ghost { background: transparent; color: var(--color-text-muted); }
     .btn--ghost:hover { background: var(--color-surface-tertiary); color: var(--color-text-primary); }

src/Web/StellaOps.Web/src/app/features/policy-governance/schema-docs.component.ts

@@ -333,8 +333,8 @@ interface SchemaSection {
       text-decoration: none;
     }
 
-    .btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
+    .btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
-    .btn--primary:hover { background: var(--color-status-info); }
+    .btn--primary:hover { background: var(--color-btn-primary-bg-hover); }
 
     .btn--secondary { background: var(--color-surface-tertiary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); }
     .btn--secondary:hover { background: var(--color-surface-tertiary); }
@@ -498,7 +498,7 @@ interface SchemaSection {
     /* Field Details (expanded) */
     .field-details td {
       padding: 0;
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
     }
 
     .details-content {
@@ -618,13 +618,13 @@ interface SchemaSection {
     }
 
     .example-tab--active {
-      background: var(--color-status-info);
+      background: var(--color-btn-primary-bg);
       color: var(--color-text-heading);
     }
 
     .example-code {
       position: relative;
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
       border-radius: var(--radius-md);
       overflow: hidden;
     }
@@ -639,7 +639,7 @@ interface SchemaSection {
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.8rem;
       line-height: 1.5;
-      color: var(--color-text-muted);
+      color: var(--color-terminal-text);
     }
 
     .copy-btn {

src/Web/StellaOps.Web/src/app/features/policy-governance/schema-playground.component.ts

@@ -295,8 +295,8 @@ import {
       gap: 0.5rem;
     }
 
-    .btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
+    .btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
-    .btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
+    .btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
     .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
     .btn--secondary { background: var(--color-surface-tertiary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); }
@@ -374,7 +374,7 @@ import {
 
     .line-numbers {
       padding: 1rem 0.5rem;
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
       text-align: right;
       user-select: none;
       overflow: hidden;
@@ -417,7 +417,7 @@ import {
       gap: 0.35rem;
       align-items: center;
       padding: 0.5rem 1rem;
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
       border-top: 1px solid var(--color-border-primary);
       overflow-x: auto;
     }

src/Web/StellaOps.Web/src/app/features/policy-governance/sealed-mode-control.component.ts

@@ -403,8 +403,8 @@ import { ModalComponent } from '../../shared/components/modal/modal.component';
       border: none;
     }
 
-    .btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
+    .btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
-    .btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
+    .btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
     .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
     .btn--secondary { background: var(--color-surface-tertiary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); }

src/Web/StellaOps.Web/src/app/features/policy-governance/sealed-mode-overrides.component.ts

@@ -298,8 +298,8 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
       border: none;
     }
 
-    .btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
+    .btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
-    .btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
+    .btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
     .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
     .btn--ghost { background: transparent; color: var(--color-text-muted); }
@@ -335,7 +335,7 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
     }
 
     .filter-tab--active {
-      background: var(--color-status-info);
+      background: var(--color-btn-primary-bg);
       color: var(--color-text-heading);
     }
 

src/Web/StellaOps.Web/src/app/features/policy-governance/staleness-config.component.ts

@@ -381,7 +381,7 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
     }
 
     .toggle input:checked + .toggle__slider {
-      background: var(--color-status-info);
+      background: var(--color-btn-primary-bg);
     }
 
     .toggle input:checked + .toggle__slider:before {
@@ -561,11 +561,11 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
     }
 
     .btn--primary {
-      background: var(--color-status-info);
+      background: var(--color-btn-primary-bg);
       color: var(--color-btn-primary-text);
     }
 
-    .btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
+    .btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
     .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
   `]

src/Web/StellaOps.Web/src/app/features/policy-governance/trust-weighting.component.ts

@@ -272,11 +272,11 @@ import { ModalComponent } from '../../shared/components/modal/modal.component';
     .btn--secondary:hover { background: var(--color-surface-tertiary); }
 
     .btn--primary {
-      background: var(--color-status-info);
+      background: var(--color-btn-primary-bg);
       color: var(--color-btn-primary-text);
     }
 
-    .btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
+    .btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
     .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
     .btn--ghost {
@@ -388,7 +388,7 @@ import { ModalComponent } from '../../shared/components/modal/modal.component';
 
     .weight-gauge__fill {
       height: 100%;
-      background: var(--color-status-info);
+      background: var(--color-btn-primary-bg);
       border-radius: var(--radius-sm);
       transition: width 0.2s ease;
     }

src/Web/StellaOps.Web/src/app/features/policy-simulation/batch-evaluation.component.ts

@@ -545,7 +545,7 @@ import {
     .form-field select,
     .form-field input[type='number'] {
       padding: 0.5rem 0.75rem;
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
       border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-md);
       color: rgba(212, 201, 168, 0.3);
@@ -596,7 +596,7 @@ import {
     }
 
     .available-artifacts {
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
       border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-lg);
       overflow: hidden;
@@ -613,7 +613,7 @@ import {
     .search-input {
       flex: 1;
       padding: 0.5rem 0.75rem;
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
       border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-md);
       color: rgba(212, 201, 168, 0.3);
@@ -732,7 +732,7 @@ import {
     .tags-input input {
       width: 100%;
       padding: 0.5rem 0.75rem;
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
       border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-md);
       color: rgba(212, 201, 168, 0.3);
@@ -880,7 +880,7 @@ import {
       flex-direction: column;
       align-items: center;
       padding: 1rem;
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
       border-radius: var(--radius-lg);
     }
 
@@ -914,7 +914,7 @@ import {
       align-items: center;
       gap: 1rem;
       padding: 0.75rem 1rem;
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
       border-radius: var(--radius-lg);
       border-left: 3px solid transparent;
     }

src/Web/StellaOps.Web/src/app/features/policy-simulation/conflict-detection.component.ts

@@ -448,7 +448,7 @@ import {
       align-items: center;
       gap: 0.75rem;
       padding: 0.75rem 1rem;
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
       border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-lg);
       cursor: pointer;
@@ -602,7 +602,7 @@ import {
       justify-content: space-between;
       align-items: center;
       padding: 0.75rem 1rem;
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
     }
 
     .header-left {
@@ -728,7 +728,7 @@ import {
     .conflict-details {
       padding: 1rem;
       border-top: 1px solid var(--color-border-primary);
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
     }
 
     .values-comparison {
@@ -871,7 +871,7 @@ import {
     .suggested-value code {
       font-family: 'Monaco', 'Consolas', monospace;
       color: var(--color-status-success-border);
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
       padding: 0.15rem 0.4rem;
       border-radius: var(--radius-sm);
     }

src/Web/StellaOps.Web/src/app/features/policy-simulation/coverage-fixture.component.ts

@@ -391,7 +391,7 @@ import {
         flex-direction: column;
         gap: 0.25rem;
         padding: 1rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border-radius: var(--radius-lg);
       }
 
@@ -497,7 +497,7 @@ import {
 
       .rule-card {
         padding: 1rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-lg);
         border-left-width: 4px;
@@ -626,7 +626,7 @@ import {
       }
 
       th {
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         color: var(--color-text-muted);
         font-weight: var(--font-weight-semibold);
         font-size: 0.75rem;

src/Web/StellaOps.Web/src/app/features/policy-simulation/effective-policy-viewer.component.ts

@@ -322,7 +322,7 @@ import {
         display: flex;
         gap: 0.75rem;
         padding: 0.75rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border-radius: var(--radius-lg);
         border-left: 3px solid var(--color-status-info);
       }
@@ -431,7 +431,7 @@ import {
         font-size: 0.8rem;
         color: var(--color-text-muted);
         padding: 0.25rem 0.5rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border-radius: var(--radius-sm);
       }
 

src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-audit-log.component.ts

@@ -288,7 +288,7 @@ import {
         width: 12px;
         height: 12px;
         border-radius: var(--radius-full);
-        background: var(--color-status-info);
+        background: var(--color-btn-primary-bg);
         flex-shrink: 0;
       }
 
@@ -298,7 +298,7 @@ import {
 
       .audit-entry--updated .indicator-dot,
       .audit-entry--approved .indicator-dot {
-        background: var(--color-status-info);
+        background: var(--color-btn-primary-bg);
       }
 
       .audit-entry--activated .indicator-dot,
@@ -423,7 +423,7 @@ import {
       .audit-entry__comment {
         margin: 0.75rem 0;
         padding: 0.75rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border-left: 3px solid var(--color-text-secondary);
         border-radius: 0 8px 8px 0;
         color: rgba(212, 201, 168, 0.5);
@@ -433,7 +433,7 @@ import {
       .audit-entry__changes {
         margin: 0.75rem 0;
         padding: 0.75rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border-radius: var(--radius-lg);
       }
 

src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-diff-viewer.component.ts

@@ -294,7 +294,7 @@ import {
         justify-content: space-between;
         align-items: center;
         padding: 0.75rem 1rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         cursor: pointer;
         transition: background 150ms ease;
       }

src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-exception.component.ts

@@ -360,7 +360,7 @@ import {
       .field select,
       .field textarea {
         padding: 0.5rem 0.75rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-md);
         color: rgba(212, 201, 168, 0.3);
@@ -569,7 +569,7 @@ import {
 
       .exception-card__justification {
         padding: 0.75rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border-radius: var(--radius-lg);
         margin-bottom: 0.75rem;
       }

src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-lint.component.ts

@@ -414,7 +414,7 @@ import {
       }
 
       .filter-btn--active {
-        background: var(--color-status-info);
+        background: var(--color-btn-primary-bg);
         border-color: var(--color-status-info);
         color: white;
       }
@@ -530,7 +530,7 @@ import {
 
       .issue-card__fix {
         padding: 0.75rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border-radius: var(--radius-lg);
         margin-bottom: 0.5rem;
       }

src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-merge-preview.component.ts

@@ -263,7 +263,7 @@ import {
 
       .field select {
         padding: 0.5rem 0.75rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-md);
         color: rgba(212, 201, 168, 0.3);
@@ -369,7 +369,7 @@ import {
 
       .conflict-card {
         padding: 1rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border: 1px solid var(--color-status-warning);
         border-radius: var(--radius-lg);
       }
@@ -484,7 +484,7 @@ import {
 
       .rule-card {
         padding: 1rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border-radius: var(--radius-lg);
         border-left: 3px solid var(--color-status-success);
       }
@@ -582,7 +582,7 @@ import {
         font-size: 0.85rem;
         color: var(--color-text-muted);
         padding: 0.25rem 0.5rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border-radius: var(--radius-sm);
       }
 

src/Web/StellaOps.Web/src/app/features/policy-simulation/promotion-gate.component.ts

@@ -422,7 +422,7 @@ import {
         display: flex;
         gap: 0.75rem;
         padding: 1rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border-radius: var(--radius-lg);
         border-left: 3px solid var(--color-text-secondary);
       }
@@ -583,7 +583,7 @@ import {
 
       .field textarea {
         padding: 0.75rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-lg);
         color: rgba(212, 201, 168, 0.3);

src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-dashboard.component.ts

@@ -418,7 +418,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
       }
 
       th {
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         color: var(--color-text-muted);
         font-weight: var(--font-weight-semibold);
         font-size: 0.75rem;

src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-console.component.ts

@@ -461,7 +461,7 @@ import {
       select,
       textarea {
         padding: 0.5rem 0.75rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-md);
         color: rgba(212, 201, 168, 0.3);
@@ -649,7 +649,7 @@ import {
         flex-direction: column;
         gap: 0.125rem;
         padding: 0.5rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border-radius: var(--radius-md);
         font-size: 0.8rem;
       }
@@ -692,7 +692,7 @@ import {
       }
 
       th {
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         color: var(--color-text-muted);
         font-weight: var(--font-weight-semibold);
         font-size: 0.75rem;
@@ -773,7 +773,7 @@ import {
         gap: 1rem;
         align-items: center;
         padding: 0.5rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-terminal-bg);
         border-radius: var(--radius-md);
         font-size: 0.85rem;
       }
@@ -806,7 +806,7 @@ import {
       }
 
       .explain-decisive {
-        background: var(--color-status-info);
+        background: var(--color-btn-primary-bg);
         color: white;
         padding: 0.15rem 0.5rem;
         border-radius: var(--radius-sm);

src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-history.component.ts

@@ -654,7 +654,7 @@ import {
       font-family: 'Monaco', 'Consolas', monospace;
       font-size: 0.75rem;
       color: var(--color-text-muted);
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
       padding: 0.15rem 0.4rem;
       border-radius: var(--radius-sm);
     }
@@ -786,7 +786,7 @@ import {
       justify-content: space-between;
       align-items: center;
       padding: 1rem;
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
       border-radius: var(--radius-lg);
       margin-bottom: 1rem;
     }
@@ -852,7 +852,7 @@ import {
       display: flex;
       gap: 1rem;
       padding: 0.5rem;
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
       border-radius: var(--radius-md);
       font-size: 0.85rem;
       border-left: 3px solid transparent;
@@ -932,7 +932,7 @@ import {
 
     .hash-comparison {
       padding: 1rem;
-      background: var(--color-surface-inverse);
+      background: var(--color-terminal-bg);
       border-radius: var(--radius-lg);
       margin-bottom: 1rem;
     }