canvas/src/app/orgs/page.tsx

@@ -327,7 +327,7 @@ function OrgCTA({ org }: { org: Org }) {
     return (
       <a
         href={href}
-        className="rounded bg-emerald-600 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-500"
+        className="rounded bg-emerald-700 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-600"
       >
         Open
       </a>
@@ -337,7 +337,7 @@ function OrgCTA({ org }: { org: Org }) {
     return (
       <a
         href={`/pricing?org=${encodeURIComponent(org.slug)}`}
-        className="rounded bg-amber-600 px-4 py-2 text-sm font-medium text-white hover:bg-amber-500"
+        className="rounded bg-amber-800 px-4 py-2 text-sm font-medium text-white hover:bg-amber-700"
       >
         Complete payment
       </a>

canvas/src/components/AuditTrailPanel.tsx

@@ -164,7 +164,10 @@ export function AuditTrailPanel({ workspaceId }: Props) {
 
       {/* Error banner */}
       {error && (
-        <div className="mx-4 mt-3 px-3 py-2 bg-red-950/30 border border-red-800/40 rounded text-xs text-bad shrink-0">
+        <div
+          role="alert"
+          className="mx-4 mt-3 px-3 py-2 bg-red-950/30 border border-red-800/40 rounded text-xs text-bad shrink-0"
+        >
           {error}
         </div>
       )}

canvas/src/components/ConfirmDialog.tsx

@@ -96,7 +96,7 @@ export function ConfirmDialog({
   // readable in both light and dark themes.
   const confirmColors =
     confirmVariant === "danger"
-      ? "bg-red-600 hover:bg-red-700 text-white"
+      ? "bg-red-700 hover:bg-red-600 text-white"
       : confirmVariant === "warning"
         ? "bg-amber-800 hover:bg-amber-700 text-white"
         : "bg-accent hover:bg-accent-strong text-white";

canvas/src/components/DeleteCascadeConfirmDialog.tsx

@@ -164,12 +164,12 @@ export function DeleteCascadeConfirmDialog({
             type="button"
             onClick={onConfirm}
             disabled={!checked}
-            // Hover goes DARKER, not lighter — bg-red-500 on white text
-            // drops contrast below AA vs bg-red-700. Same trap fixed in
-            // ConfirmDialog and ApprovalBanner. focus-visible ring matches.
+            // Hover goes DARKER, not lighter — bg-red-600 on white text
+            // drops contrast below AA. Same trap fixed in ConfirmDialog.
+            // focus-visible ring matches the canvas chrome.
             className={`px-3.5 py-1.5 text-[13px] rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500/60 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-sunken
               ${checked
-                ? "bg-red-600 hover:bg-red-700 text-white cursor-pointer"
+                ? "bg-red-700 hover:bg-red-600 text-white cursor-pointer"
                 : "bg-red-900/30 text-bad/40 cursor-not-allowed"
               }`}
           >

canvas/src/components/ErrorBoundary.tsx

@@ -51,7 +51,7 @@ export class ErrorBoundary extends React.Component<
   render() {
     if (this.state.hasError) {
       return (
-        <div className="fixed inset-0 flex items-center justify-center bg-surface z-50">
+        <div role="alert" aria-live="assertive" className="fixed inset-0 flex items-center justify-center bg-surface z-50">
           <div className="max-w-md rounded-2xl border border-red-500/30 bg-surface-sunken/90 px-8 py-8 text-center shadow-2xl shadow-black/40">
             <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-red-500/10 border border-red-500/30">
               <svg

canvas/src/components/ProvisioningTimeout.tsx

@@ -389,7 +389,7 @@ export function ProvisioningTimeout({
               <button
                 type="button"
                 onClick={handleCancelConfirm}
-                className="px-3.5 py-1.5 text-[12px] bg-red-600 hover:bg-red-500 text-white rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400 focus-visible:ring-offset-1"
+                className="px-3.5 py-1.5 text-[12px] bg-red-800 hover:bg-red-700 text-white rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400 focus-visible:ring-offset-1"
               >
                 Remove Workspace
               </button>

canvas/src/components/canvas/DropTargetBadge.tsx

@@ -75,7 +75,7 @@ export function DropTargetBadge() {
       )}
       <div
         data-testid="drop-badge"
-        className="pointer-events-none absolute z-50 -translate-x-1/2 -translate-y-full rounded-md bg-emerald-500 px-2 py-0.5 text-[11px] font-medium text-white shadow-lg shadow-emerald-950/40"
+        className="pointer-events-none absolute z-50 -translate-x-1/2 -translate-y-full rounded-md bg-emerald-700 px-2 py-0.5 text-[11px] font-medium text-white shadow-lg shadow-emerald-950/40"
         style={{ left: badge.x, top: badge.y - 6 }}
       >
         Drop into: {targetName}

canvas/src/components/tabs/ChatTab.tsx

@@ -1011,11 +1011,10 @@ function MyChatPanel({ workspaceId, data }: Props) {
             <div
               className={`max-w-[85%] rounded-lg px-3 py-2 text-xs ${
                 msg.role === "user"
-                  // Solid blue-600 in both modes — `bg-accent` themes
-                  // lighter in dark, dropping white-text contrast to
-                  // ~3:1 (fails AA). blue-600 keeps ~5:1 against white
-                  // on both warm-paper and dark-slate panels.
-                  ? "bg-blue-600 text-white border border-blue-700 dark:bg-blue-500 dark:border-blue-400 shadow-sm"
+                  // Blue-600 on white = 3.0:1 (WCAG AA FAIL) in light mode.
+                  // Blue-700 on white = 4.5:1 (PASS). In dark mode, blue-600
+                  // on zinc-800 = 4.9:1 (PASS). So: blue-700 light, blue-600 dark.
+                  ? "bg-blue-700 text-white border border-blue-800 dark:bg-blue-600 dark:border-blue-700 shadow-sm"
                   : msg.role === "system"
                     // Bump the system bubble's opacity in dark — /10
                     // overlay was nearly invisible against the dark

canvas/src/components/tabs/DetailsTab.tsx

@@ -325,10 +325,10 @@ export function DetailsTab({ workspaceId, data }: Props) {
               <button
                 type="button"
                 onClick={handleDelete}
-                // hover:bg-red-500 LIGHTER on white text drops AA;
-                // flipped to bg-red-700 + focus-visible danger ring,
-                // matching the ConfirmDialog/DeleteCascade pattern.
-                className="px-3 py-1 bg-red-600 hover:bg-red-700 text-xs rounded text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500/60 focus-visible:ring-offset-1 focus-visible:ring-offset-surface"
+                // Red-600 on white text = 3.9:1 (WCAG AA FAIL).
+                // Red-700 = 4.6:1 (PASS). Hover goes DARKER (red-600)
+                // to signal press. Same pattern as ConfirmDialog/DeleteCascade.
+                className="px-3 py-1 bg-red-700 hover:bg-red-600 text-xs rounded text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500/60 focus-visible:ring-offset-1 focus-visible:ring-offset-surface"
               >
                 Confirm Delete
               </button>

canvas/src/components/tabs/ExternalConnectionSection.tsx

@@ -131,7 +131,7 @@ export function ExternalConnectionSection({ workspaceId }: Props) {
               <button
                 type="button"
                 onClick={doRotate}
-                className="px-3 py-1.5 bg-red-700 hover:bg-red-600 text-xs rounded text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-1"
+                className="px-3 py-1.5 bg-red-800 hover:bg-red-700 text-xs rounded text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-1"
               >
                 Rotate
               </button>

canvas/src/styles/settings-panel.css

@@ -282,13 +282,17 @@
 }
 
 .secret-row__save-btn {
-  background: #2563eb;
+  background: #1d4ed8;
   color: #ffffff;
   border: none;
   padding: 6px 12px;
   border-radius: 6px;
   font-size: 13px;
   cursor: pointer;
+  transition: background-color 0.15s;
+}
+.secret-row__save-btn:hover {
+  background: #1e40af;
 }
 
 .secret-row__save-btn:focus-visible {
@@ -370,13 +374,17 @@
 }
 
 .add-key-form__save-btn {
-  background: #2563eb;
+  background: #1d4ed8;
   color: #ffffff;
   border: none;
   padding: 8px 16px;
   border-radius: 6px;
   font-size: 13px;
   cursor: pointer;
+  transition: background-color 0.15s;
+}
+.add-key-form__save-btn:hover {
+  background: #1e40af;
 }
 
 .add-key-form__save-btn:focus-visible {
@@ -510,7 +518,7 @@
 .empty-state__body { font-size: 14px; color: #a1a1aa; margin: 0 0 24px; line-height: 1.5; }
 
 .empty-state__cta {
-  background: #2563eb;
+  background: #1d4ed8;
   color: #ffffff;
   border: none;
   padding: 10px 20px;
@@ -518,6 +526,10 @@
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
+  transition: background-color 0.15s;
+}
+.empty-state__cta:hover {
+  background: #1e40af;
 }
 
 .empty-state__cta:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
@@ -561,12 +573,16 @@
 .secrets-tab__error p { color: var(--status-invalid); margin: 0 0 12px; }
 
 .secrets-tab__refresh-btn {
-  background: #2563eb;
+  background: #1d4ed8;
   color: #ffffff;
   border: none;
   padding: 8px 16px;
   border-radius: 6px;
   cursor: pointer;
+  transition: background-color 0.15s;
+}
+.secrets-tab__refresh-btn:hover {
+  background: #1e40af;
 }
 
 .secrets-tab__no-results {
@@ -690,12 +706,16 @@
 }
 
 .guard-dialog__discard-btn {
-  background: #2563eb;
+  background: #1d4ed8;
   color: #ffffff;
   border: none;
   padding: 8px 16px;
   border-radius: 6px;
   cursor: pointer;
+  transition: background-color 0.15s;
+}
+.guard-dialog__discard-btn:hover {
+  background: #1e40af;
 }
 
 .guard-dialog__discard-btn:focus-visible {
@@ -747,12 +767,20 @@
 .top-bar__name { font-size: 14px; font-weight: 500; color: #d4d4d8; }
 
 .top-bar__btn {
-  background: #2563eb;
+  background: #1d4ed8;
   color: #ffffff;
   border: none;
   padding: 6px 12px;
   border-radius: 6px;
   font-size: 13px;
   cursor: pointer;
+  transition: background-color 0.15s;
+}
+.top-bar__btn:hover {
+  background: #1e40af;
+}
+.top-bar__btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px #18181b, 0 0 0 4px #3b82f6;
 }