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.

src/app/globals.css

@@ -1,8 +1,39 @@
 @import "tailwindcss";
 
 :root {
+  /* Dark theme (default) */
   --background: #020617; /* slate-950 */
   --foreground: #f1f5f9; /* slate-100 */
+  --card: #0f172a; /* slate-900 */
+  --card-hover: #1e293b; /* slate-800 */
+  --card-column: #0f172a; /* slate-900 - same as card in dark */
+  --border: #334155; /* slate-700 */
+  --input: #1e293b; /* slate-800 */
+  --primary: #06b6d4; /* cyan-500 */
+  --primary-foreground: #f1f5f9; /* slate-100 */
+  --muted: #475569; /* slate-600 */
+  --muted-foreground: #94a3b8; /* slate-400 */
+  --accent: #f59e0b; /* amber-500 */
+  --destructive: #ef4444; /* red-500 */
+  --success: #10b981; /* emerald-500 */
+}
+
+.light {
+  /* Light theme */
+  --background: #f1f5f9; /* slate-100 */
+  --foreground: #0f172a; /* slate-900 */
+  --card: #ffffff; /* white */
+  --card-hover: #f8fafc; /* slate-50 */
+  --card-column: #f8fafc; /* slate-50 - colonnes plus foncées que les cartes */
+  --border: #cbd5e1; /* slate-300 */
+  --input: #ffffff; /* white */
+  --primary: #0891b2; /* cyan-600 */
+  --primary-foreground: #ffffff; /* white */
+  --muted: #94a3b8; /* slate-400 - plus clair pour scrollbar */
+  --muted-foreground: #64748b; /* slate-500 */
+  --accent: #d97706; /* amber-600 */
+  --destructive: #dc2626; /* red-600 */
+  --success: #059669; /* emerald-600 */
 }
 
 @theme inline {
@@ -21,21 +52,21 @@ body {
 
 /* Scrollbar tech style */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-track {
-  background: #1e293b; /* slate-800 */
+  background: var(--card);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #475569; /* slate-600 */
+  background: var(--muted);
   border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #06b6d4; /* cyan-500 */
+  background: var(--primary);
 }
 
 /* Animations tech */