From e056f53b1f97aeec131fd15f9e264109846cfc04 Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Sat, 26 Jul 2025 08:30:07 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Transform=20to=20Deck=20Hearth?=
 =?UTF-8?q?=20Fire-Inspired=20Design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎨 Complete Brand Transformation:
- Rebranded from 'TCG Vault' to 'Deck Hearth'
- Updated logo initials from 'TCG' to 'DH'
- Changed app name throughout the application

🔥 Fire-Themed Color Palette:
Light Theme (Warm Daylight by the Hearth):
- Primary: Warm cream (#fefcf8) like sunlit stone
- Secondary: Soft beige (#f7f3ed) like aged parchment
- Tertiary: Light wood tone (#f0e6d6)
- Text: Dark chocolate brown (#2d1810)
- Accents: Ember orange, flame orange, golden yellow

Dark Theme (Cozy Evening by the Fire):
- Primary: Deep charcoal (#1a0f0a) like burnt wood
- Secondary: Rich dark brown (#2d1b12) like oak
- Tertiary: Medium brown (#3d2317) like mahogany
- Text: Warm white (#fff8f0) like firelight
- Accents: Bright flame, glowing ember, golden glow

🎨 Fire-Inspired Design Elements:
- Flame gradient: Orange to ember red
- Golden gradient: Golden yellow to flame orange
- Fire glow effects with warm shadows
- Wood-toned borders and accents
- Ember and flame-colored interactive elements

🔧 Enhanced Component Styling:
- Updated BulkSelectionToolbar with fire colors
- New CSS classes: btn-flame, btn-ember, btn-gold
- Fire glow and ember glow effects
- Gradient backgrounds: gradient-bg-fire, gradient-bg-golden
- Tailwind color palette: hearth.flame, hearth.ember, etc.

✨ Warm & Inviting Experience:
- Light mode: Cozy daytime fireplace atmosphere
- Dark mode: Intimate evening hearth ambiance
- Maintains accessibility with proper contrast
- Smooth transitions between themes

The app now perfectly captures the warm, inviting feeling of gathering around a hearth! 🔥🏠✨
---
 components/BulkSelectionToolbar.js |  17 +++-
 components/Layout.js               |   8 +-
 components/ShareModal.js           |   2 +-
 styles/globals.css                 | 158 ++++++++++++++++++++---------
 tailwind.config.js                 |  13 +++
 5 files changed, 141 insertions(+), 57 deletions(-)

diff --git a/components/BulkSelectionToolbar.js b/components/BulkSelectionToolbar.js
index e2d47c6..f135307 100644
--- a/components/BulkSelectionToolbar.js
+++ b/components/BulkSelectionToolbar.js
@@ -46,7 +46,7 @@ export default function BulkSelectionToolbar({
       <div className="bg-white rounded-xl shadow-2xl border border-gray-200 px-3 sm:px-6 py-3 sm:py-4 flex items-center justify-between sm:justify-start sm:space-x-4 sm:min-w-96">
         {/* Selection Count */}
         <div className="flex items-center space-x-2">
-          <div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center">
+          <div className="w-8 h-8 rounded-full flex items-center justify-center" style={{ backgroundColor: 'var(--accent-ember)' }}>
             <span className="text-white text-sm font-bold">{selectedCount}</span>
           </div>
           <span className="text-gray-700 font-medium text-sm sm:text-base">
@@ -62,7 +62,10 @@ export default function BulkSelectionToolbar({
         <div className="flex items-center space-x-1 sm:space-x-2">
           <button
             onClick={handleAddToCollection}
-            className="px-2 sm:px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium flex items-center space-x-1 transition-colors"
+            className="px-2 sm:px-3 py-2 text-white rounded-lg text-sm font-medium flex items-center space-x-1 transition-colors"
+            style={{ backgroundColor: 'var(--accent-flame)' }}
+            onMouseEnter={(e) => e.target.style.backgroundColor = 'var(--accent-ember)'}
+            onMouseLeave={(e) => e.target.style.backgroundColor = 'var(--accent-flame)'}
           >
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
@@ -72,7 +75,10 @@ export default function BulkSelectionToolbar({
 
           <button
             onClick={handleAddToDeck}
-            className="px-2 sm:px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium flex items-center space-x-1 transition-colors"
+            className="px-2 sm:px-3 py-2 text-white rounded-lg text-sm font-medium flex items-center space-x-1 transition-colors"
+            style={{ backgroundColor: 'var(--accent-gold)' }}
+            onMouseEnter={(e) => e.target.style.backgroundColor = '#e6830b'}
+            onMouseLeave={(e) => e.target.style.backgroundColor = 'var(--accent-gold)'}
           >
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
@@ -82,7 +88,10 @@ export default function BulkSelectionToolbar({
 
           <button
             onClick={handleMarkAsOwned}
-            className="px-2 sm:px-3 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm font-medium flex items-center space-x-1 transition-colors"
+            className="px-2 sm:px-3 py-2 text-white rounded-lg text-sm font-medium flex items-center space-x-1 transition-colors"
+            style={{ backgroundColor: 'var(--accent-wood)' }}
+            onMouseEnter={(e) => e.target.style.backgroundColor = '#6d4c41'}
+            onMouseLeave={(e) => e.target.style.backgroundColor = 'var(--accent-wood)'}
           >
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
diff --git a/components/Layout.js b/components/Layout.js
index 6266523..a4ef427 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -117,9 +117,9 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
           <div className="lg:hidden flex justify-between items-center mb-4">
             <div className="flex items-center">
               <div className="w-10 h-10 logo-container mr-3">
-                <span className="text-white font-bold text-sm">TCG</span>
+                <span className="text-white font-bold text-sm">DH</span>
               </div>
-              <h1 className="text-xl font-bold" style={{ color: 'var(--text-primary)' }}>TCG Vault</h1>
+              <h1 className="text-xl font-bold" style={{ color: 'var(--text-primary)' }}>Deck Hearth</h1>
             </div>
             <button
               onClick={() => setIsMobileMenuOpen(false)}
@@ -135,9 +135,9 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
           {/* Desktop Header */}
           <div className="hidden lg:flex items-center mb-8">
             <div className="w-10 h-10 logo-container mr-3">
-              <span className="text-white font-bold text-sm">TCG</span>
+              <span className="text-white font-bold text-sm">DH</span>
             </div>
-            <h1 className="text-xl font-bold" style={{ color: 'var(--text-primary)' }}>TCG Vault</h1>
+            <h1 className="text-xl font-bold" style={{ color: 'var(--text-primary)' }}>Deck Hearth</h1>
           </div>
           
           <nav className="space-y-2 flex-1">
diff --git a/components/ShareModal.js b/components/ShareModal.js
index f80373c..3d6c874 100644
--- a/components/ShareModal.js
+++ b/components/ShareModal.js
@@ -113,7 +113,7 @@ export default function ShareModal({
 
   const handleSocialShare = (platform) => {
     const url = window.location.href;
-    const title = `Check out this collection on TCG Vault`;
+    const title = `Check out this collection on Deck Hearth`;
     
     const shareUrls = {
       twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`,
diff --git a/styles/globals.css b/styles/globals.css
index 729159f..a01c0d9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -12,51 +12,53 @@ body {
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-/* Theme Variables */
+/* Theme Variables - Deck Hearth Fire-Inspired */
 :root {
-  /* Light Theme */
-  --bg-primary-light: #ffffff;
-  --bg-secondary-light: #f8fafc;
-  --bg-tertiary-light: #f1f5f9;
-  --text-primary-light: #1e293b;
-  --text-secondary-light: #64748b;
-  --text-accent-light: #3b82f6;
-  --border-light: #e2e8f0;
-  --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  --gradient-primary-light: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-  --gradient-secondary-light: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
-  --accent-blue-light: #06b6d4;
-  --accent-purple-light: #8b5cf6;
-  --accent-pink-light: #ec4899;
-  --input-bg-light: #ffffff;
-  --input-border-light: #e2e8f0;
-  --input-text-light: #1e293b;
-  --input-placeholder-light: #64748b;
+  /* Light Theme - Warm Daylight by the Hearth */
+  --bg-primary-light: #fefcf8;        /* Warm cream, like sunlit stone */
+  --bg-secondary-light: #f7f3ed;      /* Soft beige, like aged parchment */
+  --bg-tertiary-light: #f0e6d6;       /* Light wood tone */
+  --text-primary-light: #2d1810;      /* Dark chocolate brown */
+  --text-secondary-light: #5d4037;    /* Medium brown, like burnt wood */
+  --text-accent-light: #d84315;       /* Ember orange */
+  --border-light: #e8dcc6;            /* Light wood border */
+  --shadow-light: 0 4px 6px -1px rgba(45, 24, 16, 0.1);
+  --gradient-primary-light: linear-gradient(135deg, #ff6f00 0%, #d84315 100%);    /* Fire gradient */
+  --gradient-secondary-light: linear-gradient(135deg, #ffab40 0%, #ff6f00 100%); /* Golden flame */
+  --accent-flame-light: #ff6f00;      /* Bright flame orange */
+  --accent-ember-light: #d84315;      /* Deep ember red */
+  --accent-gold-light: #ffab40;       /* Golden flame */
+  --accent-wood-light: #8d6e63;       /* Rich wood tone */
+  --input-bg-light: #fefcf8;
+  --input-border-light: #e8dcc6;
+  --input-text-light: #2d1810;
+  --input-placeholder-light: #5d4037;
 }
 
 [data-theme="dark"] {
-  /* Dark Theme - Based on the reference image */
-  --bg-primary-dark: #0f0f23;
-  --bg-secondary-dark: #1a1a2e;
-  --bg-tertiary-dark: #16213e;
-  --text-primary-dark: #ffffff;
-  --text-secondary-dark: #a1a1aa;
-  --text-accent-dark: #06b6d4;
-  --border-dark: #2d2d3a;
-  --shadow-dark: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
-  --gradient-primary-dark: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
-  --gradient-secondary-dark: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
-  --accent-blue-dark: #06b6d4;
-  --accent-purple-dark: #8b5cf6;
-  --accent-pink-dark: #ec4899;
-  --input-bg-dark: #1a1a2e;
-  --input-border-dark: #2d2d3a;
-  --input-text-dark: #ffffff;
-  --input-placeholder-dark: #a1a1aa;
-  --search-bg-dark: #1a1a2e;
-  --search-border-dark: #2d2d3a;
-  --search-text-dark: #ffffff;
-  --search-placeholder-dark: #a1a1aa;
+  /* Dark Theme - Cozy Evening by the Fire */
+  --bg-primary-dark: #1a0f0a;         /* Deep charcoal, like burnt wood */
+  --bg-secondary-dark: #2d1b12;       /* Rich dark brown, like oak */
+  --bg-tertiary-dark: #3d2317;        /* Medium brown, like mahogany */
+  --text-primary-dark: #fff8f0;       /* Warm white, like firelight */
+  --text-secondary-dark: #d7c4b0;     /* Soft cream, like candlelight */
+  --text-accent-dark: #ff8a50;        /* Bright flame orange */
+  --border-dark: #4a2f1f;             /* Dark wood border */
+  --shadow-dark: 0 4px 6px -1px rgba(26, 15, 10, 0.4);
+  --gradient-primary-dark: linear-gradient(135deg, #ff8a50 0%, #d84315 100%);    /* Evening fire */
+  --gradient-secondary-dark: linear-gradient(135deg, #ffab40 0%, #ff6f00 100%); /* Golden embers */
+  --accent-flame-dark: #ff8a50;       /* Bright flame */
+  --accent-ember-dark: #d84315;       /* Glowing ember */
+  --accent-gold-dark: #ffab40;        /* Golden glow */
+  --accent-wood-dark: #8d6e63;        /* Warm wood */
+  --input-bg-dark: #2d1b12;
+  --input-border-dark: #4a2f1f;
+  --input-text-dark: #fff8f0;
+  --input-placeholder-dark: #d7c4b0;
+  --search-bg-dark: #2d1b12;
+  --search-border-dark: #4a2f1f;
+  --search-text-dark: #fff8f0;
+  --search-placeholder-dark: #d7c4b0;
 }
 
 /* Apply theme colors */
@@ -82,9 +84,14 @@ body {
   --shadow: var(--shadow-light);
   --gradient-primary: var(--gradient-primary-light);
   --gradient-secondary: var(--gradient-secondary-light);
-  --accent-blue: var(--accent-blue-light);
-  --accent-purple: var(--accent-purple-light);
-  --accent-pink: var(--accent-pink-light);
+  --accent-flame: var(--accent-flame-light);
+  --accent-ember: var(--accent-ember-light);
+  --accent-gold: var(--accent-gold-light);
+  --accent-wood: var(--accent-wood-light);
+  /* Legacy color mappings for compatibility */
+  --accent-blue: var(--accent-flame-light);
+  --accent-purple: var(--accent-ember-light);
+  --accent-pink: var(--accent-gold-light);
   --input-bg: var(--input-bg-light);
   --input-border: var(--input-border-light);
   --input-text: var(--input-text-light);
@@ -103,22 +110,77 @@ body {
   --shadow: var(--shadow-dark);
   --gradient-primary: var(--gradient-primary-dark);
   --gradient-secondary: var(--gradient-secondary-dark);
-  --accent-blue: var(--accent-blue-dark);
-  --accent-purple: var(--accent-purple-dark);
-  --accent-pink: var(--accent-pink-dark);
+  --accent-flame: var(--accent-flame-dark);
+  --accent-ember: var(--accent-ember-dark);
+  --accent-gold: var(--accent-gold-dark);
+  --accent-wood: var(--accent-wood-dark);
+  /* Legacy color mappings for compatibility */
+  --accent-blue: var(--accent-flame-dark);
+  --accent-purple: var(--accent-ember-dark);
+  --accent-pink: var(--accent-gold-dark);
   --input-bg: var(--input-bg-dark);
   --input-border: var(--input-border-dark);
   --input-text: var(--input-text-dark);
   --input-placeholder: var(--input-placeholder-dark);
 }
 
-/* Custom component styles */
+/* Custom component styles - Fire-themed */
 .btn-primary {
   @apply font-bold py-3 px-6 rounded-2xl transition-all duration-300 shadow-lg hover:shadow-xl;
   background: var(--gradient-primary);
   color: white;
 }
 
+.btn-flame {
+  @apply font-bold py-2 px-4 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg;
+  background-color: var(--accent-flame);
+  color: white;
+}
+
+.btn-flame:hover {
+  background-color: var(--accent-ember);
+  transform: translateY(-1px);
+}
+
+.btn-ember {
+  @apply font-bold py-2 px-4 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg;
+  background-color: var(--accent-ember);
+  color: white;
+}
+
+.btn-ember:hover {
+  background: var(--gradient-primary);
+  transform: translateY(-1px);
+}
+
+.btn-gold {
+  @apply font-bold py-2 px-4 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg;
+  background-color: var(--accent-gold);
+  color: white;
+}
+
+.btn-gold:hover {
+  background: var(--gradient-secondary);
+  transform: translateY(-1px);
+}
+
+.gradient-bg-fire {
+  background: var(--gradient-primary);
+}
+
+.gradient-bg-golden {
+  background: var(--gradient-secondary);
+}
+
+/* Fire glow effects */
+.fire-glow {
+  box-shadow: 0 0 20px rgba(255, 111, 0, 0.3);
+}
+
+.ember-glow {
+  box-shadow: 0 0 15px rgba(216, 67, 21, 0.4);
+}
+
 .btn-secondary {
   @apply font-bold py-3 px-6 rounded-2xl transition-all duration-300 shadow-lg hover:shadow-xl;
   background: var(--gradient-secondary);
diff --git a/tailwind.config.js b/tailwind.config.js
index 128c279..acca36c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,19 @@ export default {
       screens: {
         'xs': '475px',
       },
+      colors: {
+        hearth: {
+          flame: '#ff6f00',
+          ember: '#d84315', 
+          gold: '#ffab40',
+          wood: '#8d6e63',
+          cream: '#fefcf8',
+          parchment: '#f7f3ed',
+          charcoal: '#1a0f0a',
+          oak: '#2d1b12',
+          mahogany: '#3d2317',
+        }
+      },
     },
   },
   plugins: [],