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/ui/Input.tsx

@@ -11,26 +11,26 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className="space-y-2">
         {label && (
-          <label className="block text-sm font-mono font-medium text-slate-300 uppercase tracking-wider">
+          <label className="block text-sm font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
             {label}
           </label>
         )}
         <input
           className={cn(
-            'w-full px-3 py-2 bg-slate-800/50 border border-slate-700/50 rounded-lg',
-            'text-slate-100 font-mono text-sm placeholder-slate-500',
-            'focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500/50',
-            'hover:border-slate-600/50 transition-all duration-200',
+            'w-full px-3 py-2 bg-[var(--input)] border border-[var(--border)]/50 rounded-lg',
+            'text-[var(--foreground)] font-mono text-sm placeholder-[var(--muted-foreground)]',
+            'focus:outline-none focus:ring-2 focus:ring-[var(--primary)]/50 focus:border-[var(--primary)]/50',
+            'hover:border-[var(--border)] transition-all duration-200',
             'backdrop-blur-sm',
-            error && 'border-red-500/50 focus:ring-red-500/50 focus:border-red-500/50',
+            error && 'border-[var(--destructive)]/50 focus:ring-[var(--destructive)]/50 focus:border-[var(--destructive)]/50',
             className
           )}
           ref={ref}
           {...props}
         />
         {error && (
-          <p className="text-xs font-mono text-red-400 flex items-center gap-1">
-            <span className="text-red-500">⚠</span>
+          <p className="text-xs font-mono text-[var(--destructive)] flex items-center gap-1">
+            <span className="text-[var(--destructive)]">⚠</span>
             {error}
           </p>
         )}