[Feature-TailwindCSS-Color-Palette]: Create a color palette

[Castro19]

💡 User Story

As a developer, I want to define a semantic color palette so that the app’s styling is easier to maintain and supports theming (light/dark) consistently.

📖 Description

The current app uses Tailwind default colors directly (e.g., bg-gray-900, text-white), which makes theme switching difficult and leads to inconsistent styling.

We will define a semantic color system using Tailwind’s custom CSS variables, mapping them to UI roles like --background, --text, --card, etc. These will be defined in tailwind.config.js and injected into the app using :root and .dark classes.

This sets the foundation for full light/dark theming, consistent spacing, and design tokens going forward.

✅ Acceptance Criteria

• ✅ Define a semantic color system in tailwind.config.js using extend.colors
• ✅ Replace hardcoded color utility classes (bg-gray-900, text-white, etc.) with semantic equivalents (bg-background, text-foreground, etc.)
• ✅ Inject light mode values into :root
• ✅ Inject dark mode overrides into .dark
• ✅ Document how to use the new color system in the codebase

📌 Technical Details

1. In tailwind.config.js, extend colors to include:

   colors: {
     background: "hsl(var(--background))",
     foreground: "hsl(var(--foreground))",
     card: "hsl(var(--card))",
     primary: "hsl(var(--primary))",
     border: "hsl(var(--border))",
     muted: "hsl(var(--muted))",
   }

2. In addVariablesForColors, add semantic tokens to :root and .dark:

   addBase({
     ":root": {
       "--background": "255 255 255",         // light bg
       "--foreground": "17 24 39",            // light text
       "--card": "240 240 240",
       "--primary": "34 197 94",              // green-500
       "--border": "220 220 220",
       "--muted": "120 120 120",
     },
     ".dark": {
       "--background": "15 23 42",            // dark bg (slate-900)
       "--foreground": "255 255 255",
       "--card": "30 41 59",                  // slate-800
       "--primary": "34 197 94",
       "--border": "55 65 81",
       "--muted": "148 163 184",
     },
   });

3. Update existing components gradually:

   • Replace bg-slate-900 → bg-background
   • Replace text-white → text-foreground
   • Replace bg-gray-800 → bg-card, etc.

4. Document usage in README or a dev notes file.

🖼️ UI/UX Mockups (If applicable)

N/A – design token foundation only.

📎 Related Issues or Dependencies

• Required for light/dark mode toggle ticket [Light Mode Toggle]: Create a Light Mode Toggle #237

🚀 Priority & Story Points

• Priority: Medium
• Story Points: 5