tune down design

app/globals.css

···
   --sidebar-accent-foreground: oklch(0.37 0.03 259.73);
   --sidebar-border: oklch(0.91 0.05 306.07);
   --sidebar-ring: oklch(0.71 0.16 293.40);
+  
+  /* Custom neutral card colors to reduce purple overuse */
+  --card-neutral: oklch(0.98 0.01 0);
+  --card-neutral-foreground: oklch(0.37 0.03 259.73);
+  --card-subtle: oklch(0.96 0.02 0);
+  --card-accent: oklch(0.94 0.02 0);
+
+  /* Brand-tinted background veils (light) */
+  --bg-accent-1: oklch(0.71 0.16 293.40 / 0.06);
+  --bg-accent-2: oklch(0.71 0.16 293.40 / 0.04);
 
   --font-sans: Open Sans, sans-serif;
   --font-serif: Source Serif 4, serif;
···
 }
 
 .dark {
-  --background: oklch(0.18 0.02 300.00);
-  --foreground: oklch(0.93 0.03 273.66);
-  --card: oklch(0.28 0.03 307.25);
-  --card-foreground: oklch(0.93 0.03 273.66);
-  --popover: oklch(0.28 0.03 307.25);
-  --popover-foreground: oklch(0.93 0.03 273.66);
+  /* Softer dark neutrals to avoid harsh black and blue undertones */
+  --background: oklch(0.21 0.01 260);
+  --foreground: oklch(0.92 0.02 260);
+  --card: oklch(0.24 0.01 260);
+  --card-foreground: oklch(0.92 0.02 260);
+  --popover: oklch(0.24 0.01 260);
+  --popover-foreground: oklch(0.92 0.02 260);
   --primary: oklch(0.79 0.12 295.97);
   --primary-foreground: oklch(0.15 0.01 295.97);
   --secondary: oklch(0.34 0.04 309.13);
   --secondary-foreground: oklch(0.87 0.01 261.81);
-  --muted: oklch(0.28 0.03 307.25);
-  --muted-foreground: oklch(0.71 0.02 261.33);
-  --accent: oklch(0.39 0.05 304.68);
-  --accent-foreground: oklch(0.87 0.01 261.81);
+  --muted: oklch(0.26 0.01 260);
+  --muted-foreground: oklch(0.72 0.02 260);
+  --accent: oklch(0.30 0.01 260);
+  --accent-foreground: oklch(0.90 0.02 260);
   --destructive: oklch(0.81 0.10 19.47);
-  --border: oklch(0.34 0.04 309.13);
-  --input: oklch(0.34 0.04 309.13);
+  --border: oklch(0.32 0.01 260);
+  --input: oklch(0.32 0.01 260);
   --ring: oklch(0.79 0.12 295.97);
   --chart-1: oklch(0.75 0.15 258.89);
   --chart-2: oklch(0.69 0.17 26.11);
   --chart-3: oklch(0.79 0.12 295.97);
   --chart-4: oklch(0.72 0.16 162.48);
   --chart-5: oklch(0.49 0.24 292.70);
-  --sidebar: oklch(0.34 0.04 309.13);
+  --sidebar: oklch(0.31 0.03 295.97);
   --sidebar-foreground: oklch(0.93 0.03 273.66);
   --sidebar-primary: oklch(0.79 0.12 295.97);
   --sidebar-primary-foreground: oklch(0.22 0.01 52.96);
···
   --sidebar-accent-foreground: oklch(0.87 0.01 261.81);
   --sidebar-border: oklch(0.34 0.04 309.13);
   --sidebar-ring: oklch(0.79 0.12 295.97);
+
+  /* Custom neutral card colors to reduce purple overuse */
+  --card-neutral: oklch(0.22 0.02 0);
+  --card-neutral-foreground: oklch(0.93 0.03 273.66);
+  --card-subtle: oklch(0.18 0.01 0);
+  --card-accent: oklch(0.26 0.02 0);
+  
+  /* Brand-tinted background veils (dark) */
+  --bg-accent-1: oklch(0.79 0.12 295.97 / 0.09);
+  --bg-accent-2: oklch(0.79 0.12 295.97 / 0.06);
   
   --shadow-2xs: 0 1px 3px 0px oklch(0.00 0 0 / 0.05);
   --shadow-xs: 0 1px 3px 0px oklch(0.00 0 0 / 0.05);
···
 }
 
 @layer base {
+  html {
+    background-color: var(--sidebar);
+  }
   * {
     @apply border-border outline-ring/50;
   }
   body {
     @apply bg-background text-foreground;
+    background-image: radial-gradient(80rem 40rem at 50% -10%, var(--bg-accent-1), transparent),
+      radial-gradient(80rem 40rem at 50% 110%, var(--bg-accent-2), transparent);
+    background-attachment: fixed;
   }
 }
 

