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

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: {
-          soft: 'var(--color-border-soft)',
-          strong: 'var(--color-border-strong)',
+        border: 'hsl(var(--border))',
+        background: 'hsl(var(--background))',
+        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;