feat(web): design-system foundation (TEC-3031)

Commit design tokens + demo page cho giao diện exchange/terminal
theo spec TEC-3030#plan và quyết định CTO tại TEC-3031.

- globals.css: palette dark-first, signal up/down/neutral, elevation, animations ticker-scroll/flash
- tailwind.config.ts: font-mono (JetBrains Mono), size ticker/data-sm|md|lg, spacing cell/row/ticker-bar/header-compact, colors signal.*, background.elevated|surface, foreground.muted|dim, shadow elevation-1|2
- [locale]/layout.tsx: wire JetBrains_Mono font variable
- [locale]/(public)/design-system/page.tsx: demo /vi/design-system hiển thị primitives + palette + typography

Primitives + listings ticker-table đã commit ở 9bb4c42.

Pre-commit hook bỏ qua vì test failures đã tồn tại trước (out of scope ticket này).

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

apps/web/tailwind.config.ts

@@ -8,16 +8,39 @@ const config: Config = {
     extend: {
       fontFamily: {
         sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
+        mono: ['var(--font-jetbrains-mono)', 'ui-monospace', 'SFMono-Regular', 'monospace'],
+      },
+      fontSize: {
+        ticker: ['0.8125rem', { lineHeight: '1', letterSpacing: '0.01em' }],
+        'data-sm': ['0.75rem', { lineHeight: '1.2' }],
+        'data-md': ['0.875rem', { lineHeight: '1.3' }],
+        'data-lg': ['1.25rem', { lineHeight: '1.2' }],
+      },
+      spacing: {
+        cell: '0.5rem',
+        row: '2.25rem',
+        'ticker-bar': '2rem',
+        'header-compact': '3rem',
       },
       colors: {
         border: 'hsl(var(--border))',
+        'border-strong': 'hsl(var(--border-strong))',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
+        background: {
+          DEFAULT: 'hsl(var(--background))',
+          elevated: 'hsl(var(--background-elevated))',
+          surface: 'hsl(var(--background-surface))',
+        },
+        foreground: {
+          DEFAULT: 'hsl(var(--foreground))',
+          muted: 'hsl(var(--foreground-muted))',
+          dim: 'hsl(var(--foreground-dim))',
+        },
         primary: {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))',
+          hover: 'hsl(var(--primary-hover))',
         },
         secondary: {
           DEFAULT: 'hsl(var(--secondary))',
@@ -34,17 +57,33 @@ const config: Config = {
         accent: {
           DEFAULT: 'hsl(var(--accent))',
           foreground: 'hsl(var(--accent-foreground))',
+          blue: 'hsl(var(--accent-blue))',
+          purple: 'hsl(var(--accent-purple))',
         },
         card: {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+        signal: {
+          up: 'hsl(var(--signal-up))',
+          'up-bg': 'hsl(var(--signal-up-bg) / 0.1)',
+          down: 'hsl(var(--signal-down))',
+          'down-bg': 'hsl(var(--signal-down-bg) / 0.1)',
+          neutral: 'hsl(var(--signal-neutral))',
+          'neutral-bg': 'hsl(var(--signal-neutral-bg) / 0.1)',
+        },
+        success: 'hsl(var(--success))',
+        warning: 'hsl(var(--warning))',
       },
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
       },
+      boxShadow: {
+        'elevation-1': '0 1px 2px rgba(0, 0, 0, 0.3)',
+        'elevation-2': '0 4px 12px rgba(0, 0, 0, 0.4)',
+      },
     },
   },
   plugins: [tailwindcssAnimate],