fix(toaster): enable richColors so error surface actually applies

Setting --error-bg alone had no effect: sonner only honors per-type
surfaces when richColors is enabled, so error toasts kept using
--normal-bg and looked identical to a normal toast. Enable richColors
and pin success/info/warning back to the neutral popover surface so only
errors turn red.

frontend/src/components/ui/__tests__/sonner.test.tsx

@@ -32,5 +32,15 @@ describe('Toaster', () => {
     const style = list.getAttribute('style') ?? ''
     expect(style).toContain('--error-bg: #f85149')
     expect(style).toContain('--error-text: #ffffff')
+
+    // richColors must be on for sonner to apply the per-type surface, and the
+    // toast itself must be tagged as an error so it picks up --error-bg.
+    const item = await waitFor(() => {
+      const el = document.querySelector('[data-sonner-toast]') as HTMLElement | null
+      expect(el).not.toBeNull()
+      return el!
+    })
+    expect(item.getAttribute('data-rich-colors')).toBe('true')
+    expect(item.getAttribute('data-type')).toBe('error')
   })
 })

frontend/src/components/ui/sonner.tsx

@@ -11,6 +11,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
     <Sonner
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
+      richColors
       icons={{
         success: (
           <CircleCheckIcon className="size-4" />
@@ -34,11 +35,23 @@ const Toaster = ({ ...props }: ToasterProps) => {
           "--normal-text": "var(--popover-foreground)",
           "--normal-border": "var(--border)",
           "--border-radius": "var(--radius)",
-          // Errors use a red surface so failures (e.g. a failed save while the
-          // backend is down) stand out instead of reading like a normal toast.
+          // richColors (below) is required for sonner to honor per-type surfaces.
+          // Errors get a red surface so failures (e.g. a save while the backend
+          // is down) stand out instead of reading like a normal toast...
           "--error-bg": "#f85149",
           "--error-text": "#ffffff",
           "--error-border": "#da3633",
+          // ...while success/info/warning stay on the neutral popover surface so
+          // the rest of the toast UX is unchanged.
+          "--success-bg": "var(--popover)",
+          "--success-text": "var(--popover-foreground)",
+          "--success-border": "var(--border)",
+          "--info-bg": "var(--popover)",
+          "--info-text": "var(--popover-foreground)",
+          "--info-border": "var(--border)",
+          "--warning-bg": "var(--popover)",
+          "--warning-text": "var(--popover-foreground)",
+          "--warning-border": "var(--border)",
         } as React.CSSProperties
       }
       toastOptions={{