diff --git a/canvas/src/components/ConfirmDialog.tsx b/canvas/src/components/ConfirmDialog.tsx
index 93961db4..75cacd70 100644
--- a/canvas/src/components/ConfirmDialog.tsx
+++ b/canvas/src/components/ConfirmDialog.tsx
@@ -91,12 +91,15 @@ export function ConfirmDialog({
if (!open || !mounted) return null;
+ // Hover goes DARKER, not lighter — lighter shades on white text drop
+ // contrast below AA on the accent and red ramps. Darker hovers stay
+ // readable in both light and dark themes.
const confirmColors =
confirmVariant === "danger"
- ? "bg-red-600 hover:bg-red-500 text-white"
+ ? "bg-red-600 hover:bg-red-700 text-white"
: confirmVariant === "warning"
- ? "bg-amber-600 hover:bg-amber-500 text-white"
- : "bg-accent-strong hover:bg-accent text-white";
+ ? "bg-amber-600 hover:bg-amber-700 text-white"
+ : "bg-accent hover:bg-accent-strong text-white";
// Render via Portal so the fixed-position dialog escapes any containing block
// (e.g. parents with transform, filter, will-change that break position:fixed).
@@ -123,7 +126,7 @@ export function ConfirmDialog({
@@ -131,7 +134,7 @@ export function ConfirmDialog({