feat(web): design tokens, Tailwind config, base components (TEC-3057)

- Add chart palette, motion, and z-index CSS vars to globals.css
- Replace custom theme-provider with next-themes (dark default)
- Extend tailwind.config.ts with heading fonts, spacing (row-compact,
  row-roomy, sidebar), chart colors, elevation shadows, glow shadows,
  transition timing, pill border-radius, z-index scale
- Update tick-flash animations to match design token spec (480ms)
- Add prefers-reduced-motion support for all animations
- Create base design-system components:
  Surface, SurfaceElevated, Divider, DensityProvider/useDensity,
  Numeric (VND/percent/compact formatting), Signal (up/down/neutral pill)
- Add dev-only /dev/tokens showcase route (404 in production)
- Update theme-provider tests to match next-themes integration

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/tailwind.config.ts

@@ -15,12 +15,21 @@ const config: Config = {
         'data-sm': ['0.75rem', { lineHeight: '1.2' }],
         'data-md': ['0.875rem', { lineHeight: '1.3' }],
         'data-lg': ['1.25rem', { lineHeight: '1.2' }],
+        'heading-xs': ['0.75rem', { lineHeight: '1rem', letterSpacing: '0.08em' }],
+        'heading-sm': ['0.875rem', { lineHeight: '1.25rem' }],
+        'heading-md': ['1.125rem', { lineHeight: '1.5rem' }],
+        'heading-lg': ['1.5rem', { lineHeight: '1.875rem' }],
+        'heading-xl': ['1.875rem', { lineHeight: '2.25rem' }],
       },
       spacing: {
         cell: '0.5rem',
         row: '2.25rem',
+        'row-compact': '2rem',
+        'row-roomy': '2.75rem',
         'ticker-bar': '2rem',
         'header-compact': '3rem',
+        sidebar: '15rem',
+        'sidebar-collapsed': '3.5rem',
       },
       colors: {
         border: 'hsl(var(--border))',
@@ -74,15 +83,44 @@ const config: Config = {
         },
         success: 'hsl(var(--success))',
         warning: 'hsl(var(--warning))',
+        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))',
+          6: 'hsl(var(--chart-6))',
+        },
       },
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
+        pill: '9999px',
       },
       boxShadow: {
-        'elevation-1': '0 1px 2px rgba(0, 0, 0, 0.3)',
-        'elevation-2': '0 4px 12px rgba(0, 0, 0, 0.4)',
+        'elevation-0': 'none',
+        'elevation-1': '0 1px 2px rgba(0,0,0,.30), 0 0 0 1px hsl(var(--border))',
+        'elevation-2': '0 4px 12px rgba(0,0,0,.40)',
+        'elevation-3': '0 12px 32px rgba(0,0,0,.50)',
+        'glow-up': '0 0 0 1px hsl(var(--signal-up) / .4), 0 0 12px hsl(var(--signal-up) / .25)',
+        'glow-down': '0 0 0 1px hsl(var(--signal-down) / .4), 0 0 12px hsl(var(--signal-down) / .25)',
+      },
+      transitionTimingFunction: {
+        standard: 'cubic-bezier(.2,0,0,1)',
+        emphasized: 'cubic-bezier(.3,0,0,1)',
+      },
+      transitionDuration: {
+        '80': '80ms',
+        '240': '240ms',
+      },
+      zIndex: {
+        'sticky-header': '30',
+        'app-header': '40',
+        ticker: '45',
+        dropdown: '50',
+        modal: '60',
+        toast: '70',
       },
     },
   },