🎨 Fix Card Detail Page Light Theme Issues

🐛 Theme Problems Fixed:
- Added proper background styling to ensure theme colors are applied
- Added missing gradient-text classes (gold, flame, ember) for fire theme
- Wrapped entire page in themed background container
- Ensured content tabs section uses theme colors

✨ Improvements:
- Added gradient-text-gold for price displays
- Added gradient-text-flame and gradient-text-ember for consistency
- Proper min-height to cover full viewport
- Background colors now properly inherit theme variables

🎯 Light Theme Fix:
- Text should now be properly dark in light mode
- Backgrounds use theme variables instead of defaults
- All sections properly themed for both light and dark modes

The card detail page should now be fully legible in light theme! 🌞

pages/card/[id].js

@@ -333,7 +333,8 @@ export default function CardDetail() {
 
   return (
     <Layout user={user}>
-      {/* Hero Section with Card Image and Basic Info */}
+      <div style={{ backgroundColor: 'var(--bg-primary)', minHeight: '100vh' }}>
+        {/* Hero Section with Card Image and Basic Info */}
       <div 
         className="relative min-h-96 flex items-center justify-center overflow-hidden"
         style={{
@@ -487,7 +488,10 @@ export default function CardDetail() {
       </div>
 
       {/* Content Tabs */}
-      <div className="container mx-auto px-6 py-8">
+      <div 
+        className="container mx-auto px-6 py-8"
+        style={{ backgroundColor: 'var(--bg-primary)', color: 'var(--text-primary)' }}
+      >
         <div className="flex border-b" style={{ borderColor: 'var(--border)' }}>
           {['details', 'price-history', 'purchase'].map((tab) => (
             <button
@@ -828,6 +832,7 @@ export default function CardDetail() {
           </div>
         </div>
       )}
+      </div>
     </Layout>
   );
 } 

styles/globals.css

@@ -283,6 +283,27 @@ body {
   background-clip: text;
 }
 
+.gradient-text-gold {
+  background: linear-gradient(135deg, #ffab40 0%, #ff6f00 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.gradient-text-flame {
+  background: linear-gradient(135deg, #ff6f00 0%, #d84315 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.gradient-text-ember {
+  background: linear-gradient(135deg, #d84315 0%, #bf360c 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
 /* Theme toggle button */
 .theme-toggle {
   @apply p-2 rounded-2xl transition-all duration-300;