diff --git a/src/components/callout-banner/index.vue b/src/components/callout-banner/index.vue
index e23abd6..042c26b 100644
--- a/src/components/callout-banner/index.vue
+++ b/src/components/callout-banner/index.vue
@@ -10,6 +10,9 @@
   <component
     :is="clickable ? 'button' : 'div'"
     :type="clickable ? 'button' : undefined"
+    data-slot="callout-banner"
+    :data-tone="tone"
+    :data-clickable="clickable ? '' : undefined"
     class="flex flex-col gap-3 rounded-menu-shell border px-4 py-3 text-left sm:flex-row sm:items-center"
     :class="[toneClass, clickable ? interactiveClass : '']"
   >
@@ -68,19 +71,27 @@ const props = withDefaults(defineProps<{
 })
 
 // Full literal class strings per tone — Tailwind scans source text, so a runtime
-// concat would never be generated. Both tones now use a soft-token triplet.
-const toneClass = computed(() =>
-  props.tone === 'destructive'
-    ? 'border-destructive-border bg-destructive-soft'
-    : 'border-warning-border bg-warning-soft',
-)
+// concat would never be generated. Clickable hover uses the *-soft-hover tokens
+// (utilities layer) so the wash is visible and stays in the same tone family.
+const toneClass = computed(() => {
+  if (props.tone === 'destructive') {
+    const rest = 'border-destructive-border bg-destructive-soft'
+    return props.clickable
+      ? `${rest} transition-colors hover:bg-destructive-soft-hover hover:border-destructive-border-hover`
+      : rest
+  }
+  const rest = 'border-warning-border bg-warning-soft'
+  return props.clickable
+    ? `${rest} transition-colors hover:bg-warning-soft-hover hover:border-warning-border-hover`
+    : rest
+})
 
 const iconClass = computed(() =>
   props.tone === 'destructive' ? 'text-destructive' : 'text-warning-foreground',
 )
 
-// When the whole banner is the affordance, it gets the neutral overlay hover the
-// rest of the app's clickable surfaces use — the tile's own chrome, not a page
-// injection.
-const interactiveClass = 'w-full transition-colors hover:bg-accent' /* ui-allow-style */
+// When the whole banner is the affordance, hover stays in the same tone family
+// (see [data-slot="callout-banner"] rules in style.css) — not hover:bg-accent,
+// which replaced destructive/warning fills with neutral gray.
+const interactiveClass = 'w-full cursor-pointer'
 </script>
diff --git a/src/style.css b/src/style.css
index 4c4137a..d6d0011 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1089,6 +1089,8 @@
      call sites (see --muted-soft above for why color-mix, not a literal). */
   --destructive-soft: color-mix(in oklab, var(--destructive) 5%, transparent);
   --destructive-border: color-mix(in oklab, var(--destructive) 30%, transparent);
+  --destructive-soft-hover: color-mix(in oklab, var(--destructive) 14%, transparent);
+  --destructive-border-hover: color-mix(in oklab, var(--destructive) 45%, transparent);
   --border: oklch(0.915 0.0045 72);
   /* Alpha policy: the soft/faint divider and card-edge rung — same color-mix
      reasoning as --muted-soft/--destructive-soft, reproducing `border-border/60`
@@ -1387,6 +1389,8 @@
   --warning-solid-foreground: oklch(0.18 0.02 75);
   --warning-soft: oklch(0.97 0.045 80);
   --warning-border: oklch(0.86 0.10 80);
+  --warning-soft-hover: color-mix(in oklab, var(--warning-foreground) 16%, var(--warning-soft));
+  --warning-border-hover: color-mix(in oklab, var(--warning-foreground) 30%, var(--warning-border));
   --info: oklch(0.62 0.15 235);
   --info-foreground: oklch(0.36 0.12 235);
   --info-soft: oklch(0.96 0.035 235);
@@ -1954,6 +1958,8 @@
   --color-destructive-foreground: var(--destructive-foreground);
   --color-destructive-soft: var(--destructive-soft);
   --color-destructive-border: var(--destructive-border);
+  --color-destructive-soft-hover: var(--destructive-soft-hover);
+  --color-destructive-border-hover: var(--destructive-border-hover);
   --color-border: var(--border);
   --color-border-soft: var(--border-soft);
   --color-input: var(--input);
@@ -2036,6 +2042,8 @@
   --color-warning-solid-foreground: var(--warning-solid-foreground);
   --color-warning-soft: var(--warning-soft);
   --color-warning-border: var(--warning-border);
+  --color-warning-soft-hover: var(--warning-soft-hover);
+  --color-warning-border-hover: var(--warning-border-hover);
   --color-info: var(--info);
   --color-info-foreground: var(--info-foreground);
   --color-info-soft: var(--info-soft);