feat: Add theme system with 7 themes including Otaku and Pink Pink

- Implement ThemeContext with CSS variables for dynamic theming
- Add theme presets: Cyberpunk, Windows Classic, Dark Modern, Matrix, Industrial, Otaku Mode, Pink Pink
- Add theme selector UI in Footer with color preview
- Theme persists to localStorage
- Each theme has unique background effects, colors, and styling
- Otaku Mode: anime-style dark purple with pink/purple glow and star effects
- Pink Pink: cute pastel pink with heart pattern overlay

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

FrontEnd/tailwind.config.js

@@ -8,14 +8,15 @@ export default {
     extend: {
       fontFamily: {
         sans: ['Inter', 'sans-serif'],
-        mono: ['Rajdhani', 'monospace'], 
+        mono: ['Rajdhani', 'monospace'],
         tech: ['Rajdhani', 'sans-serif'],
+        classic: ['Segoe UI', 'Tahoma', 'sans-serif'],
       },
       colors: {
         slate: {
-          850: '#1e293b', 
-          900: '#0f172a', 
-          950: '#020617', 
+          850: '#1e293b',
+          900: '#0f172a',
+          950: '#020617',
         },
         neon: {
           blue: '#00f3ff',
@@ -23,6 +24,21 @@ export default {
           pink: '#ff0099',
           green: '#0aff00',
           yellow: '#ffe600',
+        },
+        // Theme-aware colors using CSS variables
+        theme: {
+          primary: 'var(--color-primary)',
+          secondary: 'var(--color-secondary)',
+          accent: 'var(--color-accent)',
+          success: 'var(--color-success)',
+          error: 'var(--color-error)',
+          warning: 'var(--color-warning)',
+          'bg-primary': 'var(--color-bg-primary)',
+          'bg-secondary': 'var(--color-bg-secondary)',
+          'bg-tertiary': 'var(--color-bg-tertiary)',
+          'text-primary': 'var(--color-text-primary)',
+          'text-secondary': 'var(--color-text-secondary)',
+          border: 'var(--color-border)',
         }
       },
       boxShadow: {
@@ -30,6 +46,7 @@ export default {
         'glow-purple': '0 0 20px rgba(188, 19, 254, 0.4), inset 0 0 10px rgba(188, 19, 254, 0.1)',
         'glow-red': '0 0 30px rgba(255, 0, 0, 0.5)',
         'hologram': '0 0 15px rgba(6, 182, 212, 0.15), inset 0 0 20px rgba(6, 182, 212, 0.05)',
+        'glow-primary': '0 0 20px rgba(var(--color-primary-rgb), 0.3), inset 0 0 10px rgba(var(--color-primary-rgb), 0.1)',
       },
       animation: {
         'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
@@ -41,8 +58,8 @@ export default {
       },
       keyframes: {
         glow: {
-          '0%': { boxShadow: '0 0 5px rgba(0, 243, 255, 0.2)' },
-          '100%': { boxShadow: '0 0 20px rgba(0, 243, 255, 0.6), 0 0 10px rgba(0, 243, 255, 0.4)' },
+          '0%': { boxShadow: '0 0 5px rgba(var(--color-primary-rgb), 0.2)' },
+          '100%': { boxShadow: '0 0 20px rgba(var(--color-primary-rgb), 0.6), 0 0 10px rgba(var(--color-primary-rgb), 0.4)' },
         },
         gradient: {
           '0%': { backgroundPosition: '0% 50%' },
@@ -57,8 +74,11 @@ export default {
           '0%': { opacity: '0', transform: 'scale(0.95)' },
           '100%': { opacity: '1', transform: 'scale(1)' },
         }
+      },
+      borderRadius: {
+        'theme': 'var(--border-radius)',
       }
     }
   },
   plugins: [],
-}
+}