redesign: THERMAL warm brutalist dashboard UI

Complete visual redesign of all dashboard components with a warm
brutalist command terminal aesthetic. Features editorial section
numbering, IBM Plex typography, sharp zero-radius cards with colored
accent strips, film grain overlay, and data-glow effects.

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

web/tailwind.config.js

@@ -4,28 +4,73 @@ export default {
   theme: {
     extend: {
       colors: {
-        surface: {
-          50: "rgba(255,255,255,0.05)",
-          100: "rgba(255,255,255,0.08)",
-          200: "rgba(255,255,255,0.12)",
+        base: {
+          DEFAULT: "#0d0d0f",
+          50: "#161618",
+          100: "#1c1c1f",
+          200: "#232326",
+          300: "#2a2a2e",
+          400: "#38383d",
+          500: "#4a4a50",
+          600: "#6b6966",
+          700: "#8a8783",
+          800: "#b0ada8",
+          900: "#e8e5e0",
+        },
+        gold: {
+          DEFAULT: "#e8a44a",
+          dim: "#e8a44a80",
+          glow: "#e8a44a33",
+          muted: "#c4884a",
+        },
+        mint: {
+          DEFAULT: "#4ae8a8",
+          dim: "#4ae8a880",
+          glow: "#4ae8a833",
+        },
+        cherry: {
+          DEFAULT: "#e85a5a",
+          dim: "#e85a5a80",
+          glow: "#e85a5a33",
+        },
+        iris: {
+          DEFAULT: "#a87aec",
+          dim: "#a87aec80",
+          glow: "#a87aec33",
+        },
+        azure: {
+          DEFAULT: "#5ab4e8",
+          dim: "#5ab4e880",
+          glow: "#5ab4e833",
         },
       },
-      backdropBlur: {
-        xs: "2px",
+      fontFamily: {
+        serif: ['"Instrument Serif"', "Georgia", "serif"],
+        sans: ['"IBM Plex Sans"', "system-ui", "sans-serif"],
+        mono: ['"IBM Plex Mono"', "Menlo", "monospace"],
       },
       animation: {
-        "fade-in": "fadeIn 0.5s ease-out",
-        "slide-up": "slideUp 0.4s ease-out",
-        "pulse-slow": "pulse 3s ease-in-out infinite",
+        "fade-in": "fadeIn 0.4s ease-out both",
+        "slide-in": "slideIn 0.3s ease-out both",
+        "scan": "scan 1.5s ease-in-out infinite",
+        "glow-pulse": "glowPulse 2s ease-in-out infinite",
       },
       keyframes: {
         fadeIn: {
-          "0%": { opacity: "0", transform: "translateY(8px)" },
+          "0%": { opacity: "0", transform: "translateY(6px)" },
           "100%": { opacity: "1", transform: "translateY(0)" },
         },
-        slideUp: {
-          "0%": { opacity: "0", transform: "translateY(16px)" },
-          "100%": { opacity: "1", transform: "translateY(0)" },
+        slideIn: {
+          "0%": { opacity: "0", transform: "translateX(-8px)" },
+          "100%": { opacity: "1", transform: "translateX(0)" },
+        },
+        scan: {
+          "0%, 100%": { transform: "translateX(-100%)" },
+          "50%": { transform: "translateX(100%)" },
+        },
+        glowPulse: {
+          "0%, 100%": { opacity: "0.5" },
+          "50%": { opacity: "1" },
         },
       },
     },