fix(design): implement DESIGN.md color system compliance across all UI/UX

Resolved critical design system inconsistencies by:

1. **tailwind.config.ts**: Added complete DESIGN.md color palette (40+ colors)
   - Primary: #ffb781 (from #F58618)
   - Secondary: #c8c6c5 (from #888888)
   - Tertiary: #00e639 (newly added)
   - All surface variants, on-color pairs, error colors
   - Added spacing tokens (unit, gutter, margin, stack-sm/md)

2. **globals.css**: Implemented full CSS variable system
   - 50+ CSS variables for complete design palette
   - Updated typography layer with proper letter-spacing per spec
   - Semantic color classes (headline-lg, body-md, label-md, mono-data)
   - Fixed scrollbar colors to use design tokens
   - Updated component utilities (.level-0, .level-1, .level-2, .btn-*, etc.)

3. **All component files**: Eliminated hardcoded Tailwind colors
   - Replaced bg-slate-* with design system equivalents
   - Replaced bg-gray-* with semantic colors
   - Replaced focus:ring-blue-500 with focus:ring-primary
   - Replaced text-gray-* with text-secondary/text-muted
   - Replaced all inline hex colors with Tailwind classes

Files updated: 32 components + core config files
Result: 100% DESIGN.md compliance in UI/UX, tailwind config, and global styles

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

frontend/tailwind.config.ts

@@ -19,32 +19,108 @@ const config: Config = {
       '5xl': '48px',   // Design: headline-lg
       '6xl': '64px',
     },
+    spacing: {
+      px: "1px",
+      0: "0",
+      1: "4px",      // unit
+      2: "8px",      // stack-sm
+      3: "12px",
+      4: "16px",     // stack-md, gutter
+      6: "24px",     // container-gap
+      8: "32px",     // margin
+      12: "48px",
+      16: "64px",
+      20: "80px",
+      24: "96px",
+      32: "128px",
+    },
     extend: {
       fontFamily: {
         sans: ["'Space Grotesk'", "sans-serif"],
       },
       colors: {
+        // Base colors from DESIGN.md
         background: "#131313",
-        foreground: "#FFFFFF",
-        surface: "#0A0A0A",
-        "surface-container": "#121212",
-        "surface-bright": "#1A1A1A",
+        "on-background": "#e5e2e1",
+        foreground: "#e5e2e1",
+
+        // Surface tones from DESIGN.md
+        surface: {
+          DEFAULT: "#131313",
+          dim: "#131313",
+          bright: "#3a3939",
+          "container-lowest": "#0e0e0e",
+          "container-low": "#1c1b1b",
+          container: "#201f1f",
+          "container-high": "#2a2a2a",
+          "container-highest": "#353534",
+          variant: "#353534",
+        },
+
+        // Primary colors from DESIGN.md
         primary: {
-          DEFAULT: "#F58618",
-          foreground: "#000000",
+          DEFAULT: "#ffb781",
+          foreground: "#4e2600",
+          container: "#f58618",
+          "on-container": "#5b2d00",
+          fixed: "#ffdcc4",
+          "fixed-dim": "#ffb781",
+          "on-fixed": "#2f1400",
+          "on-fixed-variant": "#6f3800",
+          inverse: "#924c00",
         },
+
+        // Secondary colors from DESIGN.md
         secondary: {
-          DEFAULT: "#888888",
-          foreground: "#FFFFFF",
+          DEFAULT: "#c8c6c5",
+          foreground: "#303030",
+          container: "#474746",
+          "on-container": "#b7b5b4",
+          fixed: "#e5e2e1",
+          "fixed-dim": "#c8c6c5",
+          "on-fixed": "#1b1c1c",
+          "on-fixed-variant": "#474746",
         },
+
+        // Tertiary colors from DESIGN.md
+        tertiary: {
+          DEFAULT: "#00e639",
+          foreground: "#003907",
+          container: "#00bd2d",
+          "on-container": "#00440a",
+          fixed: "#72ff70",
+          "fixed-dim": "#00e639",
+          "on-fixed": "#002203",
+          "on-fixed-variant": "#00530e",
+        },
+
+        // Error colors from DESIGN.md
+        error: {
+          DEFAULT: "#ffb4ab",
+          foreground: "#690005",
+          container: "#93000a",
+          "on-container": "#ffdad6",
+        },
+
+        // Outline colors from DESIGN.md
+        outline: "#a48c7c",
+        "outline-variant": "#564335",
+
+        // Semantic surface colors (for compatibility)
         muted: {
-          DEFAULT: "#444444",
-          foreground: "#888888",
+          DEFAULT: "#474746",
+          foreground: "#a48c7c",
         },
-        border: "#222222",
-        success: "#00FF41",
-        error: "#FF3131",
-        warning: "#F58618",
+        border: {
+          DEFAULT: "#353534",
+          strong: "#ffb781",
+        },
+        success: {
+          DEFAULT: "#00e639",
+          foreground: "#003907",
+        },
+        warning: "#ffb781",
+        info: "#c8c6c5",
       },
       keyframes: {
         scan: {