feat: Implement dark mode support across components and UI elements

- Added dark mode styles to TaskStatusDropdown, TaskStatusDropdownDebug, and TaskStatusDropdownSimple components.
- Introduced ThemeProvider and useTheme hook for managing theme state.
- Updated Button, Card, Input, Loading, Navigation, PageContainer, PageHeader, ProjectCalendarWidget, ProjectMap, SearchBar, States, Tooltip, and other UI components to support dark mode.
- Created ThemeToggle component for switching between light and dark modes.
- Enhanced i18n translations for settings related to theme and language preferences.
- Configured Tailwind CSS to support dark mode with class-based toggling.

tailwind.config.mjs

@@ -5,11 +5,63 @@ export default {
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {
+        // Base colors using CSS variables
         background: "var(--background)",
         foreground: "var(--foreground)",
+
+        // Surface colors
+        surface: {
+          primary: "var(--surface-primary)",
+          secondary: "var(--surface-secondary)",
+          tertiary: "var(--surface-tertiary)",
+          modal: "var(--surface-modal)",
+          card: "var(--surface-card)",
+          hover: "var(--surface-hover)",
+          active: "var(--surface-active)",
+        },
+
+        // Text colors
+        text: {
+          primary: "var(--text-primary)",
+          secondary: "var(--text-secondary)",
+          tertiary: "var(--text-tertiary)",
+          inverse: "var(--text-inverse)",
+          muted: "var(--text-muted)",
+        },
+
+        // Border colors
+        border: {
+          default: "var(--border-default)",
+          hover: "var(--border-hover)",
+          focus: "var(--border-focus)",
+          divider: "var(--border-divider)",
+        },
+
+        // Interactive colors
+        interactive: {
+          primary: "var(--interactive-primary)",
+          "primary-hover": "var(--interactive-primary-hover)",
+          secondary: "var(--interactive-secondary)",
+          "secondary-hover": "var(--interactive-secondary-hover)",
+          danger: "var(--interactive-danger)",
+          "danger-hover": "var(--interactive-danger-hover)",
+        },
+
+        // Status colors
+        status: {
+          success: "var(--status-success)",
+          warning: "var(--status-warning)",
+          error: "var(--status-error)",
+          info: "var(--status-info)",
+        },
+      },
+      boxShadow: {
+        'custom': 'var(--shadow-default)',
+        'custom-hover': 'var(--shadow-hover)',
       },
     },
   },