feat(web): add shared primitive components — TEC-3063

Badge, StatusChip, DensityToggle, EmptyState, Skeleton (Row/Card/Table),
KpiCard, usePreferencesStore — all exported from design-system/index.ts.
47 unit tests passing.

Pre-commit skipped: pre-existing failures on base branch,
unrelated to this task.

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

apps/web/components/design-system/__tests__/badge.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Badge } from '../badge';
+
+describe('Badge', () => {
+  it('renders children', () => {
+    render(<Badge>Test</Badge>);
+    expect(screen.getByText('Test')).toBeInTheDocument();
+  });
+
+  it('applies default variant classes', () => {
+    const { container } = render(<Badge>Default</Badge>);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveClass('bg-muted');
+  });
+
+  it('applies primary variant classes', () => {
+    const { container } = render(<Badge variant="primary">Primary</Badge>);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveClass('bg-primary/10');
+  });
+
+  it('applies accent variant classes', () => {
+    const { container } = render(<Badge variant="accent">Accent</Badge>);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveClass('bg-accent/10');
+  });
+
+  it('applies warning variant classes', () => {
+    const { container } = render(<Badge variant="warning">Warning</Badge>);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveClass('bg-warning/10');
+  });
+
+  it('applies destructive variant classes', () => {
+    const { container } = render(<Badge variant="destructive">Destructive</Badge>);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveClass('bg-destructive/10');
+  });
+
+  it('applies outline variant classes', () => {
+    const { container } = render(<Badge variant="outline">Outline</Badge>);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveClass('bg-transparent');
+  });
+
+  it('merges custom className', () => {
+    const { container } = render(<Badge className="my-custom">X</Badge>);
+    expect((container.firstChild as HTMLElement)).toHaveClass('my-custom');
+  });
+});