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/settings/plugins-settings.tsx

@@ -68,7 +68,7 @@ export function PluginsSettings() {
   };
 
   return (
-    <SettingsSection title="Plugins" description="Manage installed plugins. Upload plugin .zip files to add new functionality.">
+    <SettingsSection title="Plugins" description="Manage installed plugins. Upload plugin .zip files to add new functionality." experimental experimentalDescription="Plugins is an experimental feature. The plugin API is not yet stable and may change between releases, which could break existing plugins. Plugins run in a sandboxed environment but have access to your data within the application. Only install plugins from sources you trust.">
       {/* Plugin List */}
       {plugins.length === 0 ? (
         <div className="flex flex-col items-center justify-center py-12 text-center">

components/settings/settings-section.tsx

@@ -1,16 +1,29 @@
 import { ReactNode } from 'react';
-import { Lock } from 'lucide-react';
+import { Lock, FlaskConical } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 interface SettingsSectionProps {
   title: string;
   description?: string;
   children: ReactNode;
+  experimental?: boolean;
+  experimentalDescription?: string;
 }
 
-export function SettingsSection({ title, description, children }: SettingsSectionProps) {
+export function SettingsSection({ title, description, children, experimental, experimentalDescription }: SettingsSectionProps) {
   return (
     <div className="space-y-4">
+      {experimental && (
+        <div className="flex gap-3 rounded-lg border border-amber-300 bg-amber-50 p-3 dark:border-amber-700 dark:bg-amber-950/30">
+          <FlaskConical className="w-5 h-5 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
+          <div>
+            <p className="text-sm font-medium text-amber-800 dark:text-amber-300">Experimental Feature</p>
+            {experimentalDescription && (
+              <p className="text-xs text-amber-700 dark:text-amber-400/80 mt-1">{experimentalDescription}</p>
+            )}
+          </div>
+        </div>
+      )}
       <div>
         <h3 className="text-lg font-medium text-foreground">{title}</h3>
         {description && (

components/settings/themes-settings.tsx

@@ -69,7 +69,8 @@ export function ThemesSettings() {
   };
 
   return (
-    <SettingsSection title="Themes" description="Customize the appearance with color themes. Upload .zip theme files or activate built-in presets.">
+    <SettingsSection title="Themes" description="Customize the appearance with color themes. Upload .zip theme files or activate built-in presets." experimental experimentalDescription="Themes is an experimental feature. Custom themes may not cover all UI elements, and theme formats could change in future updates. Built-in presets are stable, but uploaded themes may require updates after application upgrades.">
+
       {/* Theme Grid */}
       <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
         {/* Default theme card */}

components/settings/vacation-settings.tsx

@@ -240,7 +240,7 @@ export function VacationSettings() {
       {validationWarnings.length > 0 && (
         <div className="space-y-2">
           {validationWarnings.map((warning, i) => (
-            <div key={i} className="flex items-start gap-2 text-sm text-amber-700 dark:text-amber-400">
+            <div key={i} className="flex items-start gap-2 text-sm text-warning">
               <AlertTriangle className="w-4 h-4 mt-0.5 flex-shrink-0" />
               <span>{warning}</span>
             </div>