KPI cards: brighter colors - value #fff w800, change #22c55e/#ef4444, ticker #666

dashboard-mockup.html

@@ -120,6 +120,7 @@ body {
   transition: all 0.2s var(--ease);
   opacity: 0; transform: translateY(8px);
   cursor: default;
+  color: #d4d4d4;
 }
 .kpi.visible { opacity: 1; transform: translateY(0); }
 .kpi:hover {
@@ -133,14 +134,14 @@ body {
 }
 .kpi-ticker {
   font-family: var(--mono); font-size: 10px; font-weight: 600;
-  color: #555; letter-spacing: 0.03em;
+  color: #666; letter-spacing: 0.03em;
 }
 .kpi-change {
   font-family: var(--mono); font-size: 12px; font-weight: 700;
   display: flex; align-items: center; gap: 3px;
 }
-.kpi-change.up { color: #16a34a; }
-.kpi-change.down { color: #e21d1d; }
+.kpi-change.up { color: #22c55e; }
+.kpi-change.down { color: #ef4444; }
 .kpi-change.neutral { color: #3b82f6; }
 .kpi-trend { display: flex; align-items: center; gap: 6px; }
 .kpi-trend-line {
@@ -148,12 +149,12 @@ body {
 }
 .kpi-value {
   font-family: var(--mono);
-  font-size: 28px; font-weight: 700;
+  font-size: 28px; font-weight: 800;
   letter-spacing: -0.5px; line-height: 1.1;
-  color: #f4f4f4;
+  color: #ffffff;
 }
 .kpi-desc {
-  font-size: 10px; color: #4a4a4a;
+  font-size: 10px; color: #555;
 }
 
 /* Arrow SVG inline */