components/actionable-recommendations.tsx

···
   const getImpactGradient = (priority: string) => {
     switch (priority) {
       case 'high':
-        return 'from-purple-50 via-purple-100/30 to-purple-25/20 dark:from-purple-950/30 dark:via-purple-900/5 dark:to-purple-950/10';
+        return 'from-primary/25 via-primary/10 to-transparent dark:from-primary/25 dark:via-primary/10 dark:to-transparent';
+      case 'medium':
+        return 'from-primary/15 to-transparent dark:from-primary/15 dark:to-transparent';
+      case 'low':
+        return 'from-primary/10 to-transparent dark:from-primary/10 dark:to-transparent';
+      default:
+        return 'from-primary/12 to-transparent dark:from-primary/12 dark:to-transparent';
+    }
+  };
+
+  const getBorderColor = (priority: string) => {
+    switch (priority) {
+      case 'high':
+        return 'border-primary/30 dark:border-primary/25';
       case 'medium':
-        return 'from-purple-50 via-purple-100/30 to-purple-25/20 dark:from-purple-950/30 dark:via-purple-900/5 dark:to-purple-950/10';
+        return 'border-primary/20 dark:border-primary/15';
       case 'low':
-        return 'from-emerald-50 via-emerald-100/30 to-emerald-25/20 dark:from-emerald-950/30 dark:via-emerald-900/5 dark:to-emerald-950/10';
+        return 'border-primary/10 dark:border-primary/10';
       default:
-        return 'from-gray-100 to-gray-50/30 dark:from-gray-950/60 dark:to-gray-900/10';
+        return 'border-primary/15 dark:border-primary/10';
+    }
+  };
+
+  const getIconColor = (priority: string) => {
+    switch (priority) {
+      case 'high':
+        return 'text-primary';
+      case 'medium':
+        return 'text-primary/90';
+      case 'low':
+        return 'text-primary/80';
+      default:
+        return 'text-primary/80';
     }
   };
 
···
         </CardHeader>
         <CardContent>
           <div className="text-center py-8">
-            <div className="mb-4 mx-auto w-12 h-12 rounded-full bg-linear-to-br from-green-400 to-emerald-500 flex items-center justify-center">
+            <div className="mb-4 mx-auto w-12 h-12 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center">
               <IconCheck className="h-6 w-6 text-white" />
             </div>
             <h3 className="text-lg font-semibold mb-2">All Systems Running Well</h3>
