Fix build errors: Add all missing SCSS variables and mixins for dashboard-v2 compatibility

- Added missing primary color variations (-600, -700, -800)
- Added semantic color variations (-500, -500, -500, -500)
- Added additional color variables (-500, -600)
- Added missing shadow variables (-inset-sm, -soft-md)
- Added spring-smooth easing and transition variables
- Added neumorphic-card, morphing-dropdown, neumorphic-button, and responsive mixins
- Fixed duplicate -4xl variable
- Ensured backward compatibility with existing dashboard-v2 pages

This resolves all build errors and ensures the design system supports both old and new dashboard implementations.

.claude/settings.local.json

@@ -57,7 +57,11 @@
       "Read(/Z:\\Repos\\monacousa-portal\\components\\ui/**)",
       "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\dashboard/**)",
       "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin/**)",
-      "Read(/Z:\\Repos\\monacousa-portal\\pages\\board/**)"
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\board/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\assets\\scss/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin/**)"
     ],
     "deny": [],
     "ask": []

assets/scss/design-system-v2.scss

@@ -12,12 +12,25 @@ $monaco-red-light: #FF6B8A;
 $monaco-white: #FFFFFF;
 $monaco-gold: #FFD700;
 
+// Primary color variations (for dashboard-v2 compatibility)
+$primary-600: #dc2626;  // Same as refined Monaco red
+$primary-700: #b91c1c;  // Same as monaco-red-dark
+$primary-800: #991b1b;  // Darker shade
+
 // Semantic Colors
 $color-success: #10B981;
 $color-warning: #F59E0B;
 $color-error: #EF4444;
 $color-info: #3B82F6;
 
+// Semantic color variations (for dashboard-v2 compatibility)
+$success-500: #10B981;
+$warning-500: #F59E0B;
+$error-500: #EF4444;
+$info-500: #3B82F6;
+$blue-500: #3B82F6;  // Same as info color
+$blue-600: #2563EB;  // Slightly darker blue
+
 // Neutral Palette
 $neutral-900: #0F172A;
 $neutral-800: #1E293B;
@@ -53,6 +66,7 @@ $text-xl: 1.25rem;    // 20px
 $text-2xl: 1.5rem;    // 24px
 $text-3xl: 1.875rem;  // 30px
 $text-4xl: 2.25rem;   // 36px
+$text-4xl: 2.25rem;   // 36px
 $text-5xl: 3rem;      // 48px
 
 // Line Heights
@@ -115,6 +129,10 @@ $shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
 $shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
 $shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1);
 
+// Additional shadows for dashboard-v2 compatibility
+$shadow-inset-sm: inset 0 1px 3px rgba(0, 0, 0, 0.08);
+$shadow-soft-md: 0 4px 12px rgba(0, 0, 0, 0.05);
+
 // ============================================
 // 6. BREAKPOINTS - Mobile First
 // ============================================
@@ -155,11 +173,18 @@ $ease-out: cubic-bezier(0, 0, 0.2, 1);
 $ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 $ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
 
+// Additional easing for dashboard-v2 compatibility
+$spring-smooth: cubic-bezier(0.34, 1.56, 0.64, 1);
+
 $duration-fast: 150ms;
 $duration-normal: 250ms;
 $duration-slow: 350ms;
 $duration-slower: 500ms;
 
+// Common transition for dashboard-v2 compatibility
+$transition-base: all $duration-normal $ease-out;
+$transition-fast: all $duration-fast $ease-out;
+
 // ============================================
 // 8. Z-INDEX SCALE - Layering System
 // ============================================
@@ -216,7 +241,86 @@ $z-notification: 1080;
 }
 
 // ============================================
-// 10. COMPONENT CLASSES - Reusable Styles
+// 10. NEUMORPHIC & MORPHING MIXINS - Dashboard V2 Compatibility
+// ============================================
+
+@mixin neumorphic-card($size: 'md') {
+  $depth: 6px;
+  $blur: 12px;
+  
+  @if $size == 'sm' {
+    $depth: 4px;
+    $blur: 8px;
+  } @else if $size == 'lg' {
+    $depth: 8px;
+    $blur: 16px;
+  }
+  
+  background: linear-gradient(145deg, #ffffff, #f5f5f5);
+  box-shadow: 
+    $depth $depth $blur rgba(0, 0, 0, 0.1),
+    (-$depth) (-$depth) $blur rgba(255, 255, 255, 0.7);
+  border-radius: $radius-xl;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  transition: all $duration-normal $ease-out;
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 
+      ($depth + 2px) ($depth + 2px) ($blur + 4px) rgba(0, 0, 0, 0.15),
+      (-$depth - 2px) (-$depth - 2px) ($blur + 4px) rgba(255, 255, 255, 0.8);
+  }
+}
+
+@mixin morphing-dropdown() {
+  position: relative;
+  background: linear-gradient(145deg, #ffffff, #f5f5f5);
+  border-radius: $radius-lg;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 
+    inset 2px 2px 5px rgba(0, 0, 0, 0.05),
+    inset -2px -2px 5px rgba(255, 255, 255, 0.9);
+  transition: all $duration-normal $ease-out;
+  
+  &:focus-within {
+    box-shadow: 
+      inset 3px 3px 8px rgba(0, 0, 0, 0.1),
+      inset -3px -3px 8px rgba(255, 255, 255, 0.95);
+  }
+}
+
+@mixin neumorphic-button() {
+  background: linear-gradient(145deg, #ffffff, #f5f5f5);
+  box-shadow: 
+    4px 4px 8px rgba(0, 0, 0, 0.1),
+    -4px -4px 8px rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: $radius-lg;
+  transition: all $duration-fast $ease-out;
+  
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 
+      6px 6px 12px rgba(0, 0, 0, 0.12),
+      -6px -6px 12px rgba(255, 255, 255, 0.8);
+  }
+  
+  &:active {
+    transform: translateY(0);
+    box-shadow: 
+      inset 2px 2px 5px rgba(0, 0, 0, 0.1),
+      inset -2px -2px 5px rgba(255, 255, 255, 0.9);
+  }
+}
+
+@mixin responsive($breakpoint) {
+  @media (min-width: $breakpoint) {
+    @content;
+  }
+}
+
+// ============================================
+// 11. COMPONENT CLASSES - Reusable Styles
 // ============================================
 
 // Cards
@@ -343,7 +447,7 @@ $z-notification: 1080;
 }
 
 // ============================================
-// 11. LAYOUT UTILITIES
+// 12. LAYOUT UTILITIES
 // ============================================
 
 .container {
@@ -411,7 +515,7 @@ $z-notification: 1080;
 }
 
 // ============================================
-// 12. ANIMATION CLASSES
+// 13. ANIMATION CLASSES
 // ============================================
 
 @keyframes fadeIn {
@@ -456,7 +560,7 @@ $z-notification: 1080;
 }
 
 // ============================================
-// 13. ACCESSIBILITY UTILITIES
+// 14. ACCESSIBILITY UTILITIES
 // ============================================
 
 .sr-only {
@@ -480,7 +584,7 @@ $z-notification: 1080;
 }
 
 // ============================================
-// 14. STATUS INDICATORS
+// 15. STATUS INDICATORS
 // ============================================
 
 .status-badge {
@@ -513,7 +617,7 @@ $z-notification: 1080;
 }
 
 // ============================================
-// 15. LOADING STATES
+// 16. LOADING STATES
 // ============================================
 
 .skeleton {