fix(ui): remove blue-shifted hardcoded colors from timeline components

Replace hardcoded blue-shifted rgba values and slate-* classes with neutral
CSS variable references in timeline resource/project panels, tooltips,
constants, and heatmap mono palette. Change utilization row tint from blue
to green. Replace slate-950 open demand backgrounds with --surface-card.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/src/components/timeline/TimelineResourcePanel.tsx

@@ -416,7 +416,7 @@ function TimelineResourcePanelInner({
         const utilBg = utilPct > 100
           ? "rgba(254,202,202,0.18)" // red tint for over-utilized
           : utilPct >= 50
-            ? `rgba(59,130,246,${Math.min(0.06 + (utilPct - 50) * 0.0014, 0.12)})` // faint blue tint scaling 50-100%
+            ? `rgba(34,197,94,${Math.min(0.04 + (utilPct - 50) * 0.001, 0.08)})` // faint green tint scaling 50-100%
             : undefined;
 
         return (
@@ -434,7 +434,7 @@ function TimelineResourcePanelInner({
           >
             <div
               className={clsx(
-                "flex border-b border-gray-100 dark:border-gray-800 hover:bg-blue-50/20 dark:hover:bg-gray-800/30 group transition-colors",
+                "flex border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50/40 dark:hover:bg-[rgb(var(--surface-elevated)/0.3)] group transition-colors",
                 dragState.isDragging && isContextResource && "border-l-4 border-l-brand-400",
               )}
               style={{ height: rowHeight, ...(utilBg ? { backgroundColor: utilBg } : {}) }}
@@ -442,7 +442,7 @@ function TimelineResourcePanelInner({
               {/* Label column */}
               <div
                 className={clsx(
-                  "flex-shrink-0 border-r border-gray-200 dark:border-gray-700 flex items-center px-4 gap-2.5 bg-white dark:bg-gray-900 sticky left-0 z-30 group-hover:bg-blue-50 dark:group-hover:bg-gray-800",
+                  "flex-shrink-0 border-r border-gray-200 dark:border-gray-700 flex items-center px-4 gap-2.5 bg-white dark:bg-[rgb(var(--surface-card))] sticky left-0 z-30 group-hover:bg-gray-50 dark:group-hover:bg-[rgb(var(--surface-elevated))]",
                   dragState.isDragging && isContextResource && "bg-brand-50 dark:bg-brand-950/40",
                 )}
                 style={{ width: LABEL_WIDTH }}