[Synthetics] Update cards colors !! (elastic#207200)

## Summary

Update cards colors !!

### After
<img width="1725" alt="image"
src="https://github.com/user-attachments/assets/cea66812-a96d-4bc6-b013-c4ee84813eae"
/>

### Before
<img width="1728" alt="image"
src="https://github.com/user-attachments/assets/1dc6c077-d6df-4f8a-8f23-6783e39c5739"
/>

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx

@@ -37,19 +37,27 @@ const METRIC_ITEM_HEIGHT = 160;
 
 export const getColor = (euiTheme: EuiThemeComputed, isEnabled: boolean, status?: string) => {
   if (!isEnabled) {
-    return euiTheme.colors.lightestShade;
+    return euiTheme.colors.backgroundBaseDisabled;
   }
   const isAmsterdam = euiTheme.flags.hasVisColorAdjustment;
 
+  // make sure these are synced with slo card colors while making changes
+
   switch (status) {
     case 'down':
-      return isAmsterdam ? euiTheme.colors.vis.euiColorVisBehindText9 : euiTheme.colors.danger;
+      return isAmsterdam
+        ? euiTheme.colors.vis.euiColorVisBehindText9
+        : euiTheme.colors.backgroundBaseDanger;
     case 'up':
-      return isAmsterdam ? euiTheme.colors.vis.euiColorVisBehindText0 : euiTheme.colors.success;
+      return isAmsterdam
+        ? euiTheme.colors.vis.euiColorVisBehindText0
+        : euiTheme.colors.backgroundBaseSuccess;
     case 'unknown':
-      return euiTheme.colors.ghost;
+      return euiTheme.colors.backgroundBasePlain;
     default:
-      return isAmsterdam ? euiTheme.colors.vis.euiColorVisBehindText0 : euiTheme.colors.success;
+      return isAmsterdam
+        ? euiTheme.colors.vis.euiColorVisBehindText0
+        : euiTheme.colors.backgroundBaseSuccess;
   }
 };