diff --git a/packages/web/src/components/RouteErrorBoundary.tsx b/packages/web/src/components/RouteErrorBoundary.tsx
index 950a1ae0..e6c0fb32 100644
--- a/packages/web/src/components/RouteErrorBoundary.tsx
+++ b/packages/web/src/components/RouteErrorBoundary.tsx
@@ -35,16 +35,16 @@ export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, Route
       <div style={{ maxWidth: 560, margin: '3rem auto', padding: '0 1rem' }}>
         <div
           style={{
-            background: 'var(--color-accent-bg, var(--color-danger-bg))',
-            border: '1px solid var(--color-accent, var(--color-danger-border))',
+            background: 'var(--color-danger-bg)',
+            border: '1px solid var(--color-danger-border)',
             borderRadius: 12,
             padding: '1.25rem 1.4rem',
           }}
         >
-          <h2 style={{ margin: '0 0 0.4rem', fontSize: '1.05rem', color: 'var(--color-accent, var(--color-danger-text))' }}>
+          <h2 style={{ margin: '0 0 0.4rem', fontSize: '1.05rem', color: 'var(--color-danger-text)' }}>
             Something went wrong on this page
           </h2>
-          <p style={{ margin: '0 0 1rem', fontSize: '0.9rem', color: 'var(--color-text, var(--color-text))', lineHeight: 1.5 }}>
+          <p style={{ margin: '0 0 1rem', fontSize: '0.9rem', color: 'var(--color-text)', lineHeight: 1.5 }}>
             This page failed to render. The rest of the app is still available, try reloading, or pick
             another page from the menu.
           </p>
