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/providers/__tests__/theme-provider.spec.tsx

@@ -3,35 +3,23 @@ import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 import { ThemeProvider, useTheme } from '../theme-provider';
 
-// Provide a working localStorage mock for this test file
-const localStorageMock = (() => {
-  let store: Record<string, string> = {};
-  return {
-    getItem: vi.fn((key: string) => store[key] ?? null),
-    setItem: vi.fn((key: string, value: string) => { store[key] = value; }),
-    removeItem: vi.fn((key: string) => { delete store[key]; }),
-    clear: vi.fn(() => { store = {}; }),
-    get length() { return Object.keys(store).length; },
-    key: vi.fn((index: number) => Object.keys(store)[index] ?? null),
-  };
-})();
+// Mock next-themes
+const mockSetTheme = vi.fn();
+let mockTheme = 'dark';
+let mockResolvedTheme = 'dark';
 
-Object.defineProperty(globalThis, 'localStorage', { value: localStorageMock, writable: true });
-
-// Mock window.matchMedia (not implemented in jsdom)
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: vi.fn().mockImplementation((query: string) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
-});
+vi.mock('next-themes', () => ({
+  ThemeProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  useTheme: () => ({
+    theme: mockTheme,
+    resolvedTheme: mockResolvedTheme,
+    setTheme: (t: string) => {
+      mockSetTheme(t);
+      mockTheme = t;
+      mockResolvedTheme = t;
+    },
+  }),
+}));
 
 // Test consumer component
 function ThemeConsumer() {
@@ -46,8 +34,8 @@ function ThemeConsumer() {
 
 describe('ThemeProvider', () => {
   beforeEach(() => {
-    document.documentElement.classList.remove('dark');
-    localStorageMock.clear();
+    mockTheme = 'dark';
+    mockResolvedTheme = 'dark';
     vi.clearAllMocks();
   });
 
@@ -60,54 +48,7 @@ describe('ThemeProvider', () => {
     expect(screen.getByText('Child content')).toBeInTheDocument();
   });
 
-  it('defaults to light theme', () => {
-    render(
-      <ThemeProvider>
-        <ThemeConsumer />
-      </ThemeProvider>,
-    );
-    expect(screen.getByTestId('theme')).toHaveTextContent('light');
-  });
-
-  it('toggles theme to dark', async () => {
-    const user = userEvent.setup();
-    render(
-      <ThemeProvider>
-        <ThemeConsumer />
-      </ThemeProvider>,
-    );
-
-    await user.click(screen.getByText('Toggle'));
-    expect(screen.getByTestId('theme')).toHaveTextContent('dark');
-  });
-
-  it('toggles theme back to light', async () => {
-    const user = userEvent.setup();
-    render(
-      <ThemeProvider>
-        <ThemeConsumer />
-      </ThemeProvider>,
-    );
-
-    await user.click(screen.getByText('Toggle'));
-    await user.click(screen.getByText('Toggle'));
-    expect(screen.getByTestId('theme')).toHaveTextContent('light');
-  });
-
-  it('persists theme to localStorage', async () => {
-    const user = userEvent.setup();
-    render(
-      <ThemeProvider>
-        <ThemeConsumer />
-      </ThemeProvider>,
-    );
-
-    await user.click(screen.getByText('Toggle'));
-    expect(localStorageMock.setItem).toHaveBeenCalledWith('goodgo-theme', 'dark');
-  });
-
-  it('loads stored theme from localStorage', () => {
-    localStorageMock.getItem.mockReturnValueOnce('dark');
+  it('defaults to dark theme', () => {
     render(
       <ThemeProvider>
         <ThemeConsumer />
@@ -115,11 +56,37 @@ describe('ThemeProvider', () => {
     );
     expect(screen.getByTestId('theme')).toHaveTextContent('dark');
   });
+
+  it('toggles theme to light', async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeProvider>
+        <ThemeConsumer />
+      </ThemeProvider>,
+    );
+
+    await user.click(screen.getByText('Toggle'));
+    expect(mockSetTheme).toHaveBeenCalledWith('light');
+  });
+
+  it('toggles theme back to dark', async () => {
+    mockTheme = 'light';
+    mockResolvedTheme = 'light';
+    const user = userEvent.setup();
+    render(
+      <ThemeProvider>
+        <ThemeConsumer />
+      </ThemeProvider>,
+    );
+
+    await user.click(screen.getByText('Toggle'));
+    expect(mockSetTheme).toHaveBeenCalledWith('dark');
+  });
 });
 
 describe('useTheme', () => {
-  it('returns default values outside provider', () => {
+  it('returns dark as default outside provider', () => {
     render(<ThemeConsumer />);
-    expect(screen.getByTestId('theme')).toHaveTextContent('light');
+    expect(screen.getByTestId('theme')).toHaveTextContent('dark');
   });
 });