feat: implement theme system and UI updates

- Added theme context and provider for light/dark mode support.
- Integrated theme toggle button in the Header component.
- Updated UI components to utilize CSS variables for consistent theming.
- Enhanced Kanban components and forms with new theme styles for better visual coherence.
- Adjusted global styles to define color variables for both themes, improving maintainability.

components/kanban/ColumnVisibilityToggle.tsx

@@ -30,7 +30,7 @@ export function ColumnVisibilityToggle({
 
   return (
     <div className={`flex items-center gap-2 ${className}`}>
-      <span className="text-sm font-mono font-medium text-slate-400">
+      <span className="text-sm font-mono font-medium text-[var(--muted-foreground)]">
         Colonnes :
       </span>
       {statuses.map(statusConfig => (
@@ -39,8 +39,8 @@ export function ColumnVisibilityToggle({
           onClick={() => onToggleStatus(statusConfig.key)}
           className={`px-3 py-1 rounded-lg text-xs font-mono font-medium transition-colors ${
             hiddenStatuses.has(statusConfig.key)
-              ? 'bg-slate-700/50 text-slate-500 hover:bg-slate-700'
-              : 'bg-blue-600/20 text-blue-300 border border-blue-500/30 hover:bg-blue-600/30'
+              ? 'bg-[var(--muted)]/20 text-[var(--muted)] hover:bg-[var(--muted)]/30'
+              : 'bg-[var(--primary)]/20 text-[var(--primary)] border border-[var(--primary)]/30 hover:bg-[var(--primary)]/30'
           }`}
           title={hiddenStatuses.has(statusConfig.key) ? `Afficher ${statusConfig.label}` : `Masquer ${statusConfig.label}`}
         >