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/app/globals.css

@@ -39,6 +39,21 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 142.1 76.2% 36.3%;
     --radius: 0.5rem;
+
+    /* Chart palette (light) */
+    --chart-1: 200 90% 45%;
+    --chart-2: 142 65% 38%;
+    --chart-3: 38 95% 48%;
+    --chart-4: 280 65% 50%;
+    --chart-5: 0 75% 50%;
+    --chart-6: 180 60% 40%;
+
+    /* Motion */
+    --duration-xs: 80ms;
+    --duration-sm: 150ms;
+    --duration-md: 240ms;
+    --ease-standard: cubic-bezier(.2, 0, 0, 1);
+    --ease-emphasized: cubic-bezier(.3, 0, 0, 1);
   }
 
   .dark {
@@ -78,6 +93,16 @@
     --ring: 142 72% 42%;
   }
 
+  .dark {
+    /* Chart palette (dark) */
+    --chart-1: 200 90% 60%;
+    --chart-2: 142 70% 50%;
+    --chart-3: 38 95% 60%;
+    --chart-4: 280 70% 65%;
+    --chart-5: 0 75% 60%;
+    --chart-6: 180 65% 50%;
+  }
+
   * {
     @apply border-border;
   }
@@ -135,28 +160,44 @@
   animation-play-state: paused;
 }
 
-/* Signal flash for price updates */
-@keyframes signal-flash-up {
-  0%,
+/* Signal flash for price updates (tick-flash per design tokens) */
+@keyframes tick-up {
+  0% {
+    background-color: hsl(var(--signal-up) / 0.18);
+  }
   100% {
     background-color: transparent;
   }
-  30% {
-    background-color: hsl(var(--signal-up-bg) / 0.2);
-  }
 }
-@keyframes signal-flash-down {
-  0%,
+@keyframes tick-down {
+  0% {
+    background-color: hsl(var(--signal-down) / 0.18);
+  }
   100% {
     background-color: transparent;
   }
-  30% {
-    background-color: hsl(var(--signal-down-bg) / 0.2);
-  }
 }
+.tick-flash-up {
+  animation: tick-up 480ms ease-out;
+}
+.tick-flash-down {
+  animation: tick-down 480ms ease-out;
+}
+/* Legacy aliases */
 .flash-up {
-  animation: signal-flash-up 1s ease-out;
+  animation: tick-up 480ms ease-out;
 }
 .flash-down {
-  animation: signal-flash-down 1s ease-out;
+  animation: tick-down 480ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .tick-flash-up,
+  .tick-flash-down,
+  .flash-up,
+  .flash-down {
+    animation: none;
+  }
+  .animate-ticker {
+    animation: none;
+  }
 }