feat: apply theme colors to all pages and modals - implement light/dark theme CSS variables across UI components

frontend/tailwind.config.ts

@@ -7,7 +7,58 @@ const config: Config = {
     './src/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        // Light Theme Colors ("Classic Heritage & Soft Sand")
+        yotripLight: {
+          bg: '#f6f0ed',        // Parchment - Global Page Backgrounds
+          text: '#28536b',      // Yale Blue - Primary Text & Main Titles
+          steel: '#7ea8be',     // Steel Blue - Active Navigation & Secondary Actions
+          khaki: '#bbb193',     // Khaki Beige - Borders, Dividers, Muted States
+          rosy: '#c2948a',      // Rosy Taupe - Special Highlight Badges, Notifications
+        },
+        // Dark Theme Colors ("Vintage Velvet & Aquatic Zest")
+        yotripDark: {
+          bg: '#513b56',        // Vintage Grape - Global Page Backgrounds
+          surface: '#525174',   // Dusty Grape - Component Surfaces (Cards, Bubbles)
+          lime: '#bce784',      // Lime Cream - Brand Text Highlights, Active Icons
+          bondi: '#348aa7',     // Bondi Blue - Primary Action Buttons, Links
+          emerald: '#5dd39e',   // Emerald - Success Utilities & "Tối ưu" badges
+        },
+        // CSS Variable based colors for smooth theme support
+        theme: {
+          bg: 'var(--background)',
+          'bg-alt': 'var(--background-alt)',
+          surface: 'var(--surface)',
+          'surface-muted': 'var(--surface-muted)',
+          'surface-hover': 'var(--surface-hover)',
+          border: 'var(--border)',
+          'border-light': 'var(--border-light)',
+          'text': 'var(--text-primary)',
+          'text-secondary': 'var(--text-secondary)',
+          'text-accent': 'var(--text-accent)',
+          'text-muted': 'var(--text-muted)',
+          'text-disabled': 'var(--text-disabled)',
+          primary: 'var(--primary)',
+          'primary-hover': 'var(--primary-hover)',
+          'primary-light': 'var(--primary-light)',
+          secondary: 'var(--secondary)',
+          'secondary-light': 'var(--secondary-light)',
+          success: 'var(--success)',
+          'success-light': 'var(--success-light)',
+          danger: 'var(--danger)',
+          'danger-light': 'var(--danger-light)',
+          warning: 'var(--warning)',
+          'warning-light': 'var(--warning-light)',
+          info: 'var(--info)',
+          'info-light': 'var(--info-light)',
+        }
+      },
+      boxShadow: {
+        'theme-sm': 'var(--shadow-sm)',
+        'theme-md': 'var(--shadow-md)',
+      }
+    },
   },
   plugins: [],
 };