Fix color scheme - use white/gray instead of pink tints

- Changed all gradients from #fef2f2 (pinkish) to proper white/gray
- Updated background from pink tint to clean white (#ffffff) to light gray (#f8f9fa)
- Fixed glass-monaco-soft to use very subtle red tint (3% opacity)
- Updated all components to follow Monaco brand colors properly
- Maintains Monaco red (#dc2626) for accents and text gradients only

🤖 Generated with Claude Code

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

assets/scss/_design-tokens.scss

@@ -5,15 +5,15 @@
 // Color Palette
 // ============================================
 :root {
-  // Primary Colors - Subtle, professional tones
+  // Primary Colors - Monaco branding
   --color-primary: #dc2626;  // Monaco red for branding
-  --color-primary-light: #fef2f2;  // Very light red for backgrounds
+  --color-primary-light: #fef2f2;  // Very light red for accents only
-  --color-primary-soft: rgba(220, 38, 38, 0.1);  // Soft red for hover states
+  --color-primary-soft: rgba(220, 38, 38, 0.05);  // Very soft red for hover states
   
-  // Background Colors
+  // Background Colors - Clean white/gray
   --color-bg-primary: #ffffff;
   --color-bg-secondary: #f8f9fa;
-  --color-bg-gradient: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+  --color-bg-gradient: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);  // White to light gray
   
   // Glass Effects - Subtle transparency
   --color-glass-white: rgba(255, 255, 255, 0.6);

assets/scss/glass-bolt-style.scss

@@ -40,13 +40,13 @@
   -webkit-backdrop-filter: blur(2px) !important;
 }
 
-// Glass Monaco soft colors
+// Glass Monaco soft colors - very subtle
 .bg-glass-monaco-soft,
 .glass-monaco-soft {
-  background: rgba(254, 242, 242, 0.6) !important;
+  background: rgba(220, 38, 38, 0.03) !important;  // Very subtle red tint
   
   &:hover {
-    background: rgba(254, 242, 242, 0.8) !important;
+    background: rgba(220, 38, 38, 0.05) !important;  // Slightly more on hover
   }
 }
 
@@ -88,12 +88,11 @@
 // GRADIENT OVERRIDES - Subtle Bolt.ai Style
 // ============================================
 
-// Hero gradients
+// Hero gradients - Clean white/gray
 .hero-gradient,
 .bg-gradient-monaco,
-.gradient-monaco,
+.gradient-monaco {
-.text-gradient-monaco {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;  // White to light gray
-  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%) !important;
 }
 
 // Monaco gradient for text

components/ui/GlassCard.vue

@@ -117,7 +117,7 @@ const animationConfig = {
   }
   
   &--gradient {
-    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
     border: 1px solid rgba(0, 0, 0, 0.05);
     color: #27272a;
   }

components/ui/MonacoButton.vue

@@ -165,13 +165,13 @@ defineEmits<{
   }
   
   &--gradient {
-    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
     color: #dc2626;
     border: 1px solid rgba(220, 38, 38, 0.1);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     
     &:hover:not(:disabled) {
-      background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
+      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
       transform: translateY(-2px);
     }

pages/board/dashboard/glass.vue

@@ -247,7 +247,7 @@ const visibleDuesMembers = ref([
 /* Base Styles */
 .glass-dashboard {
   min-height: 100vh;
-  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
 }
 
 /* Hero Header */
@@ -260,7 +260,7 @@ const visibleDuesMembers = ref([
 .hero-gradient {
   position: absolute;
   inset: 0;
-  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
 }
 
 .hero-overlay {
@@ -362,7 +362,7 @@ const visibleDuesMembers = ref([
 .avatar {
   width: 80px;
   height: 80px;
-  background: linear-gradient(135deg, #fff, #fef2f2);
+  background: linear-gradient(135deg, #ffffff, #f8f9fa);
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -637,7 +637,7 @@ const visibleDuesMembers = ref([
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
   border: 1px solid rgba(220, 38, 38, 0.1);
   border-radius: 0.75rem;
 }