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/Column.tsx

@@ -35,9 +35,9 @@ export function KanbanColumn({ id, tasks, onCreateTask, onDeleteTask, onEditTask
     <div className="flex-shrink-0 w-80 md:w-1/4 md:flex-1 h-full">
       <Card 
         ref={setNodeRef}
-        variant="elevated" 
+        variant="column" 
         className={`h-full flex flex-col transition-all duration-200 ${
-          isOver ? 'ring-2 ring-cyan-400/50 bg-slate-800/60' : ''
+          isOver ? 'ring-2 ring-[var(--primary)]/50 bg-[var(--card-hover)]' : ''
         }`}
       >
         <CardHeader className="pb-3">
@@ -55,7 +55,7 @@ export function KanbanColumn({ id, tasks, onCreateTask, onDeleteTask, onEditTask
               {onCreateTask && (
                 <button
                   onClick={() => setShowQuickAdd(true)}
-                  className={`w-5 h-5 rounded-full border border-dashed ${style.border} ${style.accent} hover:bg-slate-800/50 transition-colors flex items-center justify-center text-xs font-mono`}
+                  className={`w-5 h-5 rounded-full border border-dashed ${style.border} ${style.accent} hover:bg-[var(--card-hover)] transition-colors flex items-center justify-center text-xs font-mono`}
                   title="Ajouter une tâche rapide"
                 >
                   +
@@ -81,10 +81,10 @@ export function KanbanColumn({ id, tasks, onCreateTask, onDeleteTask, onEditTask
             
             {tasks.length === 0 && !showQuickAdd ? (
               <div className="text-center py-20">
-                <div className={`w-16 h-16 mx-auto mb-4 rounded-full bg-slate-800 border-2 border-dashed ${style.border} flex items-center justify-center`}>
+                <div className={`w-16 h-16 mx-auto mb-4 rounded-full bg-[var(--card)] border-2 border-dashed ${style.border} flex items-center justify-center`}>
                   <span className={`text-2xl ${style.accent} opacity-50`}>{statusConfig.icon}</span>
                 </div>
-                <p className="text-xs font-mono text-slate-500 uppercase tracking-wide">NO DATA</p>
+                <p className="text-xs font-mono text-[var(--muted-foreground)] uppercase tracking-wide">NO DATA</p>
                 <div className="mt-2 flex justify-center">
                   <div className={`w-8 h-0.5 ${style.accent.replace('text-', 'bg-')} opacity-30`}></div>
                 </div>