feat: Added opaque toast-specific background variables and wired Toast.…

- "src/frontend/src/styles/theme.css"
- "src/frontend/src/components/Toast.tsx"

GSD-Task: S01/T03

src/frontend/src/components/Toast.tsx

@@ -75,7 +75,7 @@ export function ToastProvider({ children }: { children: ReactNode }) {
                 boxShadow: 'var(--shadow-lg)',
                 pointerEvents: 'auto',
                 cursor: 'pointer',
-                backgroundColor: t.variant === 'error' ? 'var(--danger-bg)' : t.variant === 'success' ? 'var(--success-bg)' : 'var(--bg-card)',
+                backgroundColor: t.variant === 'error' ? 'var(--toast-danger-bg)' : t.variant === 'success' ? 'var(--toast-success-bg)' : 'var(--toast-info-bg)',
                 border: `1px solid ${t.variant === 'error' ? 'var(--danger)' : t.variant === 'success' ? 'var(--success)' : 'var(--border)'}`,
                 color: t.variant === 'error' ? 'var(--danger)' : t.variant === 'success' ? 'var(--success)' : 'var(--text-primary)',
                 animation: 'toast-slide-in 0.25s ease-out',

src/frontend/src/styles/theme.css

@@ -40,6 +40,11 @@
   --info: #e05d44;
   --info-bg: rgba(224, 93, 68, 0.1);
 
+  /* ── Toast backgrounds (opaque — toasts float over arbitrary content) ── */
+  --toast-success-bg: #152b1a;
+  --toast-danger-bg: #2e1515;
+  --toast-info-bg: var(--bg-card-solid);
+
   /* ── Borders ── */
   --border: rgba(255, 255, 255, 0.06);
   --border-light: rgba(255, 255, 255, 0.1);
@@ -136,6 +141,11 @@
   --info: #d14836;
   --info-bg: rgba(209, 72, 54, 0.08);
 
+  /* ── Toast backgrounds (opaque) ── */
+  --toast-success-bg: #e8f5e9;
+  --toast-danger-bg: #fde8e8;
+  --toast-info-bg: var(--bg-card-solid);
+
   /* ── Borders ── */
   --border: rgba(0, 0, 0, 0.08);
   --border-light: rgba(0, 0, 0, 0.12);