···
               {groupedRecs.high.map((rec) => (
                 <Card 
                   key={rec.id} 
-                  className={`bg-linear-to-tl ${getImpactGradient(rec.priority)} border-purple-200/40 dark:border-purple-800/20`}
+                  className={`bg-gradient-to-tl ${getImpactGradient(rec.priority)} ${getBorderColor(rec.priority)}`}
                 >
                   <CardHeader className="pb-3">
                     <div className="flex items-start space-x-3">
-                      <div className="mt-0.5 text-purple-500 dark:text-purple-300">
+                      <div className={`mt-0.5 ${getIconColor(rec.priority)}`}>
                         {getTypeIcon(rec.type)}
                       </div>
                       <div className="flex-1">
···
                     </div>
                   </CardHeader>
                   <CardContent className="pt-0 space-y-3">
-                    <div className="bg-white/60 dark:bg-black/20 rounded-lg p-3">
+                    <div className="bg-white/60 dark:bg-card/20 rounded-lg p-3">
                       <p className="text-sm font-medium mb-1">Expected Impact</p>
                       <p className="text-sm text-muted-foreground">{rec.impact}</p>
                       <div className="mt-2 flex items-center justify-between text-xs">
···
               {groupedRecs.medium.map((rec) => (
                 <Card 
                   key={rec.id} 
-                  className={`bg-linear-to-tl ${getImpactGradient(rec.priority)} border-purple-200/40 dark:border-purple-800/20`}
+                  className={`bg-gradient-to-tl ${getImpactGradient(rec.priority)} ${getBorderColor(rec.priority)}`}
                 >
                   <CardHeader className="pb-3">
                     <div className="flex items-start space-x-3">
-                      <div className="mt-0.5 text-purple-500 dark:text-purple-300">
+                      <div className={`mt-0.5 ${getIconColor(rec.priority)}`}>
                         {getTypeIcon(rec.type)}
                       </div>
                       <div className="flex-1">
···
                     </div>
                   </CardHeader>
                   <CardContent className="pt-0 space-y-3">
-                    <div className="bg-white/60 dark:bg-black/20 rounded-lg p-3">
+                    <div className="bg-white/60 dark:bg-card/20 rounded-lg p-3">
                       <p className="text-sm font-medium mb-1">Expected Impact</p>
                       <p className="text-sm text-muted-foreground">{rec.impact}</p>
                       <div className="mt-2 flex items-center justify-between text-xs">
···
               {groupedRecs.low.map((rec) => (
                 <Card 
                   key={rec.id} 
-                  className={`bg-linear-to-tl ${getImpactGradient(rec.priority)} border-emerald-200/40 dark:border-emerald-800/20`}
+                  className={`bg-gradient-to-tl ${getImpactGradient(rec.priority)} ${getBorderColor(rec.priority)}`}
                 >
                   <CardHeader className="pb-3">
                     <div className="flex items-start space-x-3">
-                      <div className="mt-0.5 text-emerald-500 dark:text-emerald-300">
+                      <div className={`mt-0.5 ${getIconColor(rec.priority)}`}>
                         {getTypeIcon(rec.type)}
                       </div>
                       <div className="flex-1">
···
                     </div>
                   </CardHeader>
                   <CardContent className="pt-0 space-y-3">
-                    <div className="bg-white/60 dark:bg-black/20 rounded-lg p-3">
+                    <div className="bg-white/60 dark:bg-card/20 rounded-lg p-3">
                       <p className="text-sm font-medium mb-1">Expected Impact</p>
                       <p className="text-sm text-muted-foreground">{rec.impact}</p>
                       <div className="mt-2 flex items-center justify-between text-xs">

components/landing/open-source-section.tsx

···
         <div className="w-full border-t border-dashed border-border/50 mb-12"></div>
         
         <div className="text-center mb-6">
-          <div className="inline-flex items-center px-4 py-2 rounded-full bg-white/60 dark:bg-black/20 border border-green-200 dark:border-green-800">
+          <div className="inline-flex items-center px-4 py-2 rounded-full bg-white/60 dark:bg-card/20 border border-green-200 dark:border-green-800">
             <span className="text-sm font-medium text-green-700 dark:text-green-300">
               With support from our friends at:
             </span>

components/recommendations-insights.tsx

···
       case "quality":
         return <Badge variant="outline" className="bg-indigo-500/10 text-indigo-700 dark:text-indigo-400">Quality</Badge>;
       case "collaboration":
-        return <Badge variant="outline" className="bg-purple-500/10 text-purple-700 dark:text-purple-400">Collaboration</Badge>;
+        return <Badge variant="outline" className="bg-blue-500/10 text-blue-700 dark:text-blue-400">Collaboration</Badge>;
       case "process":
         return <Badge variant="outline" className="bg-amber-500/10 text-amber-700 dark:text-amber-400">Process</Badge>;
       default:
···
         </CardHeader>
         <CardContent>
           <div className="text-center py-8">
-            <div className="mb-4 mx-auto w-12 h-12 rounded-full bg-linear-to-br from-green-400 to-emerald-500 flex items-center justify-center">
+            <div className="mb-4 mx-auto w-12 h-12 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center">
               <IconCheck className="h-6 w-6 text-white" />
             </div>
             <h3 className="text-lg font-semibold mb-2">Great Work!</h3>

components/section-cards-engineering.tsx

···
   if (error && !data) return <ErrorCard error={error} refresh={refresh} />;
 
   return (
-    <div className="grid grid-cols-1 gap-4 px-4 lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+    <div className="grid grid-cols-1 gap-4 px-4 lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-gray-50/30 *:data-[slot=card]:to-white dark:*:data-[slot=card]:from-card/10 dark:*:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs">
       {METRICS_CONFIG.map((config) => (
         <MetricCard
           key={config.key}

components/section-cards.tsx

···
 
 export function SectionCards() {
   return (
-    <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+    <div className="grid grid-cols-1 gap-4 px-4 lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-gray-50/30 *:data-[slot=card]:to-white dark:*:data-[slot=card]:from-card/10 dark:*:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs">
       <Card className="@container/card">
         <CardHeader>
           <CardDescription>Total Revenue</CardDescription>