Refactor dashboard bento colors & welcome styles

Author: jelveh

src/gui/src/css/dashboard.css

@@ -63,19 +63,17 @@
     --dashboard-icon-green-shadow: rgba(16, 185, 129, 0.3);
 
     /* TabHome bento: solid surfaces aligned with header icon accents (no gradients) */
-    /* Profile / welcome card — warm neutral stone (reads calm next to apps blue & usage violet; avoids tinted hues that clash) */
-    --dashboard-bento-welcome-bg: #faf8f5;
-    --dashboard-bento-welcome-pattern: rgba(87, 83, 78, 0.045);
     --dashboard-bento-welcome-avatar-border: #e8e4df;
     --dashboard-bento-welcome-avatar-shadow: rgba(41, 37, 36, 0.1);
     --dashboard-bento-apps-icon-bg: #2563eb;
     --dashboard-bento-apps-icon-shadow: rgba(37, 99, 235, 0.22);
     --dashboard-bento-apps-surface: #eff6ff;
     --dashboard-bento-apps-header-bg: #dbeafe;
-    --dashboard-bento-usage-icon-bg: #7c3aed;
-    --dashboard-bento-usage-icon-shadow: rgba(124, 58, 237, 0.24);
-    --dashboard-bento-usage-surface: #f5f3ff;
-    --dashboard-bento-usage-header-bg: #ede9fe;
+    /* Indigo (cool blue-violet; avoids lavender/violet-50 that reads pink on screen) */
+    --dashboard-bento-usage-icon-bg: #4f46e5;
+    --dashboard-bento-usage-icon-shadow: rgba(79, 70, 229, 0.22);
+    --dashboard-bento-usage-surface: #eef2ff;
+    --dashboard-bento-usage-header-bg: #e0e7ff;
     --dashboard-bento-usage-bar-fill: #ea580c;
 
     --dashboard-shadow-subtle: rgba(0, 0, 0, 0.04);
@@ -157,18 +155,16 @@ body {
         --dashboard-icon-green-end: #10b981;
         --dashboard-icon-green-shadow: rgba(52, 211, 153, 0.25);
 
-        --dashboard-bento-welcome-bg: #252422;
-        --dashboard-bento-welcome-pattern: rgba(168, 162, 158, 0.06);
         --dashboard-bento-welcome-avatar-border: #44403c;
         --dashboard-bento-welcome-avatar-shadow: rgba(0, 0, 0, 0.35);
         --dashboard-bento-apps-icon-bg: #3b82f6;
         --dashboard-bento-apps-icon-shadow: rgba(59, 130, 246, 0.28);
         --dashboard-bento-apps-surface: #1a2332;
         --dashboard-bento-apps-header-bg: #1e2d42;
-        --dashboard-bento-usage-icon-bg: #8b5cf6;
-        --dashboard-bento-usage-icon-shadow: rgba(139, 92, 246, 0.35);
-        --dashboard-bento-usage-surface: #1f1a2e;
-        --dashboard-bento-usage-header-bg: #2a2440;
+        --dashboard-bento-usage-icon-bg: #6366f1;
+        --dashboard-bento-usage-icon-shadow: rgba(99, 102, 241, 0.32);
+        --dashboard-bento-usage-surface: #1c1d2e;
+        --dashboard-bento-usage-header-bg: #252a42;
         --dashboard-bento-usage-bar-fill: #fb923c;
 
         --dashboard-shadow-subtle: rgba(0, 0, 0, 0.2);
@@ -2408,12 +2404,14 @@ body {
     border-radius: 20px;
     overflow: hidden;
     border: 1px solid var(--dashboard-shadow-light);
+    box-shadow:
+        0 1px 2px var(--dashboard-shadow-subtle),
+        0 4px 16px var(--dashboard-shadow-light);
 }
 
-/* Welcome Card */
+/* Welcome Card — uses same surface as .bento-card (no separate welcome tint) */
 .dashboard .bento-welcome {
     position: relative;
-    background-color: var(--dashboard-bento-welcome-bg);
     color: var(--dashboard-text-primary);
     min-height: 280px;
 }
@@ -2430,13 +2428,7 @@ body {
 }
 
 .dashboard .bento-welcome-pattern {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--dashboard-bento-welcome-pattern);
-    pointer-events: none;
+    display: none;
 }
 
 .dashboard .bento-welcome-content {
@@ -2523,7 +2515,6 @@ body {
     min-height: 310px;
     display: flex;
     flex-direction: column;
-    background-color: var(--dashboard-bento-apps-surface);
 }
 
 .dashboard .bento-card-header {
@@ -2767,11 +2758,10 @@ body {
     }
 }
 
-/* Usage bento card (violet surfaces; orange bars stay as progress accent) */
+/* Usage bento card (cool indigo surfaces; orange bars stay as progress accent) */
 .dashboard .bento-usage {
     grid-column: 1 / -1;
     min-height: auto;
-    background-color: var(--dashboard-bento-usage-surface);
 }
 
 .dashboard .bento-usage-container {