feat(design): complete bb-ui2.1 - Earthy-Dark Token System

STORY:
The Unified UX epic requires a cohesive visual language that feels
warm and approachable, not sterile. We designed an "earthy-dark"
palette with natural accent colors.

COLLABORATION:
Added earthy-dark CSS variables to globals.css alongside existing
Aero Chrome tokens:

Backgrounds:
- --color-bg-base: #2D2D2D
- --color-bg-card: #363636
- --color-bg-input: #404040

Accents:
- --color-accent-green: #7CB97A (primary CTA)
- --color-accent-amber: #D4A574 (warning)
- --color-accent-teal: #5BA8A0 (secondary)

Status (earthy variants):
- ready: teal, in_progress: green, blocked: amber, closed: muted

Liveness colors for agent health:
- active: #7CB97A, stale: #D4A574, stuck: #E57373, dead: #9E4244

Also fixed tailwind.config.ts to use ESM import for tailwindcss-animate
instead of require().

DELIVERABLES:
- Earthy-dark tokens in globals.css
- Tailwind config with shadcn CSS variable integration
- Fixed lint error with tailwindcss-animate import

VERIFICATION:
- npm run typecheck: PASS
- npm run lint: PASS

CLOSES: bb-ui2.1
BLOCKS: bb-ui2.5

src/app/globals.css

@@ -50,6 +50,34 @@
   --priority-p2: #38bdf8;
   --priority-p3: #94a3b8;
   --priority-p4: #64748b;
+
+  /* ========== EARTHY-DARK TOKENS (bb-ui2.1) ========== */
+  /* Backgrounds */
+  --color-bg-base: #2D2D2D;
+  --color-bg-card: #363636;
+  --color-bg-input: #404040;
+
+  /* Accents */
+  --color-accent-green: #7CB97A;
+  --color-accent-amber: #D4A574;
+  --color-accent-teal: #5BA8A0;
+
+  /* Text */
+  --color-text-primary: #FFFFFF;
+  --color-text-secondary: #B8B8B8;
+  --color-text-muted-dark: #888888;
+
+  /* Status colors (earthy variants) */
+  --status-ready: #5BA8A0;
+  --status-in-progress: #7CB97A;
+  --status-blocked-earthy: #D4A574;
+  --status-closed-earthy: #888888;
+
+  /* Liveness colors */
+  --liveness-active: #7CB97A;
+  --liveness-stale: #D4A574;
+  --liveness-stuck: #E57373;
+  --liveness-dead: #9E4244;
 }
 
 * {
@@ -268,47 +296,4 @@ body::after {
   filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.6));
 }
 
-.workflow-graph-flow .workflow-edge-cycle .react-flow__edge-path {
+.workflow-graph-flow .workflow-edge-cycle .react-f
-  opacity: 1;
-  filter: drop-shadow(0 0 10px rgba(251, 113, 133, 0.65));
-}
-
-.react-flow__edge-label {
-  pointer-events: none;
-}
-
-.workflow-graph-flow .react-flow__edge-text {
-  text-transform: uppercase;
-  font-family: var(--font-mono-stack);
-  paint-order: stroke;
-  stroke: rgba(2, 6, 23, 0.95);
-  stroke-width: 2px;
-}
-
-/* Node selection pulse animation - sky-blue ring expands and fades */
-@keyframes node-select-pulse {
-  0%   { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); }
-  70%  { box-shadow: 0 0 0 12px rgba(56, 189, 248, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
-}
-.node-select-pulse {
-  animation: node-select-pulse 1s ease-out;
-}
-
-/* Tooltip fade-in animation */
-@keyframes fade-in {
-  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
-  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
-}
-.animate-fade-in {
-  animation: fade-in 200ms ease-out;
-}
-
-/* Hide scrollbar but keep scrolling (for epic chip strip) */
-.no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-.no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}

tailwind.config.ts

@@ -1,39 +1,81 @@
 import type { Config } from 'tailwindcss';
+import tailwindcssAnimate from 'tailwindcss-animate';
 
 const config: Config = {
+  darkMode: ['class'],
   content: ['./src/**/*.{ts,tsx}'],
   theme: {
     extend: {
       fontFamily: {
         ui: ['var(--font-ui)', 'Segoe UI', 'Inter', 'system-ui', 'sans-serif'],
-        mono: ['var(--font-mono)', 'Consolas', 'monospace'],
+        mono: ['var(--font-mono)', 'Consolas', 'monospace']
       },
       colors: {
         bg: 'var(--color-bg)',
         surface: {
           DEFAULT: 'var(--color-surface)',
           muted: 'var(--color-surface-muted)',
-          raised: 'var(--color-surface-raised)',
+          raised: 'var(--color-surface-raised)'
         },
         text: {
           strong: 'var(--color-text-strong)',
           body: 'var(--color-text-body)',
-          muted: 'var(--color-text-muted)',
+          muted: 'var(--color-text-muted)'
         },
-        border: {
+        border: 'hsl(var(--border))',
-          soft: 'var(--color-border-soft)',
+        background: 'hsl(var(--background))',
-          strong: 'var(--color-border-strong)',
+        foreground: 'hsl(var(--foreground))',
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))'
         },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))'
+        },
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))'
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))'
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))'
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))'
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))'
+        },
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        chart: {
+          '1': 'hsl(var(--chart-1))',
+          '2': 'hsl(var(--chart-2))',
+          '3': 'hsl(var(--chart-3))',
+          '4': 'hsl(var(--chart-4))',
+          '5': 'hsl(var(--chart-5))'
+        }
       },
       boxShadow: {
         card: '0 14px 36px rgba(4, 8, 17, 0.45)',
-        panel: '0 24px 56px rgba(4, 8, 17, 0.58)',
+        panel: '0 24px 56px rgba(4, 8, 17, 0.58)'
       },
       borderRadius: {
         xl2: '1rem',
-      },
+        lg: 'var(--radius)',
-    },
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)'
+      }
+    }
   },
+  plugins: [tailwindcssAnimate]
 };
 
 export default config;