@@ -52,7 +52,7 @@ export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, Route
             type="button"
             onClick={() => window.location.reload()}
             style={{
-              background: 'var(--color-primary, var(--color-primary))',
+              background: 'var(--color-primary)',
               border: 'none',
               borderRadius: 8,
               color: 'var(--color-surface)',
diff --git a/packages/web/src/features/agency/AgencySetupPage.tsx b/packages/web/src/features/agency/AgencySetupPage.tsx
index 4b838740..0a1a57ba 100644
--- a/packages/web/src/features/agency/AgencySetupPage.tsx
+++ b/packages/web/src/features/agency/AgencySetupPage.tsx
@@ -426,7 +426,7 @@ export function AgencySetupPage() {
         </h2>
         <p style={{ margin: '0 0 1.1rem', fontSize: '0.8125rem', color: 'var(--color-text-muted)', lineHeight: 1.6 }}>
           Your billing-provider identity for X12 837P claims. Required fields (marked&nbsp;
-          <span style={{ color: 'var(--color-danger)' }}>*</span>) must be complete before an 837 can be generated
+          <span style={{ color: 'var(--color-danger-text)' }}>*</span>) must be complete before an 837 can be generated
           for a payer or clearinghouse.
         </p>
         <form onSubmit={handleBillingSubmit}>
@@ -434,7 +434,7 @@ export function AgencySetupPage() {
             {BILLING_FIELDS.map(f => (
               <div key={f.key} style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
                 <label htmlFor={f.key} className="label">
-                  {f.label}{f.required ? <span style={{ color: 'var(--color-danger)' }}> *</span> : null}
+                  {f.label}{f.required ? <span style={{ color: 'var(--color-danger-text)' }}> *</span> : null}
                 </label>
                 <input
                   id={f.key}
diff --git a/packages/web/src/features/agency/GoLiveReadinessPage.tsx b/packages/web/src/features/agency/GoLiveReadinessPage.tsx
index f1682698..b9df60c1 100644
--- a/packages/web/src/features/agency/GoLiveReadinessPage.tsx
+++ b/packages/web/src/features/agency/GoLiveReadinessPage.tsx
@@ -115,8 +115,8 @@ export function computeReadinessChecklist(input: ReadinessInputs): ChecklistItem
 }
 
 const card: React.CSSProperties = {
-  background: 'var(--color-surface, var(--color-surface))',
-  border: '1px solid var(--color-border, var(--color-border))',
+  background: 'var(--color-surface)',
+  border: '1px solid var(--color-border)',
   borderRadius: 12,
   padding: '1rem 1.25rem',
   marginBottom: '0.75rem',
@@ -138,8 +138,8 @@ function StatusDot({ done }: { done: boolean }) {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        background: done ? 'var(--color-success-bg, var(--color-success-bg))' : 'var(--color-accent-bg, var(--color-danger-bg))',
-        color: done ? 'var(--color-success, var(--color-success-text))' : 'var(--color-accent, var(--color-danger-text))',
+        background: done ? 'var(--color-success-bg)' : 'var(--color-danger-bg)',
+        color: done ? 'var(--color-success-text)' : 'var(--color-danger-text)',
       }}
     >
       <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
@@ -189,27 +189,27 @@ export function GoLiveReadinessPage() {
 
   return (
     <div style={{ maxWidth: 760, margin: '0 auto', padding: '1.5rem' }}>
-      <p style={{ color: 'var(--color-text-muted, var(--color-text-muted))', fontSize: '0.75rem', fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase', margin: 0 }}>
+      <p style={{ color: 'var(--color-text-muted)', fontSize: '0.75rem', fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase', margin: 0 }}>
         Onboarding
       </p>
-      <h1 style={{ margin: '0.25rem 0 0.5rem', fontSize: '1.6rem', color: 'var(--color-text, var(--color-text))' }}>Go-Live Readiness</h1>
-      <p style={{ margin: '0 0 1.25rem', color: 'var(--color-text-muted, var(--color-text-muted))', fontSize: '0.95rem' }}>
+      <h1 style={{ margin: '0.25rem 0 0.5rem', fontSize: '1.6rem', color: 'var(--color-text)' }}>Go-Live Readiness</h1>
+      <p style={{ margin: '0 0 1.25rem', color: 'var(--color-text-muted)', fontSize: '0.95rem' }}>
         Everything an agency must finish before it can run verified visits and bill them. Each unfinished item links to where you fix it.
       </p>
 
       {error && (
-        <div style={{ background: 'var(--color-accent-bg, var(--color-danger-bg))', color: 'var(--color-accent, var(--color-danger-text))', borderRadius: 8, padding: '0.75rem 1rem' }}>{error}</div>
+        <div style={{ background: 'var(--color-danger-bg)', color: 'var(--color-danger-text)', borderRadius: 8, padding: '0.75rem 1rem' }}>{error}</div>
       )}
 
-      {items === null && !error && <p style={{ color: 'var(--color-text-muted, var(--color-text-muted))' }}>Checking your setup…</p>}
+      {items === null && !error && <p style={{ color: 'var(--color-text-muted)' }}>Checking your setup…</p>}
 
       {items !== null && (
         <>
           <div
             style={{
-              background: ready ? 'var(--color-success-bg, var(--color-success-bg))' : 'var(--color-primary-bg, var(--color-info-bg))',
-              color: ready ? 'var(--color-success, var(--color-success-text))' : 'var(--color-primary-dark, var(--color-primary-dark))',
-              border: `1px solid ${ready ? 'var(--color-success, var(--color-success-text))' : 'var(--color-border, var(--color-border))'}`,
+              background: ready ? 'var(--color-success-bg)' : 'var(--color-info-bg)',
+              color: ready ? 'var(--color-success-text)' : 'var(--color-primary-dark)',
+              border: `1px solid ${ready ? 'var(--color-success-text)' : 'var(--color-border)'}`,
               borderRadius: 12,
               padding: '1rem 1.25rem',
               marginBottom: '1.25rem',
@@ -226,14 +226,14 @@ export function GoLiveReadinessPage() {
               <StatusDot done={item.done} />
               <div style={{ flex: 1 }}>
                 <div style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem', alignItems: 'baseline' }}>
-                  <h3 style={{ margin: 0, fontSize: '1rem', color: 'var(--color-text, var(--color-text))' }}>{item.title}</h3>
+                  <h3 style={{ margin: 0, fontSize: '1rem', color: 'var(--color-text)' }}>{item.title}</h3>
                   {!item.done && (
-                    <Link to={item.fixTo} style={{ color: 'var(--color-primary, var(--color-primary))', fontWeight: 700, fontSize: '0.85rem', textDecoration: 'none', whiteSpace: 'nowrap' }}>
+                    <Link to={item.fixTo} style={{ color: 'var(--color-primary)', fontWeight: 700, fontSize: '0.85rem', textDecoration: 'none', whiteSpace: 'nowrap' }}>
                       {item.fixLabel} →
                     </Link>
                   )}
                 </div>
-                <p style={{ margin: '0.35rem 0 0', color: 'var(--color-text-muted, var(--color-text-muted))', fontSize: '0.85rem', lineHeight: 1.5 }}>{item.detail}</p>
+                <p style={{ margin: '0.35rem 0 0', color: 'var(--color-text-muted)', fontSize: '0.85rem', lineHeight: 1.5 }}>{item.detail}</p>
               </div>
             </div>
           ))}
diff --git a/packages/web/src/features/audit/AuditEventsPage.tsx b/packages/web/src/features/audit/AuditEventsPage.tsx
index 32958178..1df8972e 100644
--- a/packages/web/src/features/audit/AuditEventsPage.tsx
+++ b/packages/web/src/features/audit/AuditEventsPage.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { getJson } from '../../lib/api-client.js';
+import { tint } from '../../lib/color.js';
 
 /**
  * Admin-only audit events timeline.
@@ -325,7 +326,7 @@ export function AuditEventsPage() {
             display: 'inline-flex',
             alignItems: 'center',
             gap: '0.4rem',
-            background: 'rgba(16, 116, 128,0.2)',
+            background: tint('var(--color-primary)', 20),
             color: 'var(--color-primary-light)',
             borderRadius: '6px',
             padding: '0.3rem 0.75rem',
diff --git a/packages/web/src/features/audit/AuditRetentionPage.tsx b/packages/web/src/features/audit/AuditRetentionPage.tsx
index b27023e0..8d53f82e 100644
--- a/packages/web/src/features/audit/AuditRetentionPage.tsx
+++ b/packages/web/src/features/audit/AuditRetentionPage.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { getJson } from '../../lib/api-client.js';
+import { tint } from '../../lib/color.js';
 
 /**
  * Admin-only HIPAA audit-retention evidence dashboard.
@@ -139,7 +140,7 @@ export function AuditRetentionPage() {
             display: 'inline-flex',
             alignItems: 'center',
             gap: '0.4rem',
-            background: 'rgba(16, 116, 128,0.2)',
+            background: tint('var(--color-primary)', 20),
             color: 'var(--color-primary-light)',
             borderRadius: '6px',
             padding: '0.3rem 0.75rem',
diff --git a/packages/web/src/features/auth/AcceptInvitePage.tsx b/packages/web/src/features/auth/AcceptInvitePage.tsx
index 59a1bd2b..03b3c006 100644
--- a/packages/web/src/features/auth/AcceptInvitePage.tsx
+++ b/packages/web/src/features/auth/AcceptInvitePage.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { tint } from '../../lib/color.js';
 
 interface InviteInfo {
   token: string;
@@ -135,7 +136,7 @@ export function AcceptInvitePage() {
           right: '-20%',
           width: '60%',
           height: '60%',
-          background: 'radial-gradient(circle, rgba(16, 116, 128,0.18) 0%, transparent 70%)',
+          background: `radial-gradient(circle, ${tint('var(--color-primary)', 18)} 0%, transparent 70%)`,
           pointerEvents: 'none',
         }}
       />
diff --git a/packages/web/src/features/auth/CaregiverPortalPage.tsx b/packages/web/src/features/auth/CaregiverPortalPage.tsx
index 3aa9fed3..3224c460 100644
--- a/packages/web/src/features/auth/CaregiverPortalPage.tsx
+++ b/packages/web/src/features/auth/CaregiverPortalPage.tsx
@@ -1,5 +1,6 @@
 import { Navigate } from 'react-router-dom';
 import { useAuth } from '../../lib/AuthContext.js';
+import { tint } from '../../lib/color.js';
 
 const ADMIN_ROLES = new Set(['admin', 'coordinator']);
 
@@ -53,8 +54,8 @@ export function CaregiverPortalPage() {
             width: '52px',
             height: '52px',
             borderRadius: '14px',
-            background: 'rgba(16, 116, 128,0.15)',
-            border: '1px solid rgba(16, 116, 128,0.25)',
+            background: tint('var(--color-primary)', 15),
+            border: `1px solid ${tint('var(--color-primary)', 25)}`,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
@@ -80,8 +81,8 @@ export function CaregiverPortalPage() {
 
         <div
           style={{
-            backgroundColor: 'rgba(16, 116, 128,0.08)',
-            border: '1px solid rgba(16, 116, 128,0.15)',
+            backgroundColor: tint('var(--color-primary)', 8),
+            border: `1px solid ${tint('var(--color-primary)', 15)}`,
             borderRadius: '10px',
             padding: '1rem',
             display: 'flex',
diff --git a/packages/web/src/features/auth/LoginPage.tsx b/packages/web/src/features/auth/LoginPage.tsx
index b306c0e0..971be3b8 100644
--- a/packages/web/src/features/auth/LoginPage.tsx
+++ b/packages/web/src/features/auth/LoginPage.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import { useAuth } from '../../lib/AuthContext.js';
 import { BrandLogo } from '../../components/brand/BrandLogo.js';
+import { tint } from '../../lib/color.js';
 
 const ADMIN_ROLES = new Set(['admin', 'coordinator']);
 
@@ -112,7 +113,7 @@ export function LoginPage() {
             right: '-20%',
             width: '60%',
             height: '60%',
-            background: 'radial-gradient(circle, rgba(16,116,128,0.22) 0%, transparent 70%)',
+            background: `radial-gradient(circle, ${tint('var(--color-primary)', 22)} 0%, transparent 70%)`,
             pointerEvents: 'none',
           }}
         />
diff --git a/packages/web/src/features/auth/ResetPasswordPage.tsx b/packages/web/src/features/auth/ResetPasswordPage.tsx
index 30443b8b..ebde0102 100644
--- a/packages/web/src/features/auth/ResetPasswordPage.tsx
+++ b/packages/web/src/features/auth/ResetPasswordPage.tsx
@@ -37,7 +37,7 @@ export function ResetPasswordPage() {
   if (!token) {
     return (
       <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '2rem' }}>
-        <p style={{ color: 'var(--color-danger)' }}>
+        <p style={{ color: 'var(--color-danger-text)' }}>
           Invalid reset link.{' '}
           <Link to="/forgot-password" style={{ color: 'var(--color-primary)' }}>Request a new one.</Link>
         </p>
diff --git a/packages/web/src/features/auth/SignupPage.tsx b/packages/web/src/features/auth/SignupPage.tsx
index a3c3de39..32b18d1f 100644
--- a/packages/web/src/features/auth/SignupPage.tsx
+++ b/packages/web/src/features/auth/SignupPage.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
+import { tint } from '../../lib/color.js';
 
 const steps = ['Agency info', 'Admin account'];
 
@@ -82,7 +83,7 @@ export function SignupPage() {
             right: '-20%',
             width: '60%',
             height: '60%',
-            background: 'radial-gradient(circle, rgba(16, 116, 128,0.18) 0%, transparent 70%)',
+            background: `radial-gradient(circle, ${tint('var(--color-primary)', 18)} 0%, transparent 70%)`,
             pointerEvents: 'none',
           }}
         />
diff --git a/packages/web/src/features/caregiver/CaregiverDashboard.tsx b/packages/web/src/features/caregiver/CaregiverDashboard.tsx
index 55b160ab..67cde270 100644
--- a/packages/web/src/features/caregiver/CaregiverDashboard.tsx
+++ b/packages/web/src/features/caregiver/CaregiverDashboard.tsx
@@ -52,7 +52,7 @@ function StatusBadge({ status }: { status: string }) {
   const map: Record<string, { bg: string; color: string; border: string; label: string }> = {
     verified:  { bg: 'var(--color-success-bg)', color: 'var(--color-success)', border: 'var(--color-success-border)', label: 'Verified' },
     pending:   { bg: 'var(--color-warning-bg)', color: 'var(--color-warning)', border: 'var(--color-warning-border)', label: 'Pending' },
-    flagged:   { bg: 'var(--color-danger-bg)', color: 'var(--color-danger)', border: 'var(--color-danger-border)', label: 'Flagged' },
+    flagged:   { bg: 'var(--color-danger-bg)', color: 'var(--color-danger-text)', border: 'var(--color-danger-border)', label: 'Flagged' },
     corrected: { bg: 'var(--color-info-bg)', color: 'var(--color-primary)', border: 'var(--color-info-border)', label: 'Corrected' },
   };
   const fallback = { bg: 'var(--color-surface-soft)', color: 'var(--color-text-secondary)', border: 'var(--color-border)', label: status || 'Unknown' };
diff --git a/packages/web/src/features/caregiver/CaregiverLearningHubPage.tsx b/packages/web/src/features/caregiver/CaregiverLearningHubPage.tsx
index 77e0fa33..d95e5ede 100644
--- a/packages/web/src/features/caregiver/CaregiverLearningHubPage.tsx
+++ b/packages/web/src/features/caregiver/CaregiverLearningHubPage.tsx
@@ -39,8 +39,8 @@ const CADENCE_LABEL: Record<string, string> = {
 const STATUS_MAP = {
   completed:   { bg: 'var(--color-success-bg)', color: 'var(--color-success)', border: 'var(--color-success-border)', label: 'Completed' },
   in_progress: { bg: 'var(--color-info-bg)', color: 'var(--color-primary)', border: 'var(--color-info-border)', label: 'In Progress' },
-  overdue:     { bg: 'var(--color-danger-bg)', color: 'var(--color-danger)', border: 'var(--color-danger-border)', label: 'Overdue' },
-  expired:     { bg: 'var(--color-danger-bg)', color: 'var(--color-danger)', border: 'var(--color-danger-border)', label: 'Expired' },
+  overdue:     { bg: 'var(--color-danger-bg)', color: 'var(--color-danger-text)', border: 'var(--color-danger-border)', label: 'Overdue' },
+  expired:     { bg: 'var(--color-danger-bg)', color: 'var(--color-danger-text)', border: 'var(--color-danger-border)', label: 'Expired' },
   not_started: { bg: 'var(--color-bg)', color: 'var(--color-text-muted)', border: 'var(--color-border)', label: 'Not Started' },
 };
 
@@ -123,7 +123,7 @@ export function CaregiverLearningHubPage() {
     borderRadius: '6px',
     border: 'none',
     cursor: 'pointer',
-    background: active ? 'var(--color-primary, var(--color-primary))' : 'transparent',
+    background: active ? 'var(--color-primary)' : 'transparent',
     color: active ? 'var(--color-surface)' : 'var(--color-text-muted)',
   });
 
@@ -140,7 +140,7 @@ export function CaregiverLearningHubPage() {
         </div>
         <Link
           to="/portal/training"
-          style={{ fontSize: '0.875rem', fontWeight: 600, color: 'var(--color-primary, var(--color-primary))', textDecoration: 'none' }}
+          style={{ fontSize: '0.875rem', fontWeight: 600, color: 'var(--color-primary)', textDecoration: 'none' }}
         >
           My Training →
         </Link>
@@ -266,7 +266,7 @@ export function CaregiverLearningHubPage() {
                       fontSize: '0.8125rem',
                       fontWeight: 600,
                       color: 'var(--color-surface)',
-                      background: status === 'completed' ? 'var(--color-text-muted)' : 'var(--color-primary, var(--color-primary))',
+                      background: status === 'completed' ? 'var(--color-text-muted)' : 'var(--color-primary)',
                       borderRadius: '8px',
                       textDecoration: 'none',
                       whiteSpace: 'nowrap',
diff --git a/packages/web/src/features/caregiver/CaregiverTrainingPage.tsx b/packages/web/src/features/caregiver/CaregiverTrainingPage.tsx
index 5806a38b..8b338414 100644
--- a/packages/web/src/features/caregiver/CaregiverTrainingPage.tsx
+++ b/packages/web/src/features/caregiver/CaregiverTrainingPage.tsx
@@ -39,8 +39,8 @@ type TrainingTab = 'all' | 'required' | 'in_progress' | 'completed' | 'overdue';
 const STATUS_CONFIG = {
   completed:   { bg: 'var(--color-success-bg)', color: 'var(--color-success)', border: 'var(--color-success-border)', label: 'Completed' },
   in_progress: { bg: 'var(--color-info-bg)', color: 'var(--color-primary)', border: 'var(--color-info-border)', label: 'In Progress' },
-  overdue:     { bg: 'var(--color-danger-bg)', color: 'var(--color-danger)', border: 'var(--color-danger-border)', label: 'Overdue' },
-  expired:     { bg: 'var(--color-danger-bg)', color: 'var(--color-danger)', border: 'var(--color-danger-border)', label: 'Expired' },
+  overdue:     { bg: 'var(--color-danger-bg)', color: 'var(--color-danger-text)', border: 'var(--color-danger-border)', label: 'Overdue' },
+  expired:     { bg: 'var(--color-danger-bg)', color: 'var(--color-danger-text)', border: 'var(--color-danger-border)', label: 'Expired' },
   not_started: { bg: 'var(--color-bg)', color: 'var(--color-text-muted)', border: 'var(--color-border)', label: 'Not Started' },
 };
 
@@ -64,7 +64,7 @@ function ProgressBar({ pct }: { pct: number }) {
       <div style={{
         height: '100%',
         width: `${pct}%`,
-        background: pct === 100 ? 'var(--color-success)' : 'var(--color-primary, var(--color-primary))',
+        background: pct === 100 ? 'var(--color-success)' : 'var(--color-primary)',
         borderRadius: '100px',
         transition: 'width 0.3s',
       }} />
@@ -141,7 +141,7 @@ export function CaregiverTrainingPage() {
     borderRadius: '6px',
     border: 'none',
     cursor: 'pointer',
-    background: active ? 'var(--color-primary, var(--color-primary))' : 'transparent',
+    background: active ? 'var(--color-primary)' : 'transparent',
     color: active ? 'var(--color-surface)' : 'var(--color-text-muted)',
   });
 
@@ -186,7 +186,7 @@ export function CaregiverTrainingPage() {
       )}
 
       {error && (
-        <div style={{ background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', borderRadius: '8px', padding: '0.75rem', marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--color-danger)' }}>
+        <div style={{ background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', borderRadius: '8px', padding: '0.75rem', marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--color-danger-text)' }}>
           {error}
         </div>
       )}
@@ -265,7 +265,7 @@ export function CaregiverTrainingPage() {
                       fontSize: '0.8125rem',
                       fontWeight: 600,
                       color: isCompleted ? 'var(--color-text-muted)' : 'var(--color-surface)',
-                      background: isCompleted ? 'var(--color-bg)' : 'var(--color-primary, var(--color-primary))',
+                      background: isCompleted ? 'var(--color-bg)' : 'var(--color-primary)',
                       border: isCompleted ? '1px solid var(--color-border)' : 'none',
                       borderRadius: '6px',
                       cursor: 'pointer',
diff --git a/packages/web/src/features/caregiver/CaregiverVisitsPage.tsx b/packages/web/src/features/caregiver/CaregiverVisitsPage.tsx
index d507e26c..bffcd683 100644
--- a/packages/web/src/features/caregiver/CaregiverVisitsPage.tsx
+++ b/packages/web/src/features/caregiver/CaregiverVisitsPage.tsx
@@ -30,7 +30,7 @@ function StatusBadge({ status }: { status: string }) {
   const map: Record<string, { bg: string; color: string; border: string; label: string }> = {
     verified:  { bg: 'var(--color-success-bg)', color: 'var(--color-success)', border: 'var(--color-success-border)', label: 'Verified' },
     pending:   { bg: 'var(--color-warning-bg)', color: 'var(--color-warning)', border: 'var(--color-warning-border)', label: 'Pending' },
-    flagged:   { bg: 'var(--color-danger-bg)', color: 'var(--color-danger)', border: 'var(--color-danger-border)', label: 'Flagged' },
+    flagged:   { bg: 'var(--color-danger-bg)', color: 'var(--color-danger-text)', border: 'var(--color-danger-border)', label: 'Flagged' },
     corrected: { bg: 'var(--color-info-bg)', color: 'var(--color-primary)', border: 'var(--color-info-border)', label: 'Corrected' },
   };
   const s = map[status] ?? { bg: 'var(--color-surface-soft)', color: 'var(--color-text-secondary)', border: 'var(--color-border)', label: status || 'Unknown' };
@@ -72,7 +72,7 @@ export function CaregiverVisitsPage() {
     borderRadius: '6px',
     border: 'none',
     cursor: 'pointer',
-    background: active ? 'var(--color-primary, var(--color-primary))' : 'transparent',
+    background: active ? 'var(--color-primary)' : 'transparent',
     color: active ? 'var(--color-surface)' : 'var(--color-text-muted)',
   });
 
@@ -104,7 +104,7 @@ export function CaregiverVisitsPage() {
       </div>
 
       {loading && <div style={{ color: 'var(--color-text-muted)' }}>Loading…</div>}
-      {error && <div style={{ color: 'var(--color-danger)' }}>{error}</div>}
+      {error && <div style={{ color: 'var(--color-danger-text)' }}>{error}</div>}
 
       {!loading && !error && filtered.length === 0 && (
         <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: '12px', padding: '2.5rem', textAlign: 'center', color: 'var(--color-text-subtle)' }}>
diff --git a/packages/web/src/features/caregiver/CourseDetailPage.tsx b/packages/web/src/features/caregiver/CourseDetailPage.tsx
index 7b3c1b12..4a2541c7 100644
--- a/packages/web/src/features/caregiver/CourseDetailPage.tsx
+++ b/packages/web/src/features/caregiver/CourseDetailPage.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { postJson, getJson } from '../../lib/api-client.js';
+import { tint } from '../../lib/color.js';
 
 interface CourseSection {
   title: string;
@@ -123,7 +124,7 @@ function VideoPlayer({ videoUrl, onPlay }: { videoUrl: string; onPlay?: () => vo
         }}>
           <div style={{
             width: '64px', height: '64px', borderRadius: '50%',
-            background: 'rgba(16, 116, 128,0.9)',
+            background: tint('var(--color-primary)', 90),
             display: 'flex', alignItems: 'center', justifyContent: 'center',
           }}>
             <svg width="28" height="28" viewBox="0 0 24 24" fill="white" aria-hidden="true">
@@ -229,7 +230,7 @@ function Quiz({ questions, onPass }: QuizProps) {
             {quizState === 'failed' && (
               <div style={{
                 background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', borderRadius: '8px',
-                padding: '0.75rem 1rem', fontSize: '0.875rem', color: 'var(--color-danger)',
+                padding: '0.75rem 1rem', fontSize: '0.875rem', color: 'var(--color-danger-text)',
                 display: 'flex', alignItems: 'center', gap: '0.5rem',
               }}>
                 <span style={{ display: 'inline-flex', flexShrink: 0 }}>
@@ -256,7 +257,7 @@ function Quiz({ questions, onPass }: QuizProps) {
                     <span style={{ color: 'var(--color-text-subtle)', marginRight: '0.4rem' }}>{qi + 1}.</span>
                     {q.question}
                     {isWrong && (
-                      <span style={{ marginLeft: '0.5rem', color: 'var(--color-danger)', fontSize: '0.8rem', fontWeight: 500 }}>
+                      <span style={{ marginLeft: '0.5rem', color: 'var(--color-danger-text)', fontSize: '0.8rem', fontWeight: 500 }}>
                         Correct: {q.options[q.correct]}
                       </span>
                     )}
@@ -402,7 +403,7 @@ export function CourseDetailPage() {
         <button type="button" onClick={() => navigate('/portal/training')} style={backBtnStyle}>
           ← Back to My Training
         </button>
-        <div style={{ background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', borderRadius: '10px', padding: '2rem', color: 'var(--color-danger)', textAlign: 'center' }}>
+        <div style={{ background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', borderRadius: '10px', padding: '2rem', color: 'var(--color-danger-text)', textAlign: 'center' }}>
           Course not found or you are not enrolled.
         </div>
       </div>
@@ -476,7 +477,7 @@ export function CourseDetailPage() {
       </div>
 
       {error && (
-        <div style={{ background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', borderRadius: '8px', padding: '0.75rem 1rem', marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--color-danger)' }}>
+        <div style={{ background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', borderRadius: '8px', padding: '0.75rem 1rem', marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--color-danger-text)' }}>
           {error}
         </div>
       )}
@@ -543,7 +544,7 @@ export function CourseDetailPage() {
                     <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
                       <span style={{
                         width: '26px', height: '26px', borderRadius: '50%',
-                        background: isOpen ? 'var(--color-primary, var(--color-primary))' : 'var(--color-surface-soft)',
+                        background: isOpen ? 'var(--color-primary)' : 'var(--color-surface-soft)',
                         color: isOpen ? 'var(--color-surface)' : 'var(--color-text-muted)',
                         fontSize: '0.75rem', fontWeight: 700,
                         display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
@@ -660,7 +661,7 @@ export function CourseDetailPage() {
             style={{
               display: 'inline-flex', alignItems: 'center', gap: '0.4rem',
               padding: '0.6rem 1.4rem', fontWeight: 700, fontSize: '0.9375rem',
-              color: 'var(--color-surface)', background: completing ? 'var(--color-text-subtle)' : 'var(--color-primary, var(--color-primary))',
+              color: 'var(--color-surface)', background: completing ? 'var(--color-text-subtle)' : 'var(--color-primary)',
               border: 'none', borderRadius: '8px', cursor: completing ? 'wait' : 'pointer', whiteSpace: 'nowrap',
             }}
           >
diff --git a/packages/web/src/features/clients/ClientsPage.tsx b/packages/web/src/features/clients/ClientsPage.tsx
index 1a05fdba..e063f085 100644
--- a/packages/web/src/features/clients/ClientsPage.tsx
+++ b/packages/web/src/features/clients/ClientsPage.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { getJson, postJson, putJson, deleteJson, ApiError } from '../../lib/api-client.js';
 import { EmptyState, LoadingSkeleton, ErrorRetry } from '../../components/state/index.js';
+import { tint } from '../../lib/color.js';
 
 interface Client {
   id: string;
@@ -349,8 +350,8 @@ export function ClientsPage() {
                   fontSize: '0.7rem',
                   fontWeight: 700,
                   color: 'var(--color-primary)',
-                  background: 'rgba(16, 116, 128,0.1)',
-                  border: '1px solid rgba(16, 116, 128,0.2)',
+                  background: tint('var(--color-primary)', 10),
+                  border: `1px solid ${tint('var(--color-primary)', 20)}`,
                   borderRadius: '999px',
                   padding: '0.2rem 0.65rem',
                   letterSpacing: '0.04em',
diff --git a/packages/web/src/features/compliance-engine/AuditDefensePage.tsx b/packages/web/src/features/compliance-engine/AuditDefensePage.tsx
index caa22c9f..67a385b0 100644
--- a/packages/web/src/features/compliance-engine/AuditDefensePage.tsx
+++ b/packages/web/src/features/compliance-engine/AuditDefensePage.tsx
@@ -334,7 +334,7 @@ export function AuditDefensePage() {
             backgroundColor: 'var(--color-danger-bg)',
             border: '1px solid var(--color-danger-border)',
             borderRadius: 10,
-            color: 'var(--color-danger)',
+            color: 'var(--color-danger-text)',
             fontSize: '0.9rem',
             fontWeight: 700,
             marginTop: '1rem',
diff --git a/packages/web/src/features/compliance-engine/AuditPacketPage.tsx b/packages/web/src/features/compliance-engine/AuditPacketPage.tsx
index 5f87e6b5..d3981704 100644
--- a/packages/web/src/features/compliance-engine/AuditPacketPage.tsx
+++ b/packages/web/src/features/compliance-engine/AuditPacketPage.tsx
@@ -402,7 +402,7 @@ export function AuditPacketPage() {
                 </strong>
                 <svg
                   viewBox={`0 0 ${data.visit.signature.width} ${data.visit.signature.height}`}
-                  style={{ width: '100%', maxWidth: 340, height: 'auto', display: 'block', background: 'var(--color-surface, var(--color-surface))', border: '1px solid var(--color-border, var(--color-border))', borderRadius: 8 }}
+                  style={{ width: '100%', maxWidth: 340, height: 'auto', display: 'block', background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 8 }}
                   role="img"
                   aria-label="Captured signature"
                 >
@@ -411,7 +411,7 @@ export function AuditPacketPage() {
                       key={i}
                       points={stroke.map(([x, y]) => `${x},${y}`).join(' ')}
                       fill="none"
-                      stroke="var(--color-text, var(--color-text))"
+                      stroke="var(--color-text)"
                       strokeWidth={2.5}
                       strokeLinecap="round"
                       strokeLinejoin="round"
diff --git a/packages/web/src/features/compliance-engine/AuthorizationOversightPage.tsx b/packages/web/src/features/compliance-engine/AuthorizationOversightPage.tsx
index ff76484f..611d1665 100644
--- a/packages/web/src/features/compliance-engine/AuthorizationOversightPage.tsx
+++ b/packages/web/src/features/compliance-engine/AuthorizationOversightPage.tsx
@@ -282,7 +282,7 @@ export function AuthorizationOversightPage() {
             backgroundColor: 'var(--color-danger-bg)',
             border: '1px solid var(--color-danger-border)',
             borderRadius: 10,
-            color: 'var(--color-danger)',
+            color: 'var(--color-danger-text)',
             fontSize: '0.9rem',
             fontWeight: 700,
             marginTop: '1rem',
@@ -406,7 +406,7 @@ export function AuthorizationOversightPage() {
               backgroundColor: 'var(--color-danger-bg)',
               border: '1px solid var(--color-danger-border)',
               borderRadius: 8,
-              color: 'var(--color-danger)',
+              color: 'var(--color-danger-text)',
               fontSize: '0.85rem',
               margin: '0.75rem 0 0',
               padding: '0.5rem 0.75rem',
diff --git a/packages/web/src/features/compliance-engine/ClaimMatchingPage.tsx b/packages/web/src/features/compliance-engine/ClaimMatchingPage.tsx
index b004b91c..e3cfea94 100644
--- a/packages/web/src/features/compliance-engine/ClaimMatchingPage.tsx
+++ b/packages/web/src/features/compliance-engine/ClaimMatchingPage.tsx
@@ -407,7 +407,7 @@ export function ClaimMatchingPage() {
             backgroundColor: 'var(--color-danger-bg)',
             border: '1px solid var(--color-danger-border)',
             borderRadius: 10,
-            color: 'var(--color-danger)',
+            color: 'var(--color-danger-text)',
             fontSize: '0.9rem',
             fontWeight: 700,
             marginTop: '1rem',
@@ -422,10 +422,10 @@ export function ClaimMatchingPage() {
         <div
           role="status"
           style={{
-            backgroundColor: 'var(--color-success-bg, var(--color-success-bg))',
-            border: '1px solid var(--color-success, var(--color-success-text))',
+            backgroundColor: 'var(--color-success-bg)',
+            border: '1px solid var(--color-success-text)',
             borderRadius: 10,
-            color: 'var(--color-success, var(--color-success-text))',
+            color: 'var(--color-success-text)',
             fontSize: '0.9rem',
             fontWeight: 700,
             marginTop: '1rem',
diff --git a/packages/web/src/features/compliance-engine/ClearinghouseConfigPage.tsx b/packages/web/src/features/compliance-engine/ClearinghouseConfigPage.tsx
index 43728b3e..ac838d1b 100644
--- a/packages/web/src/features/compliance-engine/ClearinghouseConfigPage.tsx
+++ b/packages/web/src/features/compliance-engine/ClearinghouseConfigPage.tsx
@@ -12,24 +12,24 @@ interface ClearinghouseConfig {
 }
 
 const card: React.CSSProperties = {
-  background: 'var(--color-surface, var(--color-surface))',
-  border: '1px solid var(--color-border, var(--color-border))',
+  background: 'var(--color-surface)',
+  border: '1px solid var(--color-border)',
   borderRadius: 12,
   padding: '1.25rem',
   marginTop: '1rem',
 };
-const label: React.CSSProperties = { display: 'block', fontSize: '0.8125rem', fontWeight: 700, color: 'var(--color-text, var(--color-text))', marginBottom: '0.35rem' };
-const input: React.CSSProperties = { width: '100%', boxSizing: 'border-box', padding: '0.55rem 0.7rem', border: '1px solid var(--color-border, var(--color-border))', borderRadius: 8, fontSize: '0.9rem' };
-const primaryBtn: React.CSSProperties = { background: 'var(--color-primary, var(--color-primary))', border: 'none', borderRadius: 8, color: 'var(--color-surface)', cursor: 'pointer', fontWeight: 700, padding: '0.55rem 1.1rem' };
-const secondaryBtn: React.CSSProperties = { background: 'var(--color-surface, var(--color-surface))', border: '1px solid var(--color-border, var(--color-border))', borderRadius: 8, color: 'var(--color-text, var(--color-text))', cursor: 'pointer', fontWeight: 700, padding: '0.55rem 1.1rem' };
+const label: React.CSSProperties = { display: 'block', fontSize: '0.8125rem', fontWeight: 700, color: 'var(--color-text)', marginBottom: '0.35rem' };
+const input: React.CSSProperties = { width: '100%', boxSizing: 'border-box', padding: '0.55rem 0.7rem', border: '1px solid var(--color-border)', borderRadius: 8, fontSize: '0.9rem' };
+const primaryBtn: React.CSSProperties = { background: 'var(--color-primary)', border: 'none', borderRadius: 8, color: 'var(--color-surface)', cursor: 'pointer', fontWeight: 700, padding: '0.55rem 1.1rem' };
+const secondaryBtn: React.CSSProperties = { background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 8, color: 'var(--color-text)', cursor: 'pointer', fontWeight: 700, padding: '0.55rem 1.1rem' };
 const fieldRow: React.CSSProperties = { marginBottom: '1rem' };
-const hint: React.CSSProperties = { fontSize: '0.75rem', color: 'var(--color-text-muted, var(--color-text-muted))', marginTop: '0.3rem' };
+const hint: React.CSSProperties = { fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: '0.3rem' };
 
 function banner(tone: 'error' | 'success' | 'warning', text: string) {
   const palette = {
-    error: { bg: 'var(--color-accent-bg, var(--color-danger-bg))', fg: 'var(--color-accent, var(--color-danger-text))' },
-    success: { bg: 'var(--color-success-bg, var(--color-success-bg))', fg: 'var(--color-success, var(--color-success-text))' },
-    warning: { bg: 'var(--color-warning-bg, var(--color-warning-bg))', fg: 'var(--color-warning, var(--color-warning-text))' },
+    error: { bg: 'var(--color-danger-bg)', fg: 'var(--color-danger-text)' },
+    success: { bg: 'var(--color-success-bg)', fg: 'var(--color-success-text)' },
+    warning: { bg: 'var(--color-warning-bg)', fg: 'var(--color-warning)' },
   }[tone];
   return <div style={{ background: palette.bg, color: palette.fg, borderRadius: 8, padding: '0.65rem 0.9rem', fontSize: '0.85rem', marginTop: '0.75rem' }}>{text}</div>;
 }
@@ -159,7 +159,7 @@ export function ClearinghouseConfigPage() {
       {loadError && banner('error', loadError)}
 
       <form style={card} onSubmit={onSave}>
-        <h3 style={{ margin: '0 0 0.25rem', fontSize: '1.05rem', color: 'var(--color-text, var(--color-text))' }}>Configuration</h3>
+        <h3 style={{ margin: '0 0 0.25rem', fontSize: '1.05rem', color: 'var(--color-text)' }}>Configuration</h3>
         <p style={{ ...hint, marginTop: 0, marginBottom: '1rem' }}>Credentials are encrypted at rest and never displayed. Leave the credential fields blank to keep the stored values.</p>
 
         <div style={fieldRow}>
@@ -215,8 +215,8 @@ export function ClearinghouseConfigPage() {
         </div>
 
         {!isSandbox && (
-          <div style={{ ...fieldRow, borderTop: '1px solid var(--color-border, var(--color-border))', paddingTop: '1rem' }}>
-            <label style={label}>Credentials {config?.hasCredentials && <span style={{ color: 'var(--color-success, var(--color-success-text))', fontWeight: 600 }}>· stored</span>}</label>
+          <div style={{ ...fieldRow, borderTop: '1px solid var(--color-border)', paddingTop: '1rem' }}>
+            <label style={label}>Credentials {config?.hasCredentials && <span style={{ color: 'var(--color-success-text)', fontWeight: 600 }}>· stored</span>}</label>
             <div style={hint}>An API key, or the SFTP username + password.</div>
             <div style={{ marginTop: '0.6rem' }}>
               <input style={input} value={apiKey} onChange={(e) => setApiKey(e.target.value)} placeholder="API key (optional)" autoComplete="off" type="password" />
@@ -228,8 +228,8 @@ export function ClearinghouseConfigPage() {
           </div>
         )}
 
-        <label style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', fontSize: '0.9rem', color: 'var(--color-text, var(--color-text))', cursor: 'pointer' }}>
-          <input type="checkbox" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} style={{ width: 16, height: 16, accentColor: 'var(--color-primary, var(--color-primary))' }} />
+        <label style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', fontSize: '0.9rem', color: 'var(--color-text)', cursor: 'pointer' }}>
+          <input type="checkbox" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} style={{ width: 16, height: 16, accentColor: 'var(--color-primary)' }} />
           Enable clearinghouse connection for this agency
         </label>
 
diff --git a/packages/web/src/features/compliance-engine/CredentialsPage.tsx b/packages/web/src/features/compliance-engine/CredentialsPage.tsx
index fc1efe99..697f554b 100644
--- a/packages/web/src/features/compliance-engine/CredentialsPage.tsx
+++ b/packages/web/src/features/compliance-engine/CredentialsPage.tsx
@@ -201,7 +201,7 @@ export function CredentialsPage() {
             backgroundColor: 'var(--color-danger-bg)',
             border: '1px solid var(--color-danger-border)',
             borderRadius: 10,
-            color: 'var(--color-danger)',
+            color: 'var(--color-danger-text)',
             fontSize: '0.9rem',
             fontWeight: 700,
             marginTop: '1rem',
diff --git a/packages/web/src/features/compliance-engine/EvvSubmissionPage.tsx b/packages/web/src/features/compliance-engine/EvvSubmissionPage.tsx
index 0ec04bf3..563accfc 100644
--- a/packages/web/src/features/compliance-engine/EvvSubmissionPage.tsx
+++ b/packages/web/src/features/compliance-engine/EvvSubmissionPage.tsx
@@ -22,8 +22,8 @@ interface SubmitOk {
 }
 
 const card: React.CSSProperties = {
-  background: 'var(--color-surface, var(--color-surface))',
-  border: '1px solid var(--color-border, var(--color-border))',
+  background: 'var(--color-surface)',
+  border: '1px solid var(--color-border)',
   borderRadius: 12,
   padding: '1.25rem',
   marginTop: '1rem',
@@ -33,7 +33,7 @@ const label: React.CSSProperties = {
   display: 'block',
   fontSize: '0.8125rem',
   fontWeight: 700,
-  color: 'var(--color-text, var(--color-text))',
+  color: 'var(--color-text)',
   marginBottom: '0.35rem',
 };
 
@@ -41,13 +41,13 @@ const input: React.CSSProperties = {
   width: '100%',
   boxSizing: 'border-box',
   padding: '0.55rem 0.7rem',
-  border: '1px solid var(--color-border, var(--color-border))',
+  border: '1px solid var(--color-border)',
   borderRadius: 8,
   fontSize: '0.9rem',
 };
 
 const primaryBtn: React.CSSProperties = {
-  background: 'var(--color-primary, var(--color-primary))',
+  background: 'var(--color-primary)',
   border: 'none',
   borderRadius: 8,
   color: 'var(--color-surface)',
@@ -57,13 +57,13 @@ const primaryBtn: React.CSSProperties = {
 };
 
 const fieldRow: React.CSSProperties = { marginBottom: '1rem' };
-const hint: React.CSSProperties = { fontSize: '0.75rem', color: 'var(--color-text-muted, var(--color-text-muted))', marginTop: '0.3rem' };
+const hint: React.CSSProperties = { fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: '0.3rem' };
 
 function banner(tone: 'error' | 'success' | 'info', text: string) {
   const palette = {
-    error: { bg: 'var(--color-accent-bg, var(--color-danger-bg))', fg: 'var(--color-accent, var(--color-danger-text))' },
-    success: { bg: 'var(--color-success-bg, var(--color-success-bg))', fg: 'var(--color-success, var(--color-success-text))' },
-    info: { bg: 'var(--color-primary-bg, var(--color-info-bg))', fg: 'var(--color-primary-dark, var(--color-primary-dark))' },
+    error: { bg: 'var(--color-danger-bg)', fg: 'var(--color-danger-text)' },
+    success: { bg: 'var(--color-success-bg)', fg: 'var(--color-success-text)' },
+    info: { bg: 'var(--color-info-bg)', fg: 'var(--color-primary-dark)' },
   }[tone];
   return (
     <div style={{ background: palette.bg, color: palette.fg, borderRadius: 8, padding: '0.65rem 0.9rem', fontSize: '0.85rem', marginTop: '0.75rem' }}>
@@ -196,7 +196,7 @@ export function EvvSubmissionPage() {
 
       {/* ─── Configuration ─────────────────────────────────────────────── */}
       <form style={card} onSubmit={onSave}>
-        <h3 style={{ margin: '0 0 0.25rem', fontSize: '1.05rem', color: 'var(--color-text, var(--color-text))' }}>Configuration</h3>
+        <h3 style={{ margin: '0 0 0.25rem', fontSize: '1.05rem', color: 'var(--color-text)' }}>Configuration</h3>
         <p style={{ ...hint, marginTop: 0, marginBottom: '1rem' }}>
           Credentials are encrypted at rest and never displayed. Leave the credential fields blank to keep the stored values.
         </p>
@@ -218,8 +218,8 @@ export function EvvSubmissionPage() {
           <input id="timezone" style={input} value={timezone} onChange={(e) => setTimezone(e.target.value)} placeholder="America/New_York" />
         </div>
 
-        <div style={{ ...fieldRow, borderTop: '1px solid var(--color-border, var(--color-border))', paddingTop: '1rem' }}>
-          <label style={label}>API credentials {config?.hasCredentials && <span style={{ color: 'var(--color-success, var(--color-success-text))', fontWeight: 600 }}>· stored</span>}</label>
+        <div style={{ ...fieldRow, borderTop: '1px solid var(--color-border)', paddingTop: '1rem' }}>
+          <label style={label}>API credentials {config?.hasCredentials && <span style={{ color: 'var(--color-success-text)', fontWeight: 600 }}>· stored</span>}</label>
           <div style={hint}>Provide either an API key, or a username + password, whichever Sandata issued for this agency.</div>
           <div style={{ marginTop: '0.6rem' }}>
             <input style={input} value={apiKey} onChange={(e) => setApiKey(e.target.value)} placeholder="API key (optional)" autoComplete="off" type="password" />
@@ -230,8 +230,8 @@ export function EvvSubmissionPage() {
           </div>
         </div>
 
-        <label style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', fontSize: '0.9rem', color: 'var(--color-text, var(--color-text))', cursor: 'pointer' }}>
-          <input type="checkbox" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} style={{ width: 16, height: 16, accentColor: 'var(--color-primary, var(--color-primary))' }} />
+        <label style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', fontSize: '0.9rem', color: 'var(--color-text)', cursor: 'pointer' }}>
+          <input type="checkbox" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} style={{ width: 16, height: 16, accentColor: 'var(--color-primary)' }} />
           Enable automated Sandata submission for this agency
         </label>
 
@@ -246,7 +246,7 @@ export function EvvSubmissionPage() {
 
       {/* ─── Submit a batch ────────────────────────────────────────────── */}
       <form style={card} onSubmit={onSubmitBatch}>
-        <h3 style={{ margin: '0 0 0.25rem', fontSize: '1.05rem', color: 'var(--color-text, var(--color-text))' }}>Submit a batch</h3>
+        <h3 style={{ margin: '0 0 0.25rem', fontSize: '1.05rem', color: 'var(--color-text)' }}>Submit a batch</h3>
         <p style={{ ...hint, marginTop: 0, marginBottom: '1rem' }}>
           Transmits every <strong>verified</strong> visit in the date range to Sandata and records each acknowledgment. Leave dates blank to include all verified visits.
         </p>
diff --git a/packages/web/src/features/compliance-engine/ExceptionResolutionPage.tsx b/packages/web/src/features/compliance-engine/ExceptionResolutionPage.tsx
index aaea8dca..4b361888 100644
--- a/packages/web/src/features/compliance-engine/ExceptionResolutionPage.tsx
+++ b/packages/web/src/features/compliance-engine/ExceptionResolutionPage.tsx
@@ -327,7 +327,7 @@ export function ExceptionResolutionPage() {
             backgroundColor: 'var(--color-danger-bg)',
             border: '1px solid var(--color-danger-border)',
             borderRadius: 10,
-            color: 'var(--color-danger)',
+            color: 'var(--color-danger-text)',
             fontSize: '0.9rem',
             fontWeight: 700,
             marginTop: '1rem',
@@ -512,7 +512,7 @@ export function ExceptionResolutionPage() {
               backgroundColor: 'var(--color-danger-bg)',
               border: '1px solid var(--color-danger-border)',
               borderRadius: 8,
-              color: 'var(--color-danger)',
+              color: 'var(--color-danger-text)',
               fontSize: '0.85rem',
               margin: '0.75rem 0 0',
               padding: '0.5rem 0.75rem',
diff --git a/packages/web/src/features/compliance-engine/HhaexchangeSubmissionPage.tsx b/packages/web/src/features/compliance-engine/HhaexchangeSubmissionPage.tsx
index 712781ca..90101d0d 100644
--- a/packages/web/src/features/compliance-engine/HhaexchangeSubmissionPage.tsx
+++ b/packages/web/src/features/compliance-engine/HhaexchangeSubmissionPage.tsx
@@ -23,23 +23,23 @@ interface SubmitOk {
 }
 
 const card: React.CSSProperties = {
-  background: 'var(--color-surface, var(--color-surface))',
-  border: '1px solid var(--color-border, var(--color-border))',
+  background: 'var(--color-surface)',
+  border: '1px solid var(--color-border)',
   borderRadius: 12,
   padding: '1.25rem',
   marginTop: '1rem',
 };
-const label: React.CSSProperties = { display: 'block', fontSize: '0.8125rem', fontWeight: 700, color: 'var(--color-text, var(--color-text))', marginBottom: '0.35rem' };
-const input: React.CSSProperties = { width: '100%', boxSizing: 'border-box', padding: '0.55rem 0.7rem', border: '1px solid var(--color-border, var(--color-border))', borderRadius: 8, fontSize: '0.9rem' };
-const primaryBtn: React.CSSProperties = { background: 'var(--color-primary, var(--color-primary))', border: 'none', borderRadius: 8, color: 'var(--color-surface)', cursor: 'pointer', fontWeight: 700, padding: '0.55rem 1.1rem' };
+const label: React.CSSProperties = { display: 'block', fontSize: '0.8125rem', fontWeight: 700, color: 'var(--color-text)', marginBottom: '0.35rem' };
+const input: React.CSSProperties = { width: '100%', boxSizing: 'border-box', padding: '0.55rem 0.7rem', border: '1px solid var(--color-border)', borderRadius: 8, fontSize: '0.9rem' };
+const primaryBtn: React.CSSProperties = { background: 'var(--color-primary)', border: 'none', borderRadius: 8, color: 'var(--color-surface)', cursor: 'pointer', fontWeight: 700, padding: '0.55rem 1.1rem' };
 const fieldRow: React.CSSProperties = { marginBottom: '1rem' };
-const hint: React.CSSProperties = { fontSize: '0.75rem', color: 'var(--color-text-muted, var(--color-text-muted))', marginTop: '0.3rem' };
+const hint: React.CSSProperties = { fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: '0.3rem' };
 
 function banner(tone: 'error' | 'success' | 'info', text: string) {
   const palette = {
-    error: { bg: 'var(--color-accent-bg, var(--color-danger-bg))', fg: 'var(--color-accent, var(--color-danger-text))' },
-    success: { bg: 'var(--color-success-bg, var(--color-success-bg))', fg: 'var(--color-success, var(--color-success-text))' },
-    info: { bg: 'var(--color-primary-bg, var(--color-info-bg))', fg: 'var(--color-primary-dark, var(--color-primary-dark))' },
+    error: { bg: 'var(--color-danger-bg)', fg: 'var(--color-danger-text)' },
+    success: { bg: 'var(--color-success-bg)', fg: 'var(--color-success-text)' },
+    info: { bg: 'var(--color-info-bg)', fg: 'var(--color-primary-dark)' },
   }[tone];
   return (
     <div style={{ background: palette.bg, color: palette.fg, borderRadius: 8, padding: '0.65rem 0.9rem', fontSize: '0.85rem', marginTop: '0.75rem' }}>{text}</div>
@@ -159,7 +159,7 @@ export function HhaexchangeSubmissionPage() {
       {loadError && banner('error', loadError)}
 
       <form style={card} onSubmit={onSave}>
-        <h3 style={{ margin: '0 0 0.25rem', fontSize: '1.05rem', color: 'var(--color-text, var(--color-text))' }}>Configuration</h3>
+        <h3 style={{ margin: '0 0 0.25rem', fontSize: '1.05rem', color: 'var(--color-text)' }}>Configuration</h3>
         <p style={{ ...hint, marginTop: 0, marginBottom: '1rem' }}>Credentials are encrypted at rest and never displayed. Leave the credential fields blank to keep the stored values.</p>
 
         <div style={fieldRow}>
@@ -179,8 +179,8 @@ export function HhaexchangeSubmissionPage() {
           <input id="timezone" style={input} value={timezone} onChange={(e) => setTimezone(e.target.value)} placeholder="America/New_York" />
         </div>
 
-        <div style={{ ...fieldRow, borderTop: '1px solid var(--color-border, var(--color-border))', paddingTop: '1rem' }}>
-          <label style={label}>Issued integration credentials {config?.hasCredentials && <span style={{ color: 'var(--color-success, var(--color-success-text))', fontWeight: 600 }}>· stored</span>}</label>
+        <div style={{ ...fieldRow, borderTop: '1px solid var(--color-border)', paddingTop: '1rem' }}>
+          <label style={label}>Issued integration credentials {config?.hasCredentials && <span style={{ color: 'var(--color-success-text)', fontWeight: 600 }}>· stored</span>}</label>
           <div style={hint}>Store only credentials HHAeXchange issued after vendor onboarding/testing. Pennsylvania V5 commonly uses an SFTP account.</div>
           <div style={{ marginTop: '0.6rem' }}>
             <input style={input} value={apiKey} onChange={(e) => setApiKey(e.target.value)} placeholder="API key (optional)" autoComplete="off" type="password" />
@@ -191,8 +191,8 @@ export function HhaexchangeSubmissionPage() {
           </div>
         </div>
 
-        <label style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', fontSize: '0.9rem', color: 'var(--color-text, var(--color-text))', cursor: 'pointer' }}>
-          <input type="checkbox" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} style={{ width: 16, height: 16, accentColor: 'var(--color-primary, var(--color-primary))' }} />
+        <label style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', fontSize: '0.9rem', color: 'var(--color-text)', cursor: 'pointer' }}>
+          <input type="checkbox" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} style={{ width: 16, height: 16, accentColor: 'var(--color-primary)' }} />
           Enable HHAeXchange submission for this agency
         </label>
 
@@ -203,7 +203,7 @@ export function HhaexchangeSubmissionPage() {
       </form>
 
       <form style={card} onSubmit={onSubmitBatch}>
-        <h3 style={{ margin: '0 0 0.25rem', fontSize: '1.05rem', color: 'var(--color-text, var(--color-text))' }}>Submit a batch</h3>
+        <h3 style={{ margin: '0 0 0.25rem', fontSize: '1.05rem', color: 'var(--color-text)' }}>Submit a batch</h3>
         <p style={{ ...hint, marginTop: 0, marginBottom: '1rem' }}>Production submission remains disabled until the official PA V5 mapping and HHAeXchange-issued SFTP onboarding artifacts are installed and validated. The current CSV is a mapping preview only.</p>
         <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'flex-end', flexWrap: 'wrap' }}>
           <div>
diff --git a/packages/web/src/features/compliance-engine/MedicaidWorkflowPage.tsx b/packages/web/src/features/compliance-engine/MedicaidWorkflowPage.tsx
index 7e04e061..f9281a09 100644
--- a/packages/web/src/features/compliance-engine/MedicaidWorkflowPage.tsx
+++ b/packages/web/src/features/compliance-engine/MedicaidWorkflowPage.tsx
@@ -268,7 +268,7 @@ export function MedicaidWorkflowPage() {
             backgroundColor: 'var(--color-danger-bg)',
             border: '1px solid var(--color-danger-border)',
             borderRadius: 10,
-            color: 'var(--color-danger)',
+            color: 'var(--color-danger-text)',
             fontSize: '0.9rem',
             fontWeight: 700,
             marginTop: '1rem',
@@ -430,12 +430,12 @@ export function MedicaidWorkflowPage() {
             role={submitMsg.kind === 'err' ? 'alert' : 'status'}
             style={{
               backgroundColor:
-                submitMsg.kind === 'err' ? 'var(--color-danger-bg)' : 'var(--color-success-bg, var(--color-success-bg))',
+                submitMsg.kind === 'err' ? 'var(--color-danger-bg)' : 'var(--color-success-bg)',
               border: `1px solid ${
-                submitMsg.kind === 'err' ? 'var(--color-danger-border)' : 'var(--color-success-border, var(--color-success-border))'
+                submitMsg.kind === 'err' ? 'var(--color-danger-border)' : 'var(--color-success-border)'
               }`,
               borderRadius: 10,
-              color: submitMsg.kind === 'err' ? 'var(--color-danger)' : 'var(--color-success, var(--color-success-text))',
+              color: submitMsg.kind === 'err' ? 'var(--color-danger)' : 'var(--color-success-text)',
               fontSize: '0.9rem',
               fontWeight: 700,
               marginTop: '1rem',
@@ -521,12 +521,12 @@ export function MedicaidWorkflowPage() {
             role={hhaxMsg.kind === 'err' ? 'alert' : 'status'}
             style={{
               backgroundColor:
-                hhaxMsg.kind === 'err' ? 'var(--color-danger-bg)' : 'var(--color-success-bg, var(--color-success-bg))',
+                hhaxMsg.kind === 'err' ? 'var(--color-danger-bg)' : 'var(--color-success-bg)',
               border: `1px solid ${
-                hhaxMsg.kind === 'err' ? 'var(--color-danger-border)' : 'var(--color-success-border, var(--color-success-border))'
+                hhaxMsg.kind === 'err' ? 'var(--color-danger-border)' : 'var(--color-success-border)'
               }`,
               borderRadius: 10,
-              color: hhaxMsg.kind === 'err' ? 'var(--color-danger)' : 'var(--color-success, var(--color-success-text))',
+              color: hhaxMsg.kind === 'err' ? 'var(--color-danger)' : 'var(--color-success-text)',
               fontSize: '0.9rem',
               fontWeight: 700,
               marginTop: '1rem',
diff --git a/packages/web/src/features/compliance-engine/PayrollReconciliationPage.tsx b/packages/web/src/features/compliance-engine/PayrollReconciliationPage.tsx
index 67234b94..c27324e2 100644
--- a/packages/web/src/features/compliance-engine/PayrollReconciliationPage.tsx
+++ b/packages/web/src/features/compliance-engine/PayrollReconciliationPage.tsx
@@ -209,7 +209,7 @@ export function PayrollReconciliationPage() {
             backgroundColor: 'var(--color-danger-bg)',
             border: '1px solid var(--color-danger-border)',
             borderRadius: 10,
-            color: 'var(--color-danger)',
+            color: 'var(--color-danger-text)',
             fontSize: '0.9rem',
             fontWeight: 700,
             marginTop: '1rem',
@@ -248,7 +248,7 @@ export function PayrollReconciliationPage() {
           </button>
         </div>
         {exportError ? (
-          <div role="alert" style={{ color: 'var(--color-danger)', fontSize: '0.85rem', fontWeight: 700, marginTop: '0.75rem' }}>
+          <div role="alert" style={{ color: 'var(--color-danger-text)', fontSize: '0.85rem', fontWeight: 700, marginTop: '0.75rem' }}>
             {exportError}
           </div>
         ) : null}
diff --git a/packages/web/src/features/compliance-engine/RemittancePage.tsx b/packages/web/src/features/compliance-engine/RemittancePage.tsx
index a9bfcc9f..dd754e46 100644
--- a/packages/web/src/features/compliance-engine/RemittancePage.tsx
+++ b/packages/web/src/features/compliance-engine/RemittancePage.tsx
@@ -141,15 +141,15 @@ const usdFmt = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'US
 const usd = (cents: number) => usdFmt.format((Number.isFinite(cents) ? cents : 0) / 100);
 
 const card: React.CSSProperties = {
-  background: 'var(--color-surface, var(--color-surface))',
-  border: '1px solid var(--color-border, var(--color-border))',
+  background: 'var(--color-surface)',
+  border: '1px solid var(--color-border)',
   borderRadius: 12,
   padding: '1.25rem',
   marginTop: '1rem',
 };
 
 const primaryBtn: React.CSSProperties = {
-  background: 'var(--color-primary, var(--color-primary))',
+  background: 'var(--color-primary)',
   border: 'none',
   borderRadius: 8,
   color: 'var(--color-surface)',
@@ -298,8 +298,8 @@ export function RemittancePage() {
               marginTop: '0.75rem',
               padding: '0.65rem 0.9rem',
               borderRadius: 8,
-              background: sweepMsg.tone === 'error' ? 'var(--color-danger-bg, var(--color-danger-bg))' : 'var(--color-success-bg, var(--color-success-bg))',
-              color: sweepMsg.tone === 'error' ? 'var(--color-danger, var(--color-danger-text))' : 'var(--color-success, var(--color-success-text))',
+              background: sweepMsg.tone === 'error' ? 'var(--color-danger-bg)' : 'var(--color-success-bg)',
+              color: sweepMsg.tone === 'error' ? 'var(--color-danger-text)' : 'var(--color-success-text)',
               fontWeight: 600,
               fontSize: '0.9rem',
             }}
@@ -398,9 +398,9 @@ export function RemittancePage() {
               marginTop: '1rem',
               padding: '0.75rem 1rem',
               borderRadius: 8,
-              background: 'var(--color-success-bg, var(--color-success-bg))',
-              border: '1px solid var(--color-success-border, var(--color-success-border))',
-              color: 'var(--color-success, var(--color-success-text))',
+              background: 'var(--color-success-bg)',
+              border: '1px solid var(--color-success-border)',
+              color: 'var(--color-success-text)',
               fontWeight: 600,
             }}
           >
@@ -416,9 +416,9 @@ export function RemittancePage() {
               marginTop: '1rem',
               padding: '0.75rem 1rem',
               borderRadius: 8,
-              background: 'var(--color-danger-bg, var(--color-danger-bg))',
-              border: '1px solid var(--color-danger-border, var(--color-danger-border))',
-              color: 'var(--color-danger, var(--color-danger-text))',
+              background: 'var(--color-danger-bg)',
+              border: '1px solid var(--color-danger-border)',
+              color: 'var(--color-danger-text)',
               fontWeight: 600,
             }}
           >
diff --git a/packages/web/src/features/evv/VisitReviewPage.tsx b/packages/web/src/features/evv/VisitReviewPage.tsx
index cd7ff193..f3c3b0bf 100644
--- a/packages/web/src/features/evv/VisitReviewPage.tsx
+++ b/packages/web/src/features/evv/VisitReviewPage.tsx
@@ -189,7 +189,7 @@ export function VisitReviewPage() {
               display: 'inline-flex', alignItems: 'center', gap: '0.4rem',
               background: 'rgba(220,38,38,0.08)', border: '1px solid rgba(220,38,38,0.18)',
               borderRadius: '999px', padding: '0.3rem 0.85rem',
-              fontSize: '0.7rem', fontWeight: 700, color: 'var(--color-danger)',
+              fontSize: '0.7rem', fontWeight: 700, color: 'var(--color-danger-text)',
             }}
           >
             Flagged: {flaggedCount}
diff --git a/packages/web/src/features/import/ImportPage.tsx b/packages/web/src/features/import/ImportPage.tsx
index f99523ac..d1b515a6 100644
--- a/packages/web/src/features/import/ImportPage.tsx
+++ b/packages/web/src/features/import/ImportPage.tsx
@@ -51,8 +51,8 @@ const ENTITIES: { value: ImportEntity; label: string; blurb: string }[] = [
 ];
 
 const card: React.CSSProperties = {
-  background: 'var(--color-surface, var(--color-surface))',
-  border: '1px solid var(--color-border, var(--color-border))',
+  background: 'var(--color-surface)',
+  border: '1px solid var(--color-border)',
   borderRadius: 12,
   padding: '1.25rem',
   marginBottom: '1.25rem',
diff --git a/packages/web/src/features/learning/AICopilotPanel.tsx b/packages/web/src/features/learning/AICopilotPanel.tsx
index 14c22442..fcb87526 100644
--- a/packages/web/src/features/learning/AICopilotPanel.tsx
+++ b/packages/web/src/features/learning/AICopilotPanel.tsx
@@ -222,7 +222,7 @@ const secondaryLinkStyle: React.CSSProperties = {
 };
 
 const mutedNoteStyle: React.CSSProperties = {
-  color: 'var(--color-text-muted, var(--color-text-muted))',
+  color: 'var(--color-text-muted)',
   fontSize: '0.85rem',
   alignSelf: 'center',
 };
diff --git a/packages/web/src/features/learning/CaregiverLearningPage.tsx b/packages/web/src/features/learning/CaregiverLearningPage.tsx
index 9446ebf3..588a542a 100644
--- a/packages/web/src/features/learning/CaregiverLearningPage.tsx
+++ b/packages/web/src/features/learning/CaregiverLearningPage.tsx
@@ -127,7 +127,7 @@ export function CaregiverLearningPage() {
       <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '2rem' }}>
         <div>
           <h2 style={{ margin: 0, fontSize: '1.5rem' }}>Caregiver learning</h2>
-          <p style={{ margin: '0.25rem 0 0', color: 'var(--color-text-muted, var(--color-text-muted))', fontSize: '0.9rem' }}>
+          <p style={{ margin: '0.25rem 0 0', color: 'var(--color-text-muted)', fontSize: '0.9rem' }}>
             Caregiver <code style={codeStyle}>{caregiverId}</code>
           </p>
         </div>
@@ -150,7 +150,7 @@ export function CaregiverLearningPage() {
             <span style={progress.isCompliant ? compliantBadgeStyle : nonCompliantBadgeStyle}>
               {progress.isCompliant ? 'Compliant' : 'Non-compliant'}
             </span>
-            <span style={{ marginLeft: '0.75rem', fontSize: '0.85rem', color: 'var(--color-text-muted, var(--color-text-muted))' }}>
+            <span style={{ marginLeft: '0.75rem', fontSize: '0.85rem', color: 'var(--color-text-muted)' }}>
               {progress.enrollments.length} enrollment{progress.enrollments.length === 1 ? '' : 's'}
             </span>
           </div>
@@ -158,7 +158,7 @@ export function CaregiverLearningPage() {
           {progress.enrollments.length === 0 && (
             <div style={emptyStateStyle}>
               <p style={{ margin: 0 }}>No courses assigned yet.</p>
-              <p style={{ margin: '0.5rem 0 0', fontSize: '0.85rem', color: 'var(--color-text-muted, var(--color-text-muted))' }}>
+              <p style={{ margin: '0.5rem 0 0', fontSize: '0.85rem', color: 'var(--color-text-muted)' }}>
                 Use the Enroll button on the Learning Hub to assign training.
               </p>
             </div>
@@ -247,7 +247,7 @@ const metaRowStyle: React.CSSProperties = {
   flexWrap: 'wrap',
   gap: '1.25rem',
   fontSize: '0.85rem',
-  color: 'var(--color-text-muted, var(--color-text-muted))',
+  color: 'var(--color-text-muted)',
 };
 
 const codeStyle: React.CSSProperties = {
diff --git a/packages/web/src/features/learning/CertificatePage.tsx b/packages/web/src/features/learning/CertificatePage.tsx
index c7386faa..6abb924b 100644
--- a/packages/web/src/features/learning/CertificatePage.tsx
+++ b/packages/web/src/features/learning/CertificatePage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { getJson } from '../../lib/api-client.js';
+import { tint } from '../../lib/color.js';
 
 /**
  * Printable certificate of completion for a caregiver's completed course.
@@ -50,7 +51,7 @@ export function CertificatePage() {
         <button type="button" onClick={() => navigate('/portal/training')} style={{ background: 'none', border: 'none', color: 'var(--color-primary)', fontWeight: 600, fontSize: '0.875rem', cursor: 'pointer', padding: '0 0 1rem' }}>
           ← Back to My Training
         </button>
-        <div style={{ background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', borderRadius: '10px', padding: '2rem', color: 'var(--color-danger)', textAlign: 'center' }}>
+        <div style={{ background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', borderRadius: '10px', padding: '2rem', color: 'var(--color-danger-text)', textAlign: 'center' }}>
           {error ?? 'Certificate not available.'}
         </div>
       </div>
@@ -90,7 +91,7 @@ export function CertificatePage() {
           overflow: 'hidden',
         }}
       >
-        <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% -10%, rgba(16,116,128,0.08), transparent 60%)', pointerEvents: 'none' }} />
+        <div aria-hidden style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle at 50% -10%, ${tint('var(--color-primary)', 8)}, transparent 60%)`, pointerEvents: 'none' }} />
 
         <div style={{ position: 'relative' }}>
           <div style={{ fontSize: '0.8125rem', fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--color-primary)', marginBottom: '0.5rem' }}>
diff --git a/packages/web/src/features/learning/CopilotChatPage.tsx b/packages/web/src/features/learning/CopilotChatPage.tsx
index 685a05bd..08349205 100644
--- a/packages/web/src/features/learning/CopilotChatPage.tsx
+++ b/packages/web/src/features/learning/CopilotChatPage.tsx
@@ -237,7 +237,7 @@ export function CopilotChatPage(): ReactElement {
       <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '1.5rem' }}>
         <div>
           <h2 style={{ margin: 0, fontSize: '1.5rem' }}>AI Workflow Copilot</h2>
-          <p style={{ margin: '0.25rem 0 0', color: 'var(--color-text-muted, var(--color-text-muted))', fontSize: '0.9rem' }}>
+          <p style={{ margin: '0.25rem 0 0', color: 'var(--color-text-muted)', fontSize: '0.9rem' }}>
             Conversational copilot scoped to your role. Every proposed action requires your confirmation.
           </p>
         </div>
@@ -537,7 +537,7 @@ const sendBtnStyle: React.CSSProperties = {
 const attestationStyle: React.CSSProperties = {
   margin: '0.75rem 0 0',
   fontSize: '0.75rem',
-  color: 'var(--color-text-muted, var(--color-text-subtle))',
+  color: 'var(--color-text-muted)',
   textAlign: 'center',
 };
 
diff --git a/packages/web/src/features/learning/CourseCatalogPage.tsx b/packages/web/src/features/learning/CourseCatalogPage.tsx
index 64270aaf..a99eb352 100644
--- a/packages/web/src/features/learning/CourseCatalogPage.tsx
+++ b/packages/web/src/features/learning/CourseCatalogPage.tsx
@@ -61,7 +61,7 @@ export function CourseCatalogPage() {
       <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '2rem' }}>
         <div>
           <h2 style={{ margin: 0, fontSize: '1.5rem' }}>Course catalog</h2>
-          <p style={{ margin: '0.25rem 0 0', color: 'var(--color-text-muted, var(--color-text-muted))', fontSize: '0.9rem' }}>
+          <p style={{ margin: '0.25rem 0 0', color: 'var(--color-text-muted)', fontSize: '0.9rem' }}>
             Training courses available to assign to caregivers.
           </p>
         </div>
@@ -93,10 +93,10 @@ export function CourseCatalogPage() {
                 {course.required && <span style={requiredBadgeStyle}>Required</span>}
                 {course.agencyId === null && <span style={globalBadgeStyle}>Global</span>}
               </div>
-              <p style={{ margin: '0 0 0.75rem', color: 'var(--color-text-muted, var(--color-text-secondary))', fontSize: '0.9rem', lineHeight: 1.5 }}>
+              <p style={{ margin: '0 0 0.75rem', color: 'var(--color-text-muted)', fontSize: '0.9rem', lineHeight: 1.5 }}>
                 {course.description}
               </p>
-              <div style={{ display: 'flex', gap: '1.25rem', fontSize: '0.85rem', color: 'var(--color-text-muted, var(--color-text-muted))', flexWrap: 'wrap' }}>
+              <div style={{ display: 'flex', gap: '1.25rem', fontSize: '0.85rem', color: 'var(--color-text-muted)', flexWrap: 'wrap' }}>
                 <span><strong>Code:</strong> {course.code}</span>
                 <span><strong>Cadence:</strong> {CADENCE_LABEL[course.cadence]}</span>
                 <span><strong>Duration:</strong> {course.durationMinutes} min</span>
diff --git a/packages/web/src/features/learning/CourseDetailPage.tsx b/packages/web/src/features/learning/CourseDetailPage.tsx
index 6fa45966..96dd5042 100644
--- a/packages/web/src/features/learning/CourseDetailPage.tsx
+++ b/packages/web/src/features/learning/CourseDetailPage.tsx
@@ -103,7 +103,7 @@ export function CourseDetailPage(): ReactElement {
             {envelope?.course.title ?? 'Course detail'}
           </h2>
           {envelope?.course && (
-            <p style={{ margin: '0.25rem 0 0', color: 'var(--color-text-muted, var(--color-text-muted))', fontSize: '0.9rem' }}>
+            <p style={{ margin: '0.25rem 0 0', color: 'var(--color-text-muted)', fontSize: '0.9rem' }}>
               {envelope.course.code} · {envelope.course.required ? 'Required · ' : ''}{cadenceLabel(envelope.course.cadence)}
             </p>
           )}
@@ -143,7 +143,7 @@ export function CourseDetailPage(): ReactElement {
                   <span style={{ ...statusPillStyle, color: theme.fg, backgroundColor: theme.bg }}>
                     {STATUS_LABEL[status]}
                   </span>
-                  <span style={{ color: 'var(--color-text-muted, var(--color-text-muted))', fontSize: '0.85rem', fontWeight: 400 }}>
+                  <span style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem', fontWeight: 400 }}>
                     {rows.length} caregiver{rows.length === 1 ? '' : 's'}
                   </span>
                 </h3>
@@ -161,7 +161,7 @@ export function CourseDetailPage(): ReactElement {
                               {row.enrollment.expiresAt && ` · Expires ${formatDate(row.enrollment.expiresAt)}`}
                             </div>
                           </div>
-                          <span style={{ color: 'var(--color-text-muted, var(--color-text-subtle))', fontSize: '0.85rem' }}>→</span>
+                          <span style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>→</span>
                         </article>
                       </Link>
                     </li>
@@ -233,7 +233,7 @@ const rowCardStyle: React.CSSProperties = {
 
 const metaLineStyle: React.CSSProperties = {
   fontSize: '0.85rem',
-  color: 'var(--color-text-muted, var(--color-text-muted))',
+  color: 'var(--color-text-muted)',
   marginTop: '0.25rem',
 };
 
diff --git a/packages/web/src/features/learning/CourseEditorPage.tsx b/packages/web/src/features/learning/CourseEditorPage.tsx
index c8f3217f..282ea118 100644
--- a/packages/web/src/features/learning/CourseEditorPage.tsx
+++ b/packages/web/src/features/learning/CourseEditorPage.tsx
@@ -61,7 +61,7 @@ const inputStyle: React.CSSProperties = { width: '100%', padding: '0.55rem 0.7re
 const cardStyle: React.CSSProperties = { background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: '12px', padding: '1.25rem 1.5rem', marginBottom: '1.25rem' };
 const sectionTitleStyle: React.CSSProperties = { fontSize: '0.75rem', fontWeight: 700, color: 'var(--color-text-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', margin: '0 0 0.85rem' };
 const smallBtn: React.CSSProperties = { padding: '0.35rem 0.75rem', fontSize: '0.8125rem', fontWeight: 600, borderRadius: '7px', border: '1px solid var(--color-border)', background: 'var(--color-bg)', color: 'var(--color-text-secondary)', cursor: 'pointer' };
-const removeBtn: React.CSSProperties = { ...smallBtn, color: 'var(--color-danger)', borderColor: 'var(--color-danger-border)', background: 'var(--color-danger-bg)' };
+const removeBtn: React.CSSProperties = { ...smallBtn, color: 'var(--color-danger-text)', borderColor: 'var(--color-danger-border)', background: 'var(--color-danger-bg)' };
 
 export function CourseEditorPage() {
   const { id } = useParams<{ id: string }>();
@@ -200,7 +200,7 @@ export function CourseEditorPage() {
       </p>
 
       {error && (
-        <div role="alert" style={{ background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', color: 'var(--color-danger)', borderRadius: '8px', padding: '0.75rem 1rem', marginBottom: '1.25rem', fontSize: '0.875rem' }}>
+        <div role="alert" style={{ background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', color: 'var(--color-danger-text)', borderRadius: '8px', padding: '0.75rem 1rem', marginBottom: '1.25rem', fontSize: '0.875rem' }}>
           {error}
         </div>
       )}
diff --git a/packages/web/src/features/learning/EnrollCaregiverModal.tsx b/packages/web/src/features/learning/EnrollCaregiverModal.tsx
index e72fc733..2d7aed98 100644
--- a/packages/web/src/features/learning/EnrollCaregiverModal.tsx
+++ b/packages/web/src/features/learning/EnrollCaregiverModal.tsx
@@ -245,7 +245,7 @@ export function EnrollCaregiverModal({
               )}
               <div style={caregiverListStyle}>
                 {filteredCaregivers.length === 0 && (
-                  <p style={{ padding: '0.75rem', margin: 0, color: 'var(--color-text-muted, var(--color-text-muted))', fontSize: '0.9rem' }}>
+                  <p style={{ padding: '0.75rem', margin: 0, color: 'var(--color-text-muted)', fontSize: '0.9rem' }}>
                     No active caregivers match.
                   </p>
                 )}
@@ -265,7 +265,7 @@ export function EnrollCaregiverModal({
                       />
                       <span style={{ flex: 1, marginLeft: '0.6rem' }}>
                         <strong>{c.firstName} {c.lastName}</strong>
-                        <span style={{ color: 'var(--color-text-muted, var(--color-text-muted))', marginLeft: '0.5rem', fontSize: '0.85rem' }}>
+                        <span style={{ color: 'var(--color-text-muted)', marginLeft: '0.5rem', fontSize: '0.85rem' }}>
                           {c.email}
                         </span>
                       </span>
@@ -348,7 +348,7 @@ const footerStyle: React.CSSProperties = {
 const labelStyle: React.CSSProperties = {
   display: 'block',
   fontSize: '0.85rem',
-  color: 'var(--color-text-muted, var(--color-text-secondary))',
+  color: 'var(--color-text-muted)',
   marginBottom: '0.4rem',
   fontWeight: 500,
 };
@@ -363,7 +363,7 @@ const inputStyle: React.CSSProperties = {
 };
 
 const mutedStyle: React.CSSProperties = {
-  color: 'var(--color-text-muted, var(--color-text-subtle))',
+  color: 'var(--color-text-muted)',
   fontWeight: 400,
   fontSize: '0.8rem',
 };
@@ -388,7 +388,7 @@ const closeBtnStyle: React.CSSProperties = {
   border: 'none',
   fontSize: '1.5rem',
   cursor: 'pointer',
-  color: 'var(--color-text-muted, var(--color-text-muted))',
+  color: 'var(--color-text-muted)',
   padding: 0,
   lineHeight: 1,
   width: '32px',
diff --git a/packages/web/src/features/learning/InsightsPanel.tsx b/packages/web/src/features/learning/InsightsPanel.tsx
index cbe14bdf..b0315f67 100644
--- a/packages/web/src/features/learning/InsightsPanel.tsx
+++ b/packages/web/src/features/learning/InsightsPanel.tsx
@@ -114,7 +114,7 @@ export function InsightsPanel({ refreshKey = 0 }: InsightsPanelProps): ReactElem
     return (
       <section style={{ marginTop: '2rem' }}>
         <SectionHeader />
-        <p style={{ color: 'var(--color-text-muted, var(--color-text-muted))', fontSize: '0.9rem' }}>Loading insights…</p>
+        <p style={{ color: 'var(--color-text-muted)', fontSize: '0.9rem' }}>Loading insights…</p>
       </section>
     );
   }
@@ -138,7 +138,7 @@ export function InsightsPanel({ refreshKey = 0 }: InsightsPanelProps): ReactElem
           <p style={{ margin: 0 }}>
             <strong>All clear.</strong> No actionable training items right now.
           </p>
-          <p style={{ margin: '0.5rem 0 0', color: 'var(--color-text-muted, var(--color-text-muted))', fontSize: '0.85rem' }}>
+          <p style={{ margin: '0.5rem 0 0', color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>
             Compliance signals refresh on every page load. Last checked {formatTime(envelope?.generatedAt ?? new Date().toISOString())}.
           </p>
         </div>
@@ -163,11 +163,11 @@ export function InsightsPanel({ refreshKey = 0 }: InsightsPanelProps): ReactElem
 function SectionHeader({ subtitle }: { subtitle?: string }): ReactElement {
   return (
     <div style={{ display: 'flex', alignItems: 'baseline', gap: '0.75rem', marginBottom: '0.85rem' }}>
-      <h3 style={{ margin: 0, fontSize: '1rem', fontWeight: 500, color: 'var(--color-text-muted, var(--color-text-secondary))' }}>
+      <h3 style={{ margin: 0, fontSize: '1rem', fontWeight: 500, color: 'var(--color-text-muted)' }}>
         Compliance signals
       </h3>
       {subtitle && (
-        <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted, var(--color-text-subtle))' }}>
+        <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>
           {subtitle}
         </span>
       )}
diff --git a/packages/web/src/features/learning/LearningAnalyticsPage.tsx b/packages/web/src/features/learning/LearningAnalyticsPage.tsx
index 30738eac..6d442b19 100644
--- a/packages/web/src/features/learning/LearningAnalyticsPage.tsx
+++ b/packages/web/src/features/learning/LearningAnalyticsPage.tsx
@@ -61,7 +61,7 @@ export function LearningAnalyticsPage(): ReactElement {
       <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '2rem' }}>
         <div>
           <h2 style={{ margin: 0, fontSize: '1.5rem' }}>Course analytics</h2>
-          <p style={{ margin: '0.25rem 0 0', color: 'var(--color-text-muted, var(--color-text-muted))', fontSize: '0.9rem' }}>
+          <p style={{ margin: '0.25rem 0 0', color: 'var(--color-text-muted)', fontSize: '0.9rem' }}>
             Per-course completion rates and bottleneck signal. Sorted by completion rate ascending, worst-performing courses first.
           </p>
         </div>
@@ -79,7 +79,7 @@ export function LearningAnalyticsPage(): ReactElement {
       {!loading && envelope && envelope.rows.length === 0 && (
         <div style={emptyStateStyle}>
           <p style={{ margin: 0 }}>No courses in the catalog yet.</p>
-          <p style={{ margin: '0.5rem 0 0', color: 'var(--color-text-muted, var(--color-text-muted))', fontSize: '0.85rem' }}>
+          <p style={{ margin: '0.5rem 0 0', color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>
             Seed the PA-required baseline, then come back when caregivers have enrollments.
           </p>
         </div>
@@ -179,7 +179,7 @@ function ActionCount({ overdue, expired, pending }: ActionCountProps): ReactElem
   }
   return (
     <div style={{ fontSize: '0.85rem' }}>
-      {expired > 0 && <span style={{ color: 'var(--color-danger)', fontWeight: 500 }}>{expired} expired</span>}
+      {expired > 0 && <span style={{ color: 'var(--color-danger-text)', fontWeight: 500 }}>{expired} expired</span>}
       {expired > 0 && (overdue > 0 || pending > 0) && <span style={{ color: 'var(--color-text-subtle)' }}>, </span>}
       {overdue > 0 && <span style={{ color: 'var(--color-accent-dark)', fontWeight: 500 }}>{overdue} overdue</span>}
       {overdue > 0 && pending > 0 && <span style={{ color: 'var(--color-text-subtle)' }}>, </span>}
@@ -232,7 +232,7 @@ const tdStyle: React.CSSProperties = {
 
 const courseMetaStyle: React.CSSProperties = {
   fontSize: '0.75rem',
-  color: 'var(--color-text-muted, var(--color-text-muted))',
+  color: 'var(--color-text-muted)',
   marginTop: '0.2rem',
 };
 
@@ -281,6 +281,6 @@ const emptyStateStyle: React.CSSProperties = {
 const generatedAtStyle: React.CSSProperties = {
   marginTop: '1rem',
   fontSize: '0.75rem',
-  color: 'var(--color-text-muted, var(--color-text-subtle))',
+  color: 'var(--color-text-muted)',
   textAlign: 'right',
 };
diff --git a/packages/web/src/features/learning/LearningDashboardPage.tsx b/packages/web/src/features/learning/LearningDashboardPage.tsx
index 175eea48..0187b23f 100644
--- a/packages/web/src/features/learning/LearningDashboardPage.tsx
+++ b/packages/web/src/features/learning/LearningDashboardPage.tsx
@@ -64,7 +64,7 @@ export function LearningDashboardPage() {
       <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '2rem' }}>
         <div>
           <h2 style={{ margin: 0, fontSize: '1.5rem' }}>Learning Hub</h2>
-          <p style={{ margin: '0.25rem 0 0', color: 'var(--color-text-muted, var(--color-text-muted))', fontSize: '0.9rem' }}>
+          <p style={{ margin: '0.25rem 0 0', color: 'var(--color-text-muted)', fontSize: '0.9rem' }}>
             Caregiver training compliance, at-a-glance and per-person.
           </p>
         </div>
@@ -150,7 +150,7 @@ interface KpiCardProps {
 function KpiCard({ label, value, accent }: KpiCardProps) {
   return (
     <div style={kpiCardStyle}>
-      <div style={{ fontSize: '0.8rem', color: 'var(--color-text-muted, var(--color-text-muted))', marginBottom: '0.4rem' }}>{label}</div>
+      <div style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)', marginBottom: '0.4rem' }}>{label}</div>
       <div style={{ fontSize: '1.75rem', fontWeight: 500, color: accent ?? 'var(--color-primary-dark)' }}>{value}</div>
     </div>
   );
@@ -165,7 +165,7 @@ interface StatusCardProps {
 function StatusCard({ label, value, color }: StatusCardProps) {
   return (
     <div style={{ ...kpiCardStyle, borderLeft: `4px solid ${color}` }}>
-      <div style={{ fontSize: '0.8rem', color: 'var(--color-text-muted, var(--color-text-muted))', marginBottom: '0.4rem' }}>{label}</div>
+      <div style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)', marginBottom: '0.4rem' }}>{label}</div>
       <div style={{ fontSize: '1.5rem', fontWeight: 500 }}>{value}</div>
     </div>
   );
@@ -182,7 +182,7 @@ function ComplianceBar({ rollup }: ComplianceBarProps) {
     { label: 'In progress', value: rollup.inProgress, color: 'var(--color-primary)' },
     { label: 'Not started', value: rollup.notStarted, color: 'var(--color-text-subtle)' },
     { label: 'Overdue', value: rollup.overdue, color: 'var(--color-accent-dark)' },
-    { label: 'Expired', value: rollup.expired, color: 'var(--color-danger)' }
+    { label: 'Expired', value: rollup.expired, color: 'var(--color-danger-text)' }
   ];
 
   return (
@@ -237,7 +237,7 @@ const sectionHeadingStyle: React.CSSProperties = {
   margin: '0 0 0.75rem',
   fontSize: '1rem',
   fontWeight: 500,
-  color: 'var(--color-text-muted, var(--color-text-secondary))',
+  color: 'var(--color-text-muted)',
 };
 
 const linkButtonStyle: React.CSSProperties = {
diff --git a/packages/web/src/features/learning/LearningHubPage.tsx b/packages/web/src/features/learning/LearningHubPage.tsx
index f60c4f4e..fa54627e 100644
--- a/packages/web/src/features/learning/LearningHubPage.tsx
+++ b/packages/web/src/features/learning/LearningHubPage.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { getJson, postJson, deleteJson } from '../../lib/api-client.js';
+import { tint } from '../../lib/color.js';
 
 interface Course {
   id: string;
@@ -49,7 +50,7 @@ interface StaffMember { id: string; email: string; role: string; }
 const severityColors: Record<string, { bg: string; text: string; border: string }> = {
   critical: { bg: 'var(--color-danger-bg)', text: 'var(--color-danger-text)', border: 'var(--color-danger-border)' },
   warning: { bg: 'var(--color-warning-bg)', text: 'var(--color-warning-text)', border: 'var(--color-warning-border)' },
-  info: { bg: 'rgba(16, 116, 128, 0.08)', text: 'var(--color-primary-dark)', border: 'rgba(16, 116, 128, 0.25)' },
+  info: { bg: tint('var(--color-primary)', 8), text: 'var(--color-primary-dark)', border: tint('var(--color-primary)', 25) },
 };
 
 const cadenceLabel: Record<string, string> = {
@@ -338,7 +339,7 @@ export function LearningHubPage() {
                           type="button"
                           disabled={deletingId === c.id}
                           onClick={() => void handleDeleteCourse(c)}
-                          style={{ padding: '0.3rem 0.7rem', fontSize: '0.75rem', fontWeight: 600, borderRadius: '6px', border: '1px solid var(--color-danger-border)', background: 'var(--color-danger-bg)', color: 'var(--color-danger)', cursor: deletingId === c.id ? 'wait' : 'pointer' }}
+                          style={{ padding: '0.3rem 0.7rem', fontSize: '0.75rem', fontWeight: 600, borderRadius: '6px', border: '1px solid var(--color-danger-border)', background: 'var(--color-danger-bg)', color: 'var(--color-danger-text)', cursor: deletingId === c.id ? 'wait' : 'pointer' }}
                         >
                           {deletingId === c.id ? '…' : 'Delete'}
                         </button>
diff --git a/packages/web/src/features/onboarding/AgencyPublicPage.tsx b/packages/web/src/features/onboarding/AgencyPublicPage.tsx
index 17aeaffb..43d832eb 100644
--- a/packages/web/src/features/onboarding/AgencyPublicPage.tsx
+++ b/packages/web/src/features/onboarding/AgencyPublicPage.tsx
@@ -103,7 +103,7 @@ export function AgencyPublicPage() {
     return (
       <div className="pub-root" style={{ display: 'grid', placeItems: 'center' }}>
         <PublicBrandStyles />
-        <span style={{ color: 'var(--pub-faint, var(--color-text-muted))' }}>Loading…</span>
+        <span style={{ color: 'var(--pub-faint)' }}>Loading…</span>
       </div>
     );
   }
diff --git a/packages/web/src/features/onboarding/ApplicantDetailPage.tsx b/packages/web/src/features/onboarding/ApplicantDetailPage.tsx
index 184eaf0d..7f9d571a 100644
--- a/packages/web/src/features/onboarding/ApplicantDetailPage.tsx
+++ b/packages/web/src/features/onboarding/ApplicantDetailPage.tsx
@@ -324,9 +324,11 @@ export function ApplicantDetailPage() {
             disabled={hiring}
             style={{
               padding: '0.5rem 1.25rem',
-              backgroundColor: hiring ? 'var(--color-success-border)' : 'var(--color-success)',
-              color: 'white',
+              background: 'var(--color-success)',
+              color: 'var(--color-on-brand)',
+              opacity: hiring ? 0.55 : 1,
               border: 'none',
+              boxShadow: 'none',
               borderRadius: '8px',
               fontWeight: 600,
               fontSize: '0.875rem',
diff --git a/packages/web/src/features/onboarding/ApplicantPortalPage.tsx b/packages/web/src/features/onboarding/ApplicantPortalPage.tsx
index 238aad1e..9682149c 100644
--- a/packages/web/src/features/onboarding/ApplicantPortalPage.tsx
+++ b/packages/web/src/features/onboarding/ApplicantPortalPage.tsx
@@ -113,7 +113,7 @@ export function ApplicantPortalPage() {
     return (
       <div className="pub-root" style={{ display: 'grid', placeItems: 'center' }}>
         <PublicBrandStyles />
-        <span style={{ color: 'var(--pub-faint, var(--color-text-muted))' }}>Loading your portal…</span>
+        <span style={{ color: 'var(--pub-faint)' }}>Loading your portal…</span>
       </div>
     );
   }
diff --git a/packages/web/src/features/onboarding/InterviewPage.tsx b/packages/web/src/features/onboarding/InterviewPage.tsx
index a722fc17..98e6ff6f 100644
--- a/packages/web/src/features/onboarding/InterviewPage.tsx
+++ b/packages/web/src/features/onboarding/InterviewPage.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useParams, Link } from 'react-router-dom';
+import { tint } from '../../lib/color.js';
 
 interface ChatMessage {
   role: 'user' | 'assistant';
@@ -355,7 +356,7 @@ export function InterviewPage() {
                 width: '56px',
                 height: '56px',
                 borderRadius: '50%',
-                backgroundColor: 'rgba(16, 116, 128,0.1)',
+                backgroundColor: tint('var(--color-primary)', 10),
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
diff --git a/packages/web/src/features/profile/ProfilePage.tsx b/packages/web/src/features/profile/ProfilePage.tsx
index 68410695..689409d2 100644
--- a/packages/web/src/features/profile/ProfilePage.tsx
+++ b/packages/web/src/features/profile/ProfilePage.tsx
@@ -151,7 +151,7 @@ export function ProfilePage() {
 
   if (error && !profile) {
     return (
-      <div style={{ padding: '2rem', color: 'var(--color-danger)' }}>{error}</div>
+      <div style={{ padding: '2rem', color: 'var(--color-danger-text)' }}>{error}</div>
     );
   }
 
@@ -177,7 +177,7 @@ export function ProfilePage() {
               borderRadius: '50%',
               margin: '0 auto 1rem',
               overflow: 'hidden',
-              background: 'var(--color-primary, var(--color-primary))',
+              background: 'var(--color-primary)',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
@@ -210,9 +210,9 @@ export function ProfilePage() {
               style={{
                 fontSize: '0.75rem',
                 fontWeight: 500,
-                color: 'var(--color-primary, var(--color-primary))',
+                color: 'var(--color-primary)',
                 background: 'transparent',
-                border: '1px solid var(--color-primary, var(--color-primary))',
+                border: '1px solid var(--color-primary)',
                 borderRadius: '6px',
                 padding: '0.35rem 0.75rem',
                 cursor: 'pointer',
@@ -227,7 +227,7 @@ export function ProfilePage() {
                 style={{
                   fontSize: '0.75rem',
                   fontWeight: 500,
-                  color: 'var(--color-danger)',
+                  color: 'var(--color-danger-text)',
                   background: 'transparent',
                   border: '1px solid var(--color-danger-border)',
                   borderRadius: '6px',
@@ -261,8 +261,8 @@ export function ProfilePage() {
                 display: 'inline-block',
                 fontSize: '0.75rem',
                 fontWeight: 600,
-                background: 'var(--color-primary-bg, var(--color-info-bg))',
-                color: 'var(--color-primary, var(--color-primary))',
+                background: 'var(--color-info-bg)',
+                color: 'var(--color-primary)',
                 borderRadius: '100px',
                 padding: '0.15rem 0.6rem',
                 textTransform: 'capitalize',
@@ -290,7 +290,7 @@ export function ProfilePage() {
             </h2>
 
             {error && (
-              <div style={{ background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', borderRadius: '8px', padding: '0.75rem', marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--color-danger)' }}>
+              <div style={{ background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', borderRadius: '8px', padding: '0.75rem', marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--color-danger-text)' }}>
                 {error}
               </div>
             )}
@@ -368,7 +368,7 @@ export function ProfilePage() {
             </p>
 
             {pwError && (
-              <div style={{ background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', borderRadius: '8px', padding: '0.75rem', marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--color-danger)' }}>
+              <div style={{ background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', borderRadius: '8px', padding: '0.75rem', marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--color-danger-text)' }}>
                 {pwError}
               </div>
             )}
@@ -410,7 +410,7 @@ export function ProfilePage() {
                 }}
               />
               {confirmPassword && newPassword !== confirmPassword && (
-                <span style={{ fontSize: '0.75rem', color: 'var(--color-danger)' }}>Passwords do not match</span>
+                <span style={{ fontSize: '0.75rem', color: 'var(--color-danger-text)' }}>Passwords do not match</span>
               )}
             </label>
 
@@ -454,7 +454,7 @@ const primaryButtonStyle: React.CSSProperties = {
   fontSize: '0.875rem',
   fontWeight: 600,
   color: 'var(--color-surface)',
-  background: 'var(--color-primary, var(--color-primary))',
+  background: 'var(--color-primary)',
   border: 'none',
   borderRadius: '8px',
   cursor: 'pointer',
diff --git a/packages/web/src/features/scheduling/RecurringSchedulesPage.tsx b/packages/web/src/features/scheduling/RecurringSchedulesPage.tsx
index 83ead668..44d0586f 100644
--- a/packages/web/src/features/scheduling/RecurringSchedulesPage.tsx
+++ b/packages/web/src/features/scheduling/RecurringSchedulesPage.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { getJson, postJson, patchJson, deleteJson } from '../../lib/api-client.js';
 import { EmptyState, LoadingSkeleton, ErrorRetry } from '../../components/state/index.js';
+import { tint } from '../../lib/color.js';
 
 interface RecurringSchedule {
   id: string;
@@ -64,7 +65,7 @@ function dowLabel(days: number[]): string {
 }
 
 const STATUS_COLORS: Record<RecurringSchedule['status'], { bg: string; fg: string }> = {
-  active: { bg: 'rgba(16, 116, 128, 0.1)', fg: 'var(--color-primary)' },
+  active: { bg: tint('var(--color-primary)', 10), fg: 'var(--color-primary)' },
   paused: { bg: 'var(--color-warning-bg)', fg: 'var(--color-warning-text)' },
   ended: { bg: 'var(--color-surface-soft)', fg: 'var(--color-text-muted)' },
 };
@@ -335,8 +336,9 @@ export function RecurringSchedulesPage() {
                         padding: '0.4rem 0.7rem',
                         borderRadius: '6px',
                         border: `1px solid ${on ? 'var(--color-primary)' : 'var(--color-border)'}`,
-                        backgroundColor: on ? 'rgba(16, 116, 128, 0.1)' : 'white',
-                        color: on ? 'var(--color-primary)' : 'var(--color-text-muted)',
+                        background: on ? tint('var(--color-primary)', 10) : 'var(--color-surface)',
+                        color: on ? 'var(--color-primary-dark)' : 'var(--color-text-muted)',
+                        boxShadow: 'none',
                         fontWeight: 600,
                         fontSize: '0.8125rem',
                         cursor: 'pointer',
diff --git a/packages/web/src/features/scheduling/TemplatesPage.tsx b/packages/web/src/features/scheduling/TemplatesPage.tsx
index dbe98962..e7204cc3 100644
--- a/packages/web/src/features/scheduling/TemplatesPage.tsx
+++ b/packages/web/src/features/scheduling/TemplatesPage.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { getJson, postJson, putJson, deleteJson, ApiError } from '../../lib/api-client.js';
 import { EmptyState, LoadingSkeleton, ErrorRetry } from '../../components/state/index.js';
+import { tint } from '../../lib/color.js';
 
 interface Template {
   id: string;
@@ -241,7 +242,7 @@ export function TemplatesPage() {
                           cursor: 'pointer',
                           padding: '0.45rem 0.6rem',
                           borderRadius: '6px',
-                          backgroundColor: isSelected ? 'rgba(16, 116, 128, 0.08)' : 'transparent',
+                          backgroundColor: isSelected ? tint('var(--color-primary)', 8) : 'transparent',
                           transition: 'background-color 0.1s ease',
                           fontSize: '0.8125rem',
                           color: 'var(--color-text)',
diff --git a/packages/web/src/features/settings/SettingsPage.tsx b/packages/web/src/features/settings/SettingsPage.tsx
index fa9f2f61..97fbf69a 100644
--- a/packages/web/src/features/settings/SettingsPage.tsx
+++ b/packages/web/src/features/settings/SettingsPage.tsx
@@ -46,7 +46,7 @@ const h2: React.CSSProperties = { fontSize: '1rem', fontWeight: 700, color: 'var
 const sub: React.CSSProperties = { fontSize: '0.8125rem', color: 'var(--color-text-muted)', margin: '0 0 1rem' };
 const btnPrimary: React.CSSProperties = { padding: '0.5rem 1.1rem', fontWeight: 600, fontSize: '0.875rem', color: 'var(--color-surface)', background: 'var(--color-primary)', border: 'none', borderRadius: '8px', cursor: 'pointer' };
 const btnGhost: React.CSSProperties = { padding: '0.5rem 1.1rem', fontWeight: 600, fontSize: '0.875rem', color: 'var(--color-text-secondary)', background: 'var(--color-bg)', border: '1px solid var(--color-border)', borderRadius: '8px', cursor: 'pointer' };
-const btnDanger: React.CSSProperties = { padding: '0.5rem 1.1rem', fontWeight: 600, fontSize: '0.875rem', color: 'var(--color-danger)', background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', borderRadius: '8px', cursor: 'pointer' };
+const btnDanger: React.CSSProperties = { padding: '0.5rem 1.1rem', fontWeight: 600, fontSize: '0.875rem', color: 'var(--color-danger-text)', background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', borderRadius: '8px', cursor: 'pointer' };
 const inputStyle: React.CSSProperties = { padding: '0.5rem 0.7rem', border: '1px solid var(--color-border)', borderRadius: '8px', fontSize: '0.875rem', color: 'var(--color-text)' };
 
 const NOTIF_ROWS: Array<{ key: keyof NotificationPrefs; label: string }> = [
@@ -205,7 +205,7 @@ export function SettingsPage() {
             {showDisable ? (
               <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', maxWidth: '320px' }}>
                 <input type="password" placeholder="Confirm your password" value={disablePassword} onChange={(e) => setDisablePassword(e.target.value)} style={inputStyle} />
-                {twoFaError && <span style={{ color: 'var(--color-danger)', fontSize: '0.8125rem' }}>{twoFaError}</span>}
+                {twoFaError && <span style={{ color: 'var(--color-danger-text)', fontSize: '0.8125rem' }}>{twoFaError}</span>}
                 <div style={{ display: 'flex', gap: '0.5rem' }}>
                   <button type="button" style={btnDanger} onClick={() => void disableTwoFa()}>Disable 2FA</button>
                   <button type="button" style={btnGhost} onClick={() => { setShowDisable(false); setTwoFaError(null); }}>Cancel</button>
@@ -220,7 +220,7 @@ export function SettingsPage() {
             <img src={twoFaSetup.qrDataUrl} alt="2FA QR code" width={180} height={180} style={{ border: '1px solid var(--color-border)', borderRadius: '8px' }} />
             <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>Or enter this key manually: <code style={{ fontFamily: 'monospace', color: 'var(--color-text)' }}>{twoFaSetup.secret}</code></div>
             <input type="text" inputMode="numeric" placeholder="6-digit code" value={twoFaCode} onChange={(e) => setTwoFaCode(e.target.value)} style={inputStyle} />
-            {twoFaError && <span style={{ color: 'var(--color-danger)', fontSize: '0.8125rem' }}>{twoFaError}</span>}
+            {twoFaError && <span style={{ color: 'var(--color-danger-text)', fontSize: '0.8125rem' }}>{twoFaError}</span>}
             <div style={{ display: 'flex', gap: '0.5rem' }}>
               <button type="button" style={btnPrimary} onClick={() => void enableTwoFa()}>Verify & enable</button>
               <button type="button" style={btnGhost} onClick={() => { setTwoFaSetup(null); setTwoFaError(null); }}>Cancel</button>
@@ -228,7 +228,7 @@ export function SettingsPage() {
           </div>
         ) : (
           <>
-            {twoFaError && <div style={{ color: 'var(--color-danger)', fontSize: '0.8125rem', marginBottom: '0.5rem' }}>{twoFaError}</div>}
+            {twoFaError && <div style={{ color: 'var(--color-danger-text)', fontSize: '0.8125rem', marginBottom: '0.5rem' }}>{twoFaError}</div>}
             <button type="button" style={btnPrimary} onClick={() => void startTwoFa()}>Enable two-factor</button>
           </>
         )}
diff --git a/packages/web/src/features/support/AdminAssistant.tsx b/packages/web/src/features/support/AdminAssistant.tsx
index db071131..06acbe54 100644
--- a/packages/web/src/features/support/AdminAssistant.tsx
+++ b/packages/web/src/features/support/AdminAssistant.tsx
@@ -90,7 +90,7 @@ export function AdminAssistant() {
           height: '56px',
           borderRadius: '50%',
           border: 'none',
-          backgroundColor: 'var(--color-accent, var(--color-accent))',
+          backgroundColor: 'var(--color-accent)',
           color: 'white',
           fontSize: '1.5rem',
           cursor: 'pointer',
@@ -131,7 +131,7 @@ export function AdminAssistant() {
           <div
             style={{
               padding: '1rem 1.25rem',
-              backgroundColor: 'var(--color-primary-dark, var(--color-primary-dark))',
+              backgroundColor: 'var(--color-primary-dark)',
               color: 'white',
               display: 'flex',
               alignItems: 'center',
@@ -165,7 +165,7 @@ export function AdminAssistant() {
                   padding: '0.6rem 0.85rem',
                   borderRadius: '12px',
                   backgroundColor:
-                    m.role === 'user' ? 'var(--color-primary-light, var(--color-primary))' : 'white',
+                    m.role === 'user' ? 'var(--color-primary-light)' : 'white',
                   color: m.role === 'user' ? 'white' : 'var(--color-text)',
                   border: m.role === 'assistant' ? '1px solid var(--color-primary-bg)' : 'none',
                   fontSize: '0.92rem',
@@ -265,7 +265,7 @@ export function AdminAssistant() {
                 onClick={() => void send()}
                 disabled={busy || input.trim().length === 0}
                 style={{
-                  backgroundColor: 'var(--color-accent, var(--color-accent))',
+                  backgroundColor: 'var(--color-accent)',
                   color: 'white',
                   border: 'none',
                   padding: '0.5rem 1rem',
diff --git a/packages/web/src/features/support/SupportChat.tsx b/packages/web/src/features/support/SupportChat.tsx
index 3b437a32..3b9e36cc 100644
--- a/packages/web/src/features/support/SupportChat.tsx
+++ b/packages/web/src/features/support/SupportChat.tsx
@@ -94,11 +94,11 @@ export function SupportChat() {
           height: '56px',
           borderRadius: '50%',
           border: 'none',
-          backgroundColor: 'var(--color-primary-light)',
-          color: 'white',
+          background: 'var(--color-primary)',
+          color: 'var(--color-on-brand)',
           fontSize: '1.5rem',
           cursor: 'pointer',
-          boxShadow: '0 8px 24px rgba(26, 95, 168, 0.35)'
+          boxShadow: 'var(--shadow-brand)'
         }}
       >
         {open ? (
diff --git a/packages/web/src/index.css b/packages/web/src/index.css
index af41eba3..3e28df8b 100644
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@@ -16,10 +16,17 @@
   --color-accent: #C94E0E;
   --color-accent-dark: #B8440B;
   --color-accent-light: #FCD9C2;
-  --color-accent-bg: rgba(238, 108, 44, 0.08);
+  --color-accent-bg: rgba(201, 78, 14, 0.08);
   --color-on-brand: #FFFFFF;
+  --color-on-accent: #FFFFFF;
   --color-text-on-dark: #F8FAFC;
 
+  /* The agency's literal brand color, never contrast-adjusted. TEXT-FREE
+     surfaces only , logo marks, gradient stops, decorative washes. Anything
+     that carries a label must use --color-primary, which the resolver
+     guarantees is readable. scripts/css-contract-scan.ts enforces that. */
+  --color-brand-raw: #107480;
+
   /* Surfaces */
   --color-bg: #F8FAFC;             /* slate-50, main content bg */
   --color-surface: #FFFFFF;        /* card/form bg */
@@ -76,7 +83,12 @@
   /* Neutrals used by primitives (skeletons, dark panels, dividers), named so
      no component reaches for a bare hex literal. */
   --color-slate-800: #1E293B;
+  --color-slate-700: #334155;
   --color-slate-100: #F1F5F9;
+  /* Print output is deliberately fixed: paper is white and ink is black
+     whatever the agency's brand happens to be. */
+  --color-print-paper: #FFFFFF;
+  --color-print-ink: #000000;
 
   /* Typography */
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -106,12 +118,15 @@
   --shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
   --shadow-lg: 0 10px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.05);
   --shadow-focus: 0 0 0 3px rgba(16, 116, 128, 0.28);
+  --focus-outline-color: rgba(16, 116, 128, 0.34);
   --shadow-brand: 0 14px 30px -16px rgba(12, 93, 102, 0.72);
   --shadow-card-hover: 0 22px 50px -28px rgba(12, 93, 102, 0.42), 0 8px 20px -16px rgba(15, 23, 42, 0.28);
 
   /* Dark "command panel" surface (AI briefing, callouts on light pages) , 
      named gradient so no component hardcodes the sidebar-adjacent hex pair. */
   --gradient-panel-dark: linear-gradient(135deg, var(--color-sidebar) 0%, var(--color-slate-800) 100%);
+  --gradient-sidebar: linear-gradient(180deg, #0B2730 0%, var(--color-sidebar) 44%, #09131F 100%);
+  --gradient-skeleton: linear-gradient(90deg, var(--color-border) 0%, var(--color-surface-soft) 40%, var(--color-border) 80%);
   --gradient-brand: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 58%, var(--color-accent) 135%);
   --gradient-brand-hover: linear-gradient(135deg, #084D55 0%, var(--color-primary-dark) 58%, var(--color-accent-dark) 135%);
   --gradient-page: radial-gradient(circle at 12% -10%, rgba(127, 199, 207, 0.26), transparent 28rem), linear-gradient(180deg, #F4FAFA 0%, var(--color-bg) 24rem);
@@ -177,14 +192,14 @@ a:hover {
 
 a:focus-visible {
   border-radius: var(--radius-sm);
-  outline: 3px solid rgba(16, 116, 128, 0.34);
+  outline: 3px solid var(--focus-outline-color);
   outline-offset: 3px;
 }
 
 code {
   font-family: var(--font-mono);
   font-size: 0.85em;
-  background-color: #F1F5F9;
+  background: var(--color-surface-soft);
   padding: 0.1rem 0.35rem;
   border-radius: 4px;
 }
@@ -196,14 +211,14 @@ code {
 label {
   font-size: 0.8125rem;
   font-weight: 500;
-  color: #334155;
+  color: var(--color-slate-700);
   display: block;
 }
 
 .label {
   font-size: 0.8125rem;
   font-weight: 500;
-  color: #334155;
+  color: var(--color-slate-700);
   letter-spacing: 0;
   text-transform: none;
 }
@@ -214,7 +229,7 @@ textarea {
   font-family: inherit;
   font-size: 0.9375rem;
   color: var(--color-text);
-  background-color: var(--color-surface);
+  background: var(--color-surface);
   border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
   padding: 0.625rem 0.875rem;
@@ -239,14 +254,14 @@ textarea:focus {
 input:disabled,
 select:disabled,
 textarea:disabled {
-  background-color: #F1F5F9;
-  color: #94A3B8;
+  background: var(--color-surface-soft);
+  color: var(--color-text-subtle);
   cursor: not-allowed;
 }
 
 input::placeholder,
 textarea::placeholder {
-  color: #94A3B8;
+  color: var(--color-text-subtle);
 }
 
 select {
@@ -262,7 +277,7 @@ select {
   font-family: inherit;
   font-size: 0.9375rem;
   color: var(--color-text);
-  background-color: var(--color-surface);
+  background: var(--color-surface);
   border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
   padding: 0.625rem 0.875rem;
@@ -418,31 +433,31 @@ button:disabled {
 }
 
 .badge-success {
-  background-color: var(--color-success-bg);
+  background: var(--color-success-bg);
   color: var(--color-success-text);
   border-color: var(--color-success-border);
 }
 
 .badge-danger {
-  background-color: var(--color-danger-bg);
+  background: var(--color-danger-bg);
   color: var(--color-danger-text);
   border-color: var(--color-danger-border);
 }
 
 .badge-warning {
-  background-color: var(--color-warning-bg);
+  background: var(--color-warning-bg);
   color: var(--color-warning-text);
   border-color: var(--color-warning-border);
 }
 
 .badge-info {
-  background-color: var(--color-info-bg);
+  background: var(--color-info-bg);
   color: var(--color-info-text);
   border-color: var(--color-info-border);
 }
 
 .badge-neutral {
-  background-color: var(--color-slate-100);
+  background: var(--color-slate-100);
   color: var(--color-text-secondary);
   border-color: var(--color-border);
 }
@@ -451,7 +466,7 @@ button:disabled {
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background-color: currentColor;
+  background: currentColor;
   display: inline-block;
   flex-shrink: 0;
 }
@@ -461,7 +476,7 @@ button:disabled {
    ========================================================================== */
 
 .form-card {
-  background-color: var(--color-surface-elevated);
+  background: var(--color-surface-elevated);
   border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-lg);
   padding: 1.75rem;
@@ -469,7 +484,7 @@ button:disabled {
 }
 
 .stat-card {
-  background-color: var(--color-surface-elevated);
+  background: var(--color-surface-elevated);
   border: 1px solid var(--color-border-strong);
   border-top: 3px solid var(--color-primary);
   border-radius: var(--radius-lg);
@@ -484,7 +499,7 @@ button:disabled {
 }
 
 .action-card {
-  background-color: var(--color-surface-elevated);
+  background: var(--color-surface-elevated);
   border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-lg);
   padding: 1.5rem;
@@ -530,7 +545,7 @@ button:disabled {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
-  background-color: var(--color-surface);
+  background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   overflow: hidden;
@@ -548,14 +563,14 @@ button:disabled {
 }
 
 .data-table thead {
-  background-color: #F8FAFC;
+  background: var(--color-bg);
 }
 
 .data-table th {
   text-align: left;
   font-size: 0.7rem;
   font-weight: 600;
-  color: #64748B;
+  color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   padding: 0.75rem 1rem;
@@ -579,7 +594,7 @@ button:disabled {
 }
 
 .data-table tbody tr:hover {
-  background-color: #F8FAFC;
+  background: var(--color-bg);
 }
 
 /* ==========================================================================
@@ -598,27 +613,27 @@ button:disabled {
 }
 
 .banner-success {
-  background-color: var(--color-success-bg);
-  color: #065F46;
+  background: var(--color-success-bg);
+  color: var(--color-success-text);
   border-color: var(--color-success-border);
 }
 
 .banner-error {
-  background-color: var(--color-danger-bg);
-  color: #BE123C;
+  background: var(--color-danger-bg);
+  color: var(--color-danger-text);
   border-color: var(--color-danger-border);
 }
 
 .banner-warning {
-  background-color: var(--color-warning-bg);
-  color: #92400E;
+  background: var(--color-warning-bg);
+  color: var(--color-warning-text);
   border-color: var(--color-warning-border);
 }
 
 .banner-info {
-  background-color: var(--color-info-bg);
-  color: var(--color-primary-dark);
-  border-color: rgba(16, 116, 128, 0.25);
+  background: var(--color-info-bg);
+  color: var(--color-info-text);
+  border-color: var(--color-info-border);
 }
 
 .info-banner__title {
@@ -637,13 +652,13 @@ button:disabled {
 .admin-shell {
   display: flex;
   min-height: 100vh;
-  background-color: var(--color-bg);
+  background: var(--color-bg);
 }
 
 .admin-sidebar {
   width: 240px;
   flex-shrink: 0;
-  background: linear-gradient(180deg, #0B2730 0%, var(--color-sidebar) 44%, #09131F 100%);
+  background: var(--gradient-sidebar);
   color: var(--color-sidebar-text);
   display: flex;
   flex-direction: column;
@@ -661,7 +676,7 @@ button:disabled {
   align-items: center;
   gap: 0.6rem;
   padding: 0.25rem 0.65rem 1.5rem;
-  color: white;
+  color: var(--color-sidebar-text-active);
   font-family: var(--font-heading);
   font-weight: 800;
   font-size: 1.125rem;
@@ -678,14 +693,14 @@ button:disabled {
   place-items: center;
   font-size: 0.875rem;
   font-weight: 900;
-  color: white;
+  color: var(--color-on-brand);
   flex-shrink: 0;
-  box-shadow: 0 2px 8px rgba(16, 116, 128,0.45);
+  box-shadow: var(--shadow-brand);
 }
 
 .admin-sidebar__evv-badge {
   background: var(--gradient-brand);
-  color: white;
+  color: var(--color-on-brand);
   font-size: 0.6rem;
   font-weight: 700;
   letter-spacing: 0.12em;
@@ -714,7 +729,7 @@ button:disabled {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.12em;
-  color: #475569;
+  color: var(--color-text-secondary);
   padding: 0 0.75rem 0.5rem;
 }
 
@@ -744,12 +759,12 @@ button:disabled {
 }
 
 .admin-sidebar__nav-link:hover {
-  background-color: var(--color-sidebar-hover);
-  color: #E2E8F0;
+  background: var(--color-sidebar-hover);
+  color: var(--color-border);
 }
 
 .admin-sidebar__nav-link.active {
-  background-color: var(--color-sidebar-active);
+  background: var(--color-sidebar-active);
   color: var(--color-sidebar-text-active);
 }
 
@@ -761,7 +776,7 @@ button:disabled {
   transform: translateY(-50%);
   width: 3px;
   height: 18px;
-  background-color: var(--color-primary);
+  background: var(--color-primary);
   border-radius: 0 2px 2px 0;
 }
 
@@ -769,7 +784,7 @@ button:disabled {
   margin-top: auto;
   padding: 0.85rem;
   border-radius: var(--radius-md);
-  background-color: rgba(255, 255, 255, 0.04);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
   display: flex;
   flex-direction: column;
@@ -787,7 +802,7 @@ button:disabled {
   height: 32px;
   border-radius: 50%;
   background: var(--gradient-brand);
-  color: white;
+  color: var(--color-on-brand);
   display: grid;
   place-items: center;
   font-weight: 600;
@@ -799,8 +814,8 @@ button:disabled {
   align-self: flex-start;
   display: inline-flex;
   align-items: center;
-  background-color: rgba(16, 116, 128, 0.2);
-  color: #ddd6fe;
+  background: var(--color-brand-badge-bg);
+  color: var(--color-brand-badge-text);
   font-size: 0.65rem;
   font-weight: 600;
   letter-spacing: 0.08em;
@@ -810,9 +825,10 @@ button:disabled {
 }
 
 .admin-sidebar__signout {
-  background-color: transparent;
+  background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.12);
-  color: #CBD5E1;
+  color: var(--color-border-strong);
+  box-shadow: none;
   padding: 0.4rem 0.75rem;
   border-radius: var(--radius-sm);
   font-size: 0.8125rem;
@@ -823,8 +839,8 @@ button:disabled {
 }
 
 .admin-sidebar__signout:hover {
-  background-color: rgba(255, 255, 255, 0.06);
-  color: white;
+  background: var(--color-sidebar-hover);
+  color: var(--color-sidebar-text-active);
   border-color: rgba(255, 255, 255, 0.2);
 }
 
@@ -861,7 +877,7 @@ button:disabled {
 .rh-skeleton-cell {
   height: 14px;
   border-radius: 6px;
-  background: linear-gradient(90deg, #E2E8F0 0%, #F1F5F9 40%, #E2E8F0 80%);
+  background: var(--gradient-skeleton);
   background-size: 800px 100%;
   animation: rh-skeleton-shimmer 1.4s linear infinite;
 }
@@ -950,7 +966,7 @@ button:disabled {
 }
 
 .section-card--bordered {
-  background-color: var(--color-surface-elevated);
+  background: var(--color-surface-elevated);
   border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-lg);
   padding: var(--space-6);
@@ -959,7 +975,7 @@ button:disabled {
 
 /* ---- MetricCard ---- */
 .metric-card {
-  background-color: var(--color-surface-elevated);
+  background: var(--color-surface-elevated);
   border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-lg);
   padding: 1.25rem 1.25rem 1.4rem;
@@ -1109,19 +1125,19 @@ button:disabled {
   flex: 1 1 200px;
   height: 8px;
   border-radius: 999px;
-  background-color: var(--color-border);
+  background: var(--color-border);
   overflow: hidden;
 }
 
 .progress-fill {
   height: 100%;
   border-radius: 999px;
-  background-color: var(--color-primary);
+  background: var(--color-primary);
   transition: width 0.3s ease;
 }
 
 .progress-fill[data-tone='success'] {
-  background-color: var(--color-success);
+  background: var(--color-success);
 }
 
 .progress-row__label {
@@ -1142,7 +1158,7 @@ button:disabled {
   display: flex;
   align-items: center;
   gap: var(--space-4);
-  background-color: var(--color-danger-bg);
+  background: var(--color-danger-bg);
   border: 1px solid var(--color-danger-border);
   border-radius: var(--radius-md);
   padding: 0.85rem 1.1rem;
@@ -1160,12 +1176,12 @@ button:disabled {
 }
 
 .attention-card[data-tone='warning'] {
-  background-color: var(--color-warning-bg);
+  background: var(--color-warning-bg);
   border-color: var(--color-warning-border);
 }
 
 .attention-card[data-tone='info'] {
-  background-color: var(--color-info-bg);
+  background: var(--color-info-bg);
   border-color: var(--color-info-border);
 }
 
@@ -1176,14 +1192,14 @@ button:disabled {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background-color: var(--color-primary);
+  background: var(--color-primary);
   flex-shrink: 0;
 }
 
-.status-dot[data-tone='success'] { background-color: var(--color-success); }
-.status-dot[data-tone='warning'] { background-color: var(--color-warning); }
-.status-dot[data-tone='danger'] { background-color: var(--color-danger); }
-.status-dot[data-tone='info'] { background-color: var(--color-info); }
+.status-dot[data-tone='success'] { background: var(--color-success); }
+.status-dot[data-tone='warning'] { background: var(--color-warning); }
+.status-dot[data-tone='danger'] { background: var(--color-danger); }
+.status-dot[data-tone='info'] { background: var(--color-info); }
 
 .attention-card__body {
   flex: 1;
@@ -1224,7 +1240,7 @@ button:disabled {
   background: var(--gradient-panel-dark);
   border-radius: var(--radius-lg);
   padding: 1.25rem 1.4rem;
-  color: #E2E8F0;
+  color: var(--color-border);
   /* Crisp dark edge + clip so the gradient doesn't leave a light antialiasing
      sliver at the rounded corners. */
   border: 1px solid var(--color-slate-800);
@@ -1247,7 +1263,7 @@ button:disabled {
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.12em;
-  color: #94A3B8;
+  color: var(--color-text-muted-on-dark);
 }
 
 .command-panel__icon {
@@ -1258,7 +1274,7 @@ button:disabled {
   margin-top: 0.85rem;
   font-size: 0.95rem;
   line-height: 1.6;
-  color: #F1F5F9;
+  color: var(--color-surface-soft);
 }
 
 .command-panel__body p {
@@ -1270,12 +1286,13 @@ button:disabled {
 
 .command-panel__body--muted {
   font-size: 0.8125rem;
-  color: #94A3B8;
+  color: var(--color-text-muted-on-dark);
 }
 
 .command-panel__cta {
-  background-color: var(--color-primary-light);
+  background: var(--color-primary-light);
   color: var(--color-primary-dark);
+  box-shadow: none;
   border: none;
   border-radius: var(--radius-md);
   font-weight: 700;
@@ -1298,7 +1315,7 @@ button:disabled {
 }
 
 .command-panel__link-btn:hover:not(:disabled) {
-  color: #fff;
+  color: var(--color-text-on-dark);
 }
 
 .command-panel__link-btn:focus-visible {
@@ -1336,21 +1353,21 @@ button:disabled {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background-color: var(--color-primary);
+  background: var(--color-primary);
   margin-top: 0.3rem;
   flex-shrink: 0;
 }
 
-.timeline__row[data-tone='success'] .timeline__marker { background-color: var(--color-success); }
-.timeline__row[data-tone='warning'] .timeline__marker { background-color: var(--color-warning); }
-.timeline__row[data-tone='danger'] .timeline__marker { background-color: var(--color-danger); }
-.timeline__row[data-tone='info'] .timeline__marker { background-color: var(--color-info); }
+.timeline__row[data-tone='success'] .timeline__marker { background: var(--color-success); }
+.timeline__row[data-tone='warning'] .timeline__marker { background: var(--color-warning); }
+.timeline__row[data-tone='danger'] .timeline__marker { background: var(--color-danger); }
+.timeline__row[data-tone='info'] .timeline__marker { background: var(--color-info); }
 
 .timeline__line {
   flex: 1;
   width: 2px;
   min-height: var(--space-4);
-  background-color: var(--color-border);
+  background: var(--color-border);
   margin-top: 0.2rem;
 }
 
@@ -1393,7 +1410,7 @@ button:disabled {
   display: flex;
   align-items: flex-start;
   gap: var(--space-3);
-  background-color: var(--color-surface);
+  background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: var(--space-4) var(--space-5);
@@ -1421,14 +1438,14 @@ button:disabled {
   width: 36px;
   height: 36px;
   border-radius: var(--radius-md);
-  background-color: var(--color-primary-bg);
+  background: var(--color-primary-bg);
   color: var(--color-primary-dark);
   flex-shrink: 0;
   font-size: 1.1rem;
 }
 
 .trust-badge[data-tone='accent'] .trust-badge__icon {
-  background-color: var(--color-accent-bg);
+  background: var(--color-accent-bg);
   color: var(--color-accent-dark);
 }
 
@@ -1484,7 +1501,7 @@ button:disabled {
   width: 28px;
   height: 28px;
   border-radius: 50%;
-  background-color: var(--color-border);
+  background: var(--color-border);
   color: var(--color-text-muted);
   font-size: 0.75rem;
   font-weight: 700;
@@ -1493,18 +1510,18 @@ button:disabled {
 }
 
 .workflow-stepper__step[data-status='complete'] .workflow-stepper__marker {
-  background-color: var(--color-success);
-  color: white;
+  background: var(--color-success);
+  color: var(--color-on-brand);
 }
 
 .workflow-stepper__step[data-status='active'] .workflow-stepper__marker {
-  background-color: var(--color-primary);
-  color: white;
+  background: var(--color-primary);
+  color: var(--color-on-brand);
   box-shadow: 0 0 0 3px var(--color-primary-bg);
 }
 
 .workflow-stepper__step[data-status='blocked'] .workflow-stepper__marker {
-  background-color: var(--color-danger-bg);
+  background: var(--color-danger-bg);
   color: var(--color-danger);
 }
 
@@ -1534,159 +1551,18 @@ button:disabled {
 .workflow-stepper__connector {
   flex: 1;
   height: 2px;
-  background-color: var(--color-border);
+  background: var(--color-border);
   margin: 0 var(--space-2);
 }
 
 .workflow-stepper__step[data-status='complete'] .workflow-stepper__connector {
-  background-color: var(--color-success);
+  background: var(--color-success);
 }
 
 .workflow-stepper[data-orientation='vertical'] .workflow-stepper__connector {
   display: none;
 }
 
-/* ==========================================================================
-   Landing page (kept somewhat working, landing renders independently)
-   ========================================================================== */
-
-.landing-shell { min-height: 100vh; background-color: var(--color-bg); }
-
-/* Hero command-center panel */
-.landing-hero-panel {
-  width: 100%;
-  max-width: 860px;
-  margin-top: 1rem;
-  background: #0F172A;
-  border-radius: 20px;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  overflow: hidden;
-  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
-  text-align: left;
-}
-
-.landing-hero-panel-main {
-  padding: 2.25rem 2.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  border-right: 1px solid rgba(255, 255, 255, 0.07);
-}
-
-.landing-hero-panel-main h2 {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #F1F5F9;
-  line-height: 1.3;
-}
-
-.landing-hero-panel-main p {
-  margin: 0;
-  color: #94A3B8;
-  font-size: 0.875rem;
-  line-height: 1.55;
-}
-
-.landing-hero-side {
-  padding: 2.25rem 2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.landing-panel-eyebrow {
-  margin: 0;
-  font-size: 0.6875rem;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: #107480;
-}
-
-.landing-signal-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.75rem;
-}
-
-.landing-signal-card {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 10px;
-  padding: 0.875rem 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.landing-signal-card strong {
-  font-size: 1.5rem;
-  font-weight: 800;
-  color: #107480;
-  font-family: var(--font-heading);
-  line-height: 1;
-}
-
-.landing-signal-card span {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: #CBD5E1;
-}
-
-.landing-signal-card small {
-  font-size: 0.6875rem;
-  color: #64748B;
-  line-height: 1.4;
-}
-
-.landing-timeline-row {
-  display: flex;
-  gap: 0.875rem;
-  align-items: flex-start;
-  font-size: 0.8125rem;
-}
-
-.landing-timeline-row > span {
-  flex-shrink: 0;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  color: #475569;
-  padding-top: 2px;
-  font-family: var(--font-mono);
-  white-space: nowrap;
-}
-
-.landing-timeline-row > div {
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-}
-
-.landing-timeline-row strong {
-  color: #E2E8F0;
-  font-size: 0.8125rem;
-  font-weight: 600;
-}
-
-.landing-timeline-row p {
-  margin: 0;
-  color: #64748B;
-  font-size: 0.75rem;
-  line-height: 1.45;
-}
-
-@media (max-width: 680px) {
-  .landing-hero-panel {
-    grid-template-columns: 1fr;
-  }
-  .landing-hero-panel-main {
-    border-right: none;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
-  }
-}
-
 /* ==========================================================================
    Responsive
    ========================================================================== */
@@ -1705,7 +1581,7 @@ button:disabled {
   border: none;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.1);
-  color: #fff;
+  color: var(--color-text-on-dark);
   cursor: pointer;
 }
 .admin-scrim {
@@ -1720,8 +1596,8 @@ button:disabled {
     position: sticky;
     top: 0;
     z-index: 40;
-    background: #0f172a;
-    color: #fff;
+    background: var(--color-sidebar);
+    color: var(--color-text-on-dark);
     padding: 0.6rem 1rem;
   }
   .admin-shell {
@@ -1768,12 +1644,12 @@ button:disabled {
 }
 
 .admin-sidebar::-webkit-scrollbar-thumb {
-  background-color: rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.08);
   border-radius: 3px;
 }
 
 .admin-sidebar::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.18);
 }
 
 /* ==========================================================================
@@ -1826,18 +1702,18 @@ button:disabled {
 
   body,
   .page-shell {
-    background: #fff !important;
+    background: var(--color-print-paper) !important;
   }
 
   .audit-packet {
-    color: #000;
+    color: var(--color-print-ink);
   }
 
   .audit-packet .section-card,
   .audit-packet .section-card--bordered {
     break-inside: avoid;
     border: 1px solid var(--color-border) !important;
-    background: #fff !important;
+    background: var(--color-print-paper) !important;
   }
 
   .audit-packet__print-header {
@@ -1852,7 +1728,7 @@ button:disabled {
     font-size: 8pt;
     color: var(--color-text-muted);
     border-bottom: 1px solid var(--color-border);
-    background: #fff;
+    background: var(--color-print-paper);
   }
 
   @page {