Implement Consistent Light Theme Color Scheme & Add Dark Mode Support


### Problem Description:
After configuring Tailwind CSS (as resolved in #1), the application's color scheme still does not reflect the intended design system. Additionally, there is no support for dark mode.

### Objectives:

1. Fix the existing light theme to match the design system’s specified color palette.
2. Implement a dark mode theme with seamless user/system preference toggling.

### Steps to Reproduce (Light Theme Issue):

1. Review Tailwind configuration from #1.
2. View the application interface (see attached screenshot).
3. Observe that default Tailwind colors are applied instead of the project’s design system.

Expected Behavior:

1. Light theme uses approved brand colors (consult design documentation).
2. Dark theme automatically activates based on system preferences or allows manual toggling via UI control.

Implementation Requirements:

1. Color Scheme Fixes (Light Mode):
- Audit and update tailwind.config.js to ensure theme colors match the design system.
- Replace inline color hex codes with Tailwind theme variables (e.g., bg-primary, text-brand-500).
- Verify contrast ratios for accessibility (WCAG AA/AAA compliance).

2. Dark Mode Implementation:
- Enable dark mode in tailwind.config.js using darkMode: 'class' or darkMode: 'media'.
- Define dark theme palette in the Tailwind configuration.
- Apply dark mode variants to components (e.g., dark:bg-gray-900).
- Add a persistent UI toggle (e.g., switch/button) to override system preferences.

Acceptance Criteria:

- [ ] Light theme colors match design specifications across all components.
- [ ] Dark mode activates automatically via prefers-color-scheme and manually via toggle.
- [ ] Color transitions are smooth (consider transition-colors utility).
- [ ] Tested across major browsers and mobile viewports.

Priority: High (affects UX consistency and accessibility)