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

@@ -11,12 +11,12 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
     const baseStyles = 'inline-flex items-center font-mono font-medium transition-all duration-200';
     
     const variants = {
-      default: 'bg-slate-800/50 text-slate-300 border border-slate-600/50',
-      primary: 'bg-cyan-950/50 text-cyan-300 border border-cyan-500/30',
-      success: 'bg-emerald-950/50 text-emerald-300 border border-emerald-500/30',
-      warning: 'bg-yellow-950/50 text-yellow-300 border border-yellow-500/30',
-      danger: 'bg-red-950/50 text-red-300 border border-red-500/30',
-      outline: 'bg-transparent text-slate-400 border border-slate-600 hover:bg-slate-800/30 hover:text-slate-300'
+      default: 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)]',
+      primary: 'bg-[var(--primary)]/20 text-[var(--primary)] border border-[var(--primary)]/30',
+      success: 'bg-[var(--success)]/20 text-[var(--success)] border border-[var(--success)]/30',
+      warning: 'bg-[var(--accent)]/20 text-[var(--accent)] border border-[var(--accent)]/30',
+      danger: 'bg-[var(--destructive)]/20 text-[var(--destructive)] border border-[var(--destructive)]/30',
+      outline: 'bg-transparent text-[var(--muted-foreground)] border border-[var(--border)] hover:bg-[var(--card-hover)] hover:text-[var(--foreground)]'
     };
     
     const sizes = {