From c49bc43e44a0270ef68cf3fb9af53a1d6d298112 Mon Sep 17 00:00:00 2001
From: shravanithouta108 <shravanithouta108@gmail.com>
Date: Tue, 16 Jun 2026 17:43:11 +0530
Subject: [PATCH] feat: map CSS variable tokens to Tailwind color classes for
 theme switching

---
 frontend/src/index.css      | 16 ++++++++++++++++
 frontend/tailwind.config.js | 10 ++++++++++
 2 files changed, 26 insertions(+)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 31549e3b4..a74e62f3c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -3855,3 +3855,19 @@ button,
     white-space: nowrap;
   }
 }
+
+/* ============================================
+   Light Theme Overrides
+   ============================================ */
+.theme-light {
+  --bg-primary: #f8f9fa;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #f1f3f5;
+  --bg-elevated: #e9ecef;
+  --accent-silver: #6c757d;
+  --accent-silver-dim: #adb5bd;
+  --accent-silver-bright: #212529;
+  --text-primary: #212529;
+  --text-secondary: #495057;
+  --text-muted: #6c757d;
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 3b803a0d2..b5fe353cd 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class',
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
@@ -7,6 +8,15 @@ export default {
   theme: {
     extend: {
       colors: {
+        'primary': 'var(--bg-primary)',
+        'secondary': 'var(--bg-secondary)',
+        'bg-primary': 'var(--bg-primary)',
+        'bg-secondary': 'var(--bg-secondary)',
+        'bg-tertiary': 'var(--bg-tertiary)',
+        'bg-elevated': 'var(--bg-elevated)',
+        'primary-text': 'var(--text-primary)',
+        'secondary-text': 'var(--text-secondary)',
+        'muted': 'var(--text-muted)',
         'charcoal-dark': '#0a0a0c',
         charcoal: {
           light: '#1d1d21',