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/components/design-system/surface.tsx

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils';
+
+/** Flat surface — uses `--background` (app bg). */
+export function Surface({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('rounded-lg bg-background text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+/** Elevated surface — uses `--background-elevated` with shadow-elevation-1. */
+export function SurfaceElevated({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'rounded-lg bg-background-elevated text-foreground shadow-elevation-1',
+        className,
+      )}
+      {...props}
+    />
+  );
+}