fix: improve toast notification readability

Enhanced toast notifications with better contrast and visibility:
- Increased background opacity from /10 to /90 for all variants
- Changed to thicker border (border-2) for better definition
- Added backdrop-blur-sm for depth and clarity
- Improved text contrast:
  * Success/Error/Info: White text on colored backgrounds
  * Warning: Black text on yellow background
  * Default: Uses theme foreground color
- Enhanced shadow (shadow-2xl) for better separation
- Added aria-label to close button for accessibility

Toast notifications are now clearly readable in both light and dark modes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/ui/Toast.tsx

@@ -100,17 +100,17 @@ function ToastItem({
   return (
     <div
       className={cn(
-        'flex items-start gap-3 rounded-lg border p-4 shadow-lg pointer-events-auto',
-        'animate-slideInFromRight',
+        'flex items-start gap-3 rounded-lg border-2 p-4 shadow-2xl pointer-events-auto',
+        'animate-slideInFromRight backdrop-blur-sm',
         {
-          'bg-card border-border': variant === 'default',
-          'bg-success/10 border-success text-success-foreground':
+          'bg-card/95 border-border text-foreground': variant === 'default',
+          'bg-success/90 border-success text-white dark:text-white':
             variant === 'success',
-          'bg-destructive/10 border-destructive text-destructive-foreground':
+          'bg-destructive/90 border-destructive text-white dark:text-white':
             variant === 'error',
-          'bg-warning/10 border-warning text-warning-foreground':
+          'bg-warning/90 border-warning text-black dark:text-black':
             variant === 'warning',
-          'bg-info/10 border-info text-info-foreground': variant === 'info',
+          'bg-info/90 border-info text-white dark:text-white': variant === 'info',
         }
       )}
     >
@@ -125,7 +125,8 @@ function ToastItem({
       </div>
       <button
         onClick={() => onRemove(toast.id)}
-        className="flex-shrink-0 rounded-md p-1 hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
+        className="flex-shrink-0 rounded-md p-1 hover:bg-black/20 dark:hover:bg-white/20 transition-colors"
+        aria-label="Close"
       >
         <X className="h-4 w-4" />
       </button>