feat: update CSS variables and glass-card utilities for Slate & Ice theme

- Replace all color variables with Slate & Ice palette
- Add glass system vars (--glass-bg, --glass-blur, --shadow-float)
- Replace legacy glass-card with new variable-driven glass classes
- Add breatheGlow, bellWobble, slideDown, fadeInRight keyframes
- Update font references to IBM Plex Sans and Bricolage Grotesque

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

frontend/src/index.css

@@ -4,35 +4,52 @@
 
 @layer base {
   :root {
-    /* ResolutionFlow Dark Theme — Purple Gradient Accents */
+    /* ResolutionFlow Dark Theme — Slate & Ice Modern */
-    --background: 240 10% 3.9%;
+    --background: 228 12% 7%;
-    --foreground: 0 0% 100%;
+    --foreground: 210 40% 98%;
-    --card: 240 10% 9.4%;
+    --card: 220 10% 10%;
-    --card-foreground: 0 0% 100%;
+    --card-foreground: 210 40% 98%;
-    --popover: 240 10% 9.4%;
+    --popover: 220 10% 10%;
-    --popover-foreground: 0 0% 100%;
+    --popover-foreground: 210 40% 98%;
-    --primary: 243 75% 59%;
+    --primary: 187 72% 43%;
-    --primary-foreground: 0 0% 100%;
+    --primary-foreground: 228 12% 7%;
-    --secondary: 240 5.9% 15%;
+    --secondary: 220 8% 14%;
-    --secondary-foreground: 0 0% 100%;
+    --secondary-foreground: 210 40% 98%;
-    --muted: 240 5.9% 15%;
+    --muted: 220 8% 14%;
-    --muted-foreground: 240 5% 64.9%;
+    --muted-foreground: 215 10% 58%;
-    --accent: 240 5.9% 15%;
+    --accent: 220 8% 14%;
-    --accent-foreground: 0 0% 100%;
+    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
+    --destructive: 350 81% 55%;
-    --destructive-foreground: 0 0% 100%;
+    --destructive-foreground: 210 40% 98%;
-    --border: 240 5.9% 15%;
+    --border: 220 8% 14%;
-    --input: 240 5.9% 15%;
+    --input: 220 8% 14%;
-    --ring: 243 75% 59%;
+    --ring: 187 72% 43%;
     --radius: 0.75rem;
 
     /* App Shell tokens */
     --sidebar-w: 260px;
-    --sidebar-bg: 240 10% 4.5%;
+    --sidebar-bg: 228 12% 6%;
-    --sidebar-hover: 240 6% 12%;
+    --sidebar-hover: 220 8% 14%;
-    --sidebar-active: 243 75% 59% / 0.08;
+    --sidebar-active: 187 72% 43% / 0.10;
-    --border-subtle: 240 6% 12%;
+    --border-subtle: 220 8% 12%;
-    --text-dimmed: 240 4% 24%;
+    --text-dimmed: 218 10% 39%;
+
+    /* Glass system */
+    --glass-bg: rgba(24, 26, 31, 0.55);
+    --glass-bg-hover: rgba(24, 26, 31, 0.7);
+    --glass-border: rgba(255, 255, 255, 0.06);
+    --glass-border-hover: rgba(255, 255, 255, 0.12);
+    --glass-blur: blur(16px);
+    --glass-blur-strong: blur(20px);
+    --glass-blur-light: blur(12px);
+
+    /* Shadow system */
+    --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.3);
+    --shadow-float-hover: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
+    --shadow-cyan-glow: 0 8px 32px rgba(6, 182, 212, 0.08);
+
+    /* Easing */
+    --ease-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
   }
 }
 
@@ -59,11 +76,11 @@
 
   body {
     @apply bg-background text-foreground;
-    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   }
 
   h1, h2, h3, h4, h5, h6 {
-    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
+    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
     font-weight: 700;
     letter-spacing: -0.02em;
   }
@@ -140,6 +157,30 @@
   to { opacity: 1; transform: scale(1); }
 }
 
+@keyframes slideDown {
+  from { transform: translateY(-100%); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes fadeInRight {
+  from { transform: translateX(30px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes breatheGlow {
+  from { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(6, 182, 212, 0.04); }
+  to { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 30px rgba(6, 182, 212, 0.12); }
+}
+
+@keyframes bellWobble {
+  0% { transform: rotate(0deg); }
+  20% { transform: rotate(8deg); }
+  40% { transform: rotate(-6deg); }
+  60% { transform: rotate(4deg); }
+  80% { transform: rotate(-2deg); }
+  100% { transform: rotate(0deg); }
+}
+
 @layer utilities {
   .animate-fade-in {
     animation: fade-in 200ms ease-out;
@@ -171,30 +212,37 @@
     @apply bg-gradient-brand bg-clip-text text-transparent;
   }
 
-  /* ── Legacy glass-card utilities (preserved for backward compatibility) ── */
+  /* Glass card — interactive with hover lift */
-  /* New components should use bg-card border-border rounded-xl instead */
-
   .glass-card {
-    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
+    background: var(--glass-bg);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    backdrop-filter: var(--glass-blur);
-    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: var(--glass-blur);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px;
+    box-shadow: var(--shadow-float);
+    transition: transform 200ms var(--ease-out-smooth),
+                border-color 200ms var(--ease-out-smooth),
+                box-shadow 200ms var(--ease-out-smooth);
+  }
+  .glass-card:hover {
+    transform: scale(1.02);
+    border-color: var(--glass-border-hover);
+    box-shadow: var(--shadow-float-hover);
   }
 
-  .glass-card-hover {
+  /* Glass card — static, no hover transform */
-    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
+  .glass-card-static {
-    border-color: rgba(255, 255, 255, 0.12);
+    background: var(--glass-bg);
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px;
+    box-shadow: var(--shadow-float);
   }
 
-  .glass-card-glow {
+  /* Breathing glow for highlighted stat cards */
-    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
+  .active-glow {
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    animation: breatheGlow 3s ease-in-out infinite alternate;
-    box-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
-  }
-
-  .glass-stat {
-    background: rgba(20, 20, 25, 0.5);
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    backdrop-filter: blur(10px);
   }
 }
 
@@ -205,11 +253,11 @@
   border: 1px solid hsl(var(--border)) !important;
   box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3) !important;
   border-radius: 0.75rem;
-  font-family: 'Inter', system-ui, sans-serif;
+  font-family: 'IBM Plex Sans', system-ui, sans-serif;
 }
 
 [data-sonner-toast] [data-title] {
-  font-family: 'Inter', system-ui, sans-serif;
+  font-family: 'IBM Plex Sans', system-ui, sans-serif;
   font-weight: 600;
 }