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/badge.tsx

@@ -0,0 +1,40 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset transition-colors',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-muted text-foreground ring-border',
+        primary:
+          'bg-primary/10 text-primary ring-primary/20',
+        accent:
+          'bg-accent/10 text-accent ring-accent/20',
+        warning:
+          'bg-warning/10 text-warning ring-warning/20',
+        destructive:
+          'bg-destructive/10 text-destructive ring-destructive/20',
+        outline:
+          'bg-transparent text-foreground ring-border',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+/**
+ * Badge — nhãn nhỏ dùng để đánh nhãn nội dung.
+ * Variants: default | primary | accent | warning | destructive | outline
+ */
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
+}