feat(design-system): F003 – complete design system foundation

Design tokens:
- lib/ds.ts: DS_COLORS (resultType/confidence/risk/availability/freshness/dataQuality), scoreToConfidenceLevel(), scoreToDataQualityLevel()
- lib/constants.ts: added CONFIDENCE_LABELS, DATA_QUALITY_LABELS

Badge system (src/components/badges/):
- ResultTypeBadge, ConfidenceBadge, RiskBadge, AvailabilityBadge, FreshnessBadge, DataQualityBadge
- All use DS_COLORS, MUI Chip size=small, lucide icons, German labels from constants

Score components (src/components/scores/):
- ConfidenceScore: numeric % with color from utils.confidenceHex
- DataQualityScore: LinearProgress + qualitative label
- ScoreBar: horizontal bar with label/value/weight
- ScoreBreakdownMini: ScoreFactor[] mapped to ScoreBars with Tooltip explanations

Card system (src/components/cards/):
- DecisionCard: header+badges+score+body+actions, selected/loading/restricted states
- CompactCard: single-row 48px card with leading/trailing slots
- MetricCard: KPI card with label/value/delta/icon (extracted pattern from SupplyDashboard)

Panel system (src/components/panels/):
- InfoPanel: outlined Paper with icon+title header
- DetailPanel: Accordion sections in bordered Paper
- WarningPanel: MUI Alert with warning/critical severity

Table components (src/components/tables/):
- DataTableShell: Paper+TableContainer+Table with loading/empty/toolbar slots
- TableToolbar: flex row with title/count/filters/actions
- FilterBar: deletable Chips with clear-all
- EmptyTableState: centered empty row spanning all cols
- LoadingRows: Skeleton cell rows

Form components (src/components/forms/):
- TextInput: MUI TextField wrapper with onChange(string) signature
- SelectField: generic SelectField<T extends string> with MUI Select
- PriorityChipGroup: togglable Chip set (single/multi select)
- FieldWithConfidence: label+value+ConfidenceBadge for AI-parsed fields

UI additions (src/components/ui/):
- CardSkeleton, PanelLoadingState, UnauthorizedState, RestrictedState

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/lib/constants.ts

@@ -111,3 +111,20 @@ export const FRESHNESS_LABELS: Record<string, string> = {
   STALE: 'Veraltet',
   OUTDATED: 'Abgelaufen',
 }
+
+// Confidence level display labels
+export const CONFIDENCE_LABELS: Record<string, string> = {
+  VERY_HIGH: 'Sehr hoch',
+  HIGH: 'Hoch',
+  MEDIUM: 'Mittel',
+  LOW: 'Niedrig',
+  VERY_LOW: 'Sehr niedrig',
+}
+
+// Data quality level display labels
+export const DATA_QUALITY_LABELS: Record<string, string> = {
+  HIGH: 'Hoch',
+  MEDIUM: 'Mittel',
+  LOW: 'Niedrig',
+  INCOMPLETE: 'Unvollständig',
+}

src/lib/ds.ts

@@ -0,0 +1,61 @@
+import type { ConfidenceLevel, DataQualityLevel } from '../domain/enums'
+import { CONF_HIGH, CONF_MEDIUM, DQ_HIGH, DQ_MEDIUM } from './constants'
+
+// ── Semantic color tokens ─────────────────────────────────────────────────────
+// Single source of truth for badge/score colors. All badge components read from here.
+
+export const DS_COLORS = {
+  resultType: {
+    VERIFIED_PORTFOLIO:  { bg: 'rgba(30,58,95,0.10)',    fg: '#1e3a5f' },
+    EXTERNAL_MARKET:     { bg: 'rgba(180,83,9,0.10)',    fg: '#b45309' },
+    FUTURE_AVAILABILITY: { bg: 'rgba(109,40,217,0.10)',  fg: '#6d28d9' },
+  },
+  confidence: {
+    VERY_HIGH: { bg: 'rgba(26,122,74,0.12)',   fg: '#1a7a4a' },
+    HIGH:      { bg: 'rgba(26,122,74,0.09)',   fg: '#1a7a4a' },
+    MEDIUM:    { bg: 'rgba(30,58,95,0.10)',    fg: '#1e3a5f' },
+    LOW:       { bg: 'rgba(217,119,6,0.12)',   fg: '#d97706' },
+    VERY_LOW:  { bg: 'rgba(192,57,43,0.12)',   fg: '#c0392b' },
+  },
+  risk: {
+    LOW:      { bg: 'rgba(26,122,74,0.10)',   fg: '#1a7a4a' },
+    MEDIUM:   { bg: 'rgba(217,119,6,0.10)',   fg: '#d97706' },
+    HIGH:     { bg: 'rgba(192,57,43,0.10)',   fg: '#c0392b' },
+    CRITICAL: { bg: 'rgba(127,0,0,0.12)',     fg: '#7f1d1d' },
+  },
+  availability: {
+    AVAILABLE_NOW:  { bg: 'rgba(26,122,74,0.10)',   fg: '#1a7a4a' },
+    AVAILABLE_SOON: { bg: 'rgba(217,119,6,0.10)',   fg: '#d97706' },
+    FUTURE_SIGNAL:  { bg: 'rgba(109,40,217,0.10)',  fg: '#6d28d9' },
+    OCCUPIED:       { bg: 'rgba(100,116,139,0.10)', fg: '#475569' },
+    UNKNOWN:        { bg: '#f1f5f9',                fg: '#94a3b8' },
+  },
+  freshness: {
+    FRESH:    { bg: 'rgba(26,122,74,0.10)',  fg: '#1a7a4a' },
+    STALE:    { bg: 'rgba(217,119,6,0.10)', fg: '#d97706' },
+    OUTDATED: { bg: 'rgba(192,57,43,0.10)', fg: '#c0392b' },
+  },
+  dataQuality: {
+    HIGH:       { bg: 'rgba(26,122,74,0.10)',  fg: '#1a7a4a' },
+    MEDIUM:     { bg: 'rgba(217,119,6,0.10)',  fg: '#d97706' },
+    LOW:        { bg: 'rgba(192,57,43,0.10)',  fg: '#c0392b' },
+    INCOMPLETE: { bg: 'rgba(127,0,0,0.12)',    fg: '#7f1d1d' },
+  },
+} as const
+
+// ── Score → qualitative level helpers ────────────────────────────────────────
+
+export function scoreToConfidenceLevel(score: number): ConfidenceLevel {
+  if (score >= CONF_HIGH) return 'VERY_HIGH'
+  if (score >= 0.75)      return 'HIGH'
+  if (score >= CONF_MEDIUM) return 'MEDIUM'
+  if (score >= 0.35)      return 'LOW'
+  return 'VERY_LOW'
+}
+
+export function scoreToDataQualityLevel(score: number): DataQualityLevel {
+  if (score >= DQ_HIGH)   return 'HIGH'
+  if (score >= DQ_MEDIUM) return 'MEDIUM'
+  if (score > 0)          return 'LOW'
+  return 'INCOMPLETE'
+}