refactor: update styling and color classes across components

- Changed error message styling in ICalImportModal to use new color classes.
- Updated task completion styling in TaskListView to use new success color classes.
- Modified selected styling in ContactListItem tests to reflect new background class.
- Adjusted duplicate warning styling in ContactImportDialog to use new warning color classes.
- Refactored background and border colors in CalendarInvitationBanner for various statuses.
- Updated email list item and viewer components to use new warning and success color classes.
- Refined styling for unread indicators in email components.
- Enhanced error fallback styling in error components to use new warning color classes.
- Updated filter rule modal button hover styles to use new destructive color classes.
- Added experimental feature descriptions in Plugins and Themes settings.
- Refined vacation settings validation warning styling to use new warning color classes.
- Updated toast component styles to use new color classes for different states.
- Introduced a new built-in theme 'Qui' with specific color variables.
- Adjusted email security status colors to use new warning color classes.

app/admin/page.tsx

@@ -105,18 +105,18 @@ export default function AdminDashboardPage() {
     <div className="max-w-3xl space-y-8">
       {/* Warnings */}
       {warnings.map((msg, i) => (
-        <div key={i} className="flex items-start gap-3 rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/30 p-4">
-          <AlertTriangle className="w-5 h-5 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
-          <p className="text-sm text-amber-700 dark:text-amber-300">{msg}</p>
+        <div key={i} className="flex items-start gap-3 rounded-lg border border-warning/20 bg-warning/10 p-4">
+          <AlertTriangle className="w-5 h-5 text-warning mt-0.5 shrink-0" />
+          <p className="text-sm text-warning">{msg}</p>
         </div>
       ))}
 
       {status && !status.lastLogin && (
-        <div className="flex items-start gap-3 rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/30 p-4">
-          <AlertTriangle className="w-5 h-5 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
+        <div className="flex items-start gap-3 rounded-lg border border-warning/20 bg-warning/10 p-4">
+          <AlertTriangle className="w-5 h-5 text-warning mt-0.5 shrink-0" />
           <div>
-            <p className="text-sm font-medium text-amber-800 dark:text-amber-200">First login detected</p>
-            <p className="text-sm text-amber-700 dark:text-amber-300 mt-0.5">
+            <p className="text-sm font-medium text-warning">First login detected</p>
+            <p className="text-sm text-warning/80 mt-0.5">
               Remember to remove ADMIN_PASSWORD from your .env file now that the hash is stored securely.
             </p>
           </div>

app/admin/plugins/page.tsx

@@ -252,8 +252,8 @@ export default function AdminPluginsPage() {
                 </div>
                 {plugin.permissions.length > 0 && (
                   <div className="flex items-center gap-1 mt-1">
-                    <AlertTriangle className="w-3 h-3 text-amber-500" />
-                    <span className="text-xs text-amber-600 dark:text-amber-400">
+                    <AlertTriangle className="w-3 h-3 text-warning" />
+                    <span className="text-xs text-warning">
                       Permissions: {plugin.permissions.join(', ')}
                     </span>
                   </div>