style: implement dark gradient metric cards with high contrast white text and colored labels

apps/mobile/src/components/PerformanceMetrics.tsx

@@ -16,31 +16,35 @@ interface MetricProps {
 const getColorScheme = (colorScheme: 'blue' | 'green' | 'purple' | 'orange') => {
   const schemes = {
     blue: {
-      colors: ['#3b82f6', '#06b6d4'],
+      colors: ['#1e3a8a', '#0c4a6e'],
       text: '#ffffff',
-      badge: '#dbeafe',
-      badgeText: '#1e40af',
+      label: '#93c5fd',
+      badge: '#3b82f6',
+      badgeText: '#ffffff',
       icon: '#60a5fa',
     },
     green: {
-      colors: ['#10b981', '#14b8a6'],
+      colors: ['#064e3b', '#047857'],
       text: '#ffffff',
-      badge: '#dcfce7',
-      badgeText: '#047857',
+      label: '#86efac',
+      badge: '#10b981',
+      badgeText: '#ffffff',
       icon: '#34d399',
     },
     purple: {
-      colors: ['#a855f7', '#3b82f6'],
+      colors: ['#581c87', '#7c3aed'],
       text: '#ffffff',
-      badge: '#e9d5ff',
-      badgeText: '#6b21a8',
+      label: '#d8b4fe',
+      badge: '#a855f7',
+      badgeText: '#ffffff',
       icon: '#c084fc',
     },
     orange: {
-      colors: ['#f97316', '#ef4444'],
+      colors: ['#92400e', '#b45309'],
       text: '#ffffff',
-      badge: '#fed7aa',
-      badgeText: '#92400e',
+      label: '#fcd34d',
+      badge: '#f97316',
+      badgeText: '#ffffff',
       icon: '#fb923c',
     },
   };
@@ -61,7 +65,7 @@ const MetricCard: React.FC<MetricProps> = ({ title, value, change, trend, icon,
     >
       <View style={styles.cardContent}>
         <View style={styles.header}>
-          <Text style={[styles.label, { color: colors.text }]}>{title}</Text>
+          <Text style={[styles.label, { color: colors.label }]}>{title}</Text>
           <View style={[styles.iconContainer, { backgroundColor: colors.icon + '40' }]}>
             <Ionicons name={icon as any} size={20} color={colors.text} />
           </View>