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.

components/filters/filter-rule-modal.tsx

@@ -299,7 +299,7 @@ export function FilterRuleModal({
                     type="button"
                     onClick={() => removeCondition(index)}
                     disabled={conditions.length <= 1}
-                    className="p-1.5 rounded hover:bg-muted text-muted-foreground hover:text-red-600 dark:hover:text-red-400 transition-colors disabled:opacity-30 disabled:pointer-events-none"
+                    className="p-1.5 rounded hover:bg-muted text-muted-foreground hover:text-destructive transition-colors disabled:opacity-30 disabled:pointer-events-none"
                     aria-label={t("delete_rule")}
                   >
                     <Trash2 className="w-4 h-4" />
@@ -387,7 +387,7 @@ export function FilterRuleModal({
                     type="button"
                     onClick={() => removeAction(index)}
                     disabled={actions.length <= 1}
-                    className="p-1.5 rounded hover:bg-muted text-muted-foreground hover:text-red-600 dark:hover:text-red-400 transition-colors disabled:opacity-30 disabled:pointer-events-none"
+                    className="p-1.5 rounded hover:bg-muted text-muted-foreground hover:text-destructive transition-colors disabled:opacity-30 disabled:pointer-events-none"
                     aria-label={t("delete_rule")}
                   >
                     <Trash2 className="w-4 h-4" />

components/filters/sieve-editor-modal.tsx

@@ -93,7 +93,7 @@ export function SieveEditorModal({
         </div>
 
         <div className="px-6 py-4 flex-1 overflow-hidden flex flex-col space-y-4">
-          <div className="flex items-start gap-2 p-3 rounded-md bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 text-sm text-amber-700 dark:text-amber-400">
+          <div className="flex items-start gap-2 p-3 rounded-md bg-warning/10 border border-warning/20 text-sm text-warning">
             <AlertTriangle className="w-4 h-4 mt-0.5 flex-shrink-0" />
             <p>{t("warning")}</p>
           </div>
@@ -131,8 +131,8 @@ export function SieveEditorModal({
             <div
               className={`flex items-start gap-2 p-3 rounded-md text-sm ${
                 validationResult.isValid
-                  ? "bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400"
-                  : "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400"
+                  ? "bg-success/10 border border-success/20 text-success"
+                  : "bg-destructive/10 border border-destructive/20 text-destructive"
               }`}
             >
               {validationResult.isValid ? (
@@ -157,7 +157,7 @@ export function SieveEditorModal({
           )}
 
           {showSaveWarning && (
-            <div className="flex items-start gap-2 p-3 rounded-md bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 text-sm text-amber-700 dark:text-amber-400">
+            <div className="flex items-start gap-2 p-3 rounded-md bg-warning/10 border border-warning/20 text-sm text-warning">
               <AlertTriangle className="w-4 h-4 mt-0.5 flex-shrink-0" />
               <p>{t("save_warning")}</p>
             </div>