Now I can see the issue. The outline variant uses hover:bg-accent hover:text-accent-foreground, and in dark mode the accent color is the same teal (oklch(0.75 0.15 195)) as primary, with accent-foreground being a dark color (oklch(0.12 0.01 250)). This causes text to become invisible on hover since the background becomes teal and the text becomes dark on dark backgrounds.

For the secondary variant, it uses hover:bg-secondary/80 which keeps the same dark background, but doesn't explicitly set the text color on hover, which could also cause issues.

I'll fix the outline and secondary button variants to ensure text remains readable on hover/focus:

I've applied a global fix to the button component for the outline and secondary variants. For the outline variant, I added dark:hover:text-foreground to ensure the text remains light/readable on hover, and dark:hover:border-border for subtle border contrast. For the secondary variant, I added dark:hover:bg-secondary/60 for slightly more visible hover feedback and dark:hover:text-foreground to keep text readable. These changes only affect dark mode and preserve the existing light mode behavior while maintaining the security-focused dark aesthetic.

I found the two Cancel buttons in the AlertDialog modals. Both use AlertDialogCancel with className="bg-transparent border-border/50 hover:bg-secondary/50". The issue is that on hover, hover:bg-secondary/50 applies but there's no explicit hover text color, causing the text to potentially become invisible. I need to add hover:text-foreground to ensure the text stays readable on hover.

I fixed the Cancel button hover visibility in both the Emergency Lockdown and Delete Account confirmation modals. For each Cancel button, I added text-foreground to set an explicit default text color, hover:text-foreground to ensure the text remains readable on hover, and hover:border-border for subtle border contrast feedback. These changes are scoped only to the two modals and preserve the existing dark, security-focused design language.