refactor: architecture compliance pass — DS tokens, hook boundary, god component split, AI hardening

- DS token migration: Anfragen.tsx + child components (AnfragenInquiryItem, AnfragenMessageBubble) fully migrated; DS_TEXT.brandDark added; scoreTheme.ts moved to src/lib/ with re-export proxy - Hook boundary: Results.tsx no longer calls needService directly — routes through useNeeds() with optional refetchOnMount/gcTime overrides - NewListing.tsx (440L) split into useNewListingForm hook + 8 section components under src/components/new-listing/; page shell reduced to 121 lines - AI hardening: Zod .strict() on all schemas, AIProvenance extended with schemaVersion/ fallbackReason/traceId/latencyMs, AITraceStore stats with p50/p90/p99 + failure breakdowns, MockAIService buildFollowUpQuestions with priority ordering + area-ambiguity detection, prompt templates updated (LIGHT_INDUSTRIAL, budget unit, ambiguity detection, decimal precision) - Tests: all 154 passing; fixed test regression caused by OfferEmailResponseSchema body min(50) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-24 16:10:39 +02:00
parent e36c5bc979
commit e1f4beb898
44 changed files with 1610 additions and 1058 deletions
@@ -14,6 +14,7 @@ import type { FutureSignal } from '../../domain/futureSignal'
 import { SIGNAL_TYPE_LABELS, SIGNAL_ACTION, SOURCE_META } from './futureAvailabilityConstants'
 import { CREDIBILITY_META, SENSITIVITY_META, RISK_META, ageLabel } from './futureAvailabilityContextUtils'
 import { SignalSourcesSection } from './SignalSourcesSection'
+import { DS_TEXT, DS_BG, DS_SURFACE, DS_PRE_MARKET, DS_MARKET_SIGNAL, DS_BORDER } from '../../lib/ds'

 interface Props {
  match: Match
@@ -35,81 +36,85 @@ export function FutureAvailabilityContextPanel({ match: _match, signal }: Props)
    ...(signal.evidence?.sourceUrls ?? []),
  ]

-  const probBarColor = probPct >= 70 ? '#1a7a4a' : probPct >= 50 ? '#d97706' : '#c0392b'
+  const probBarColor = probPct >= 70 ? DS_TEXT.success : probPct >= 50 ? DS_TEXT.warning : DS_TEXT.error

  return (
    <Paper sx={{ p: 2.5, mb: 2 }}>

-      {/* ── Header ──────────────────────────────────────────────────────────── */}
+      {/* ── Header ── */}
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.75, flexWrap: 'wrap' }}>
-        <Zap size={16} color="#7c3aed" />
+        <Zap size={16} color={DS_PRE_MARKET.accent} />
        <Typography variant="h6" sx={{ fontWeight: 700 }}>Future Availability Signal</Typography>
        {signal.isVerified && (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.4, bgcolor: '#f0fdf4', border: '1px solid #86efac', borderRadius: 1, px: 0.75, py: 0.2 }}>
-            <ShieldCheck size={11} color="#1a7a4a" />
-            <Typography sx={{ fontSize: '0.68rem', color: '#1a7a4a', fontWeight: 700 }}>Verifiziert</Typography>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.4, bgcolor: DS_SURFACE.success.bg, border: `1px solid ${DS_SURFACE.success.border}`, borderRadius: 1, px: 0.75, py: 0.2 }}>
+            <ShieldCheck size={11} color={DS_TEXT.success} />
+            <Typography sx={{ fontSize: '0.68rem', color: DS_TEXT.success, fontWeight: 700 }}>Verifiziert</Typography>
          </Box>
        )}
-        <Box sx={{ ml: 'auto', display: 'flex', alignItems: 'center', gap: 0.5, color: '#94a3b8' }}>
+        <Box sx={{ ml: 'auto', display: 'flex', alignItems: 'center', gap: 0.5, color: DS_TEXT.disabled }}>
          <Clock size={12} />
          <Typography variant="caption" color="text.secondary">{ageLabel(signal.createdAt)}</Typography>
        </Box>
      </Box>

      {signal.title && (
-        <Typography sx={{ fontSize: '0.95rem', fontWeight: 600, color: '#1e293b', mb: 2, lineHeight: 1.4 }}>
+        <Typography sx={{ fontSize: '0.95rem', fontWeight: 600, color: DS_TEXT.primary, mb: 2, lineHeight: 1.4 }}>
          {signal.title}
        </Typography>
      )}

-      {/* ── 1. KI-Zusammenfassung ─────────────────────────────────────────── */}
+      {/* ── 1. KI-Zusammenfassung ── */}
      {signal.aiSummary && (
        <Box sx={{ mb: 2.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 0.875 }}>
-            <Sparkles size={14} color="#7c3aed" />
-            <Typography variant="subtitle2" sx={{ fontWeight: 700, color: '#4c1d95', fontSize: '0.8125rem' }}>KI-Zusammenfassung</Typography>
+            <Sparkles size={14} color={DS_PRE_MARKET.accent} />
+            <Typography variant="subtitle2" sx={{ fontWeight: 700, color: DS_TEXT.signalDark, fontSize: '0.8125rem' }}>KI-Zusammenfassung</Typography>
          </Box>
-          <Box sx={{ bgcolor: '#faf5ff', border: '1px solid #e9d5ff', borderRadius: 1.5, p: 1.75 }}>
-            <Typography variant="body2" sx={{ color: '#1e1b4b', lineHeight: 1.7 }}>
+          <Box sx={{ bgcolor: DS_SURFACE.purple.bg, border: `1px solid ${DS_SURFACE.purple.border}`, borderRadius: 1.5, p: 1.75 }}>
+            <Typography variant="body2" sx={{ color: DS_TEXT.primary, lineHeight: 1.7 }}>
              {signal.aiSummary}
            </Typography>
          </Box>
        </Box>
      )}

-      {/* ── 2. Strategische Einschätzung ─────────────────────────────────── */}
+      {/* ── 2. Strategische Einschätzung ── */}
      {signal.strategicInterpretation && (
        <Box sx={{ mb: 2.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 0.875 }}>
-            <TrendingUp size={14} color="#0369a1" />
+            <TrendingUp size={14} color={DS_TEXT.info} />
            <Typography variant="subtitle2" sx={{ fontWeight: 700, fontSize: '0.8125rem' }}>Strategische Einschätzung</Typography>
          </Box>
-          <Box sx={{ bgcolor: '#f0f9ff', border: '1px solid #bae6fd', borderRadius: 1.5, p: 1.75 }}>
-            <Typography variant="body2" sx={{ color: '#0c4a6e', lineHeight: 1.7 }}>
+          <Box sx={{ bgcolor: DS_SURFACE.info.bg, border: `1px solid ${DS_SURFACE.info.border}`, borderRadius: 1.5, p: 1.75 }}>
+            <Typography variant="body2" sx={{ color: DS_TEXT.infoDark, lineHeight: 1.7 }}>
              {signal.strategicInterpretation}
            </Typography>
          </Box>
        </Box>
      )}

-      {/* ── 3. Handlungsempfehlung ───────────────────────────────────────── */}
+      {/* ── 3. Handlungsempfehlung ── */}
      {action && (
-        <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, bgcolor: action.urgency === 'high' ? '#fff7ed' : '#f8fafc', border: `1px solid ${action.urgency === 'high' ? '#fed7aa' : '#e2e8f0'}`, borderRadius: 1.5, px: 1.5, py: 1.25, mb: 2.5 }}>
-          <Zap size={14} color={action.urgency === 'high' ? '#c2410c' : '#64748b'} style={{ flexShrink: 0, marginTop: 2 }} />
+        <Box sx={{
+          display: 'flex', alignItems: 'flex-start', gap: 1,
+          bgcolor: action.urgency === 'high' ? DS_SURFACE.orange.bg : DS_BG.page,
+          border: `1px solid ${action.urgency === 'high' ? DS_SURFACE.orange.border : DS_BORDER.default}`,
+          borderRadius: 1.5, px: 1.5, py: 1.25, mb: 2.5,
+        }}>
+          <Zap size={14} color={action.urgency === 'high' ? DS_TEXT.error : DS_TEXT.muted} style={{ flexShrink: 0, marginTop: 2 }} />
          <Box>
-            <Typography sx={{ fontSize: '0.72rem', fontWeight: 700, color: action.urgency === 'high' ? '#9a3412' : '#475569', mb: 0.25 }}>Empfohlene Aktion</Typography>
-            <Typography sx={{ fontSize: '0.82rem', color: action.urgency === 'high' ? '#7c2d12' : '#334155', lineHeight: 1.5 }}>{action.label}</Typography>
+            <Typography sx={{ fontSize: '0.72rem', fontWeight: 700, color: action.urgency === 'high' ? DS_TEXT.warningDark : DS_TEXT.secondary, mb: 0.25 }}>Empfohlene Aktion</Typography>
+            <Typography sx={{ fontSize: '0.82rem', color: action.urgency === 'high' ? DS_TEXT.error : DS_TEXT.primary, lineHeight: 1.5 }}>{action.label}</Typography>
          </Box>
        </Box>
      )}

      <Divider sx={{ mb: 2 }} />

-      {/* ── 4. Signal-Kenndaten ──────────────────────────────────────────── */}
+      {/* ── 4. Signal-Kenndaten ── */}
      <Box sx={{ mb: 2.5 }}>
        <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 1.25, fontSize: '0.8125rem' }}>Signal-Kenndaten</Typography>

-        {/* Probability bar */}
        <Box sx={{ mb: 1.5 }}>
          <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.4 }}>
            <Typography variant="caption" color="text.secondary">Eintretenswahrscheinlichkeit</Typography>
@@ -119,7 +124,7 @@ export function FutureAvailabilityContextPanel({ match: _match, signal }: Props)
            variant="determinate"
            value={probPct}
            sx={{
-              height: 6, borderRadius: 3, bgcolor: '#f1f5f9',
+              height: 6, borderRadius: 3, bgcolor: DS_BG.subtle,
              '& .MuiLinearProgress-bar': { bgcolor: probBarColor, borderRadius: 3 },
            }}
          />
@@ -129,13 +134,13 @@ export function FutureAvailabilityContextPanel({ match: _match, signal }: Props)
          {signal.signalType && (
            <Box>
              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.25 }}>Signaltyp</Typography>
-              <Chip label={SIGNAL_TYPE_LABELS[signal.signalType] ?? signal.signalType} size="small" sx={{ bgcolor: '#ede9fe', color: '#6d28d9', fontWeight: 600 }} />
+              <Chip label={SIGNAL_TYPE_LABELS[signal.signalType] ?? signal.signalType} size="small" sx={{ bgcolor: DS_PRE_MARKET.badgeBg, color: DS_PRE_MARKET.accentHover, fontWeight: 600 }} />
            </Box>
          )}
          <Box>
            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.25 }}>Zeithorizont</Typography>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-              <Calendar size={13} color="#64748b" />
+              <Calendar size={13} color={DS_TEXT.muted} />
              <Typography variant="body2" sx={{ fontWeight: 700 }}>~{signal.timeHorizonMonths} Monate</Typography>
            </Box>
          </Box>
@@ -156,22 +161,22 @@ export function FutureAvailabilityContextPanel({ match: _match, signal }: Props)

      <Divider sx={{ mb: 2 }} />

-      {/* ── 5. Erkannte Marktindikatoren ──────────────────────────────────── */}
+      {/* ── 5. Erkannte Marktindikatoren ── */}
      {signal.marketIndicators && signal.marketIndicators.length > 0 && (
        <Box sx={{ mb: 2.5 }}>
          <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 1, fontSize: '0.8125rem' }}>Erkannte Marktindikatoren</Typography>
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
            {signal.marketIndicators.map((indicator, i) => (
              <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.875 }}>
-                <Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: '#1d4ed8', mt: '6px', flexShrink: 0 }} />
-                <Typography variant="body2" sx={{ color: '#334155', lineHeight: 1.55 }}>{indicator}</Typography>
+                <Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: DS_MARKET_SIGNAL.accent, mt: '6px', flexShrink: 0 }} />
+                <Typography variant="body2" sx={{ color: DS_TEXT.primary, lineHeight: 1.55 }}>{indicator}</Typography>
              </Box>
            ))}
          </Box>
        </Box>
      )}

-      {/* ── 6. Transparenz (Bestätigt / Nicht bestätigt) ─────────────────── */}
+      {/* ── 6. Transparenz ── */}
      {((signal.confirmedFacts && signal.confirmedFacts.length > 0) ||
        (signal.unconfirmedFacts && signal.unconfirmedFacts.length > 0)) && (
        <Box sx={{ mb: 2.5 }}>
@@ -179,14 +184,14 @@ export function FutureAvailabilityContextPanel({ match: _match, signal }: Props)
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.625 }}>
            {(signal.confirmedFacts ?? []).map((fact, i) => (
              <Box key={`c-${i}`} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75 }}>
-                <CheckCircle2 size={14} color="#1a7a4a" style={{ flexShrink: 0, marginTop: 1 }} />
-                <Typography variant="body2" sx={{ color: '#1a7a4a', fontWeight: 500, lineHeight: 1.45 }}>{fact}</Typography>
+                <CheckCircle2 size={14} color={DS_TEXT.success} style={{ flexShrink: 0, marginTop: 1 }} />
+                <Typography variant="body2" sx={{ color: DS_TEXT.success, fontWeight: 500, lineHeight: 1.45 }}>{fact}</Typography>
              </Box>
            ))}
            {(signal.unconfirmedFacts ?? []).map((fact, i) => (
              <Box key={`u-${i}`} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75 }}>
-                <AlertTriangle size={14} color="#d97706" style={{ flexShrink: 0, marginTop: 1 }} />
-                <Typography variant="body2" sx={{ color: '#92400e', lineHeight: 1.45 }}>{fact}</Typography>
+                <AlertTriangle size={14} color={DS_TEXT.warning} style={{ flexShrink: 0, marginTop: 1 }} />
+                <Typography variant="body2" sx={{ color: DS_TEXT.warningDark, lineHeight: 1.45 }}>{fact}</Typography>
              </Box>
            ))}
          </Box>
@@ -195,7 +200,7 @@ export function FutureAvailabilityContextPanel({ match: _match, signal }: Props)

      <Divider sx={{ mb: 2 }} />

-      {/* ── 7. Quellen & Belege ───────────────────────────────────────────── */}
+      {/* ── 7. Quellen & Belege ── */}
      <SignalSourcesSection
        sourceMeta={sourceMeta}
        credMeta={credMeta}
@@ -204,7 +209,7 @@ export function FutureAvailabilityContextPanel({ match: _match, signal }: Props)
        signal={signal}
      />

-      {/* ── Footer ──────────────────────────────────────────────────────────── */}
+      {/* ── Footer ── */}
      <Divider sx={{ mb: 1.5 }} />

      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.25, flexWrap: 'wrap' }}>
@@ -213,12 +218,12 @@ export function FutureAvailabilityContextPanel({ match: _match, signal }: Props)
        {signal.verifiedBy && (
          <>
            <Typography variant="caption" color="text.secondary">Verifiziert von:</Typography>
-            <Typography variant="caption" sx={{ fontWeight: 600, color: '#1a7a4a' }}>{signal.verifiedBy}</Typography>
+            <Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.success }}>{signal.verifiedBy}</Typography>
          </>
        )}
      </Box>

-      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', lineHeight: 1.55, bgcolor: '#f8fafc', borderRadius: 1, px: 1.25, py: 1, fontStyle: 'italic' }}>
+      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', lineHeight: 1.55, bgcolor: DS_BG.page, borderRadius: 1, px: 1.25, py: 1, fontStyle: 'italic' }}>
        {signal.disclaimer}
      </Typography>
    </Paper>
@@ -3,6 +3,7 @@ import { Building2, Clock, ExternalLink, Info, Layers, Tag, Train, TrendingUp }
 import { useMatchDetail } from '../../hooks/useMatches'
 import type { Property } from '../../domain/property'
 import { FLOOR_LABEL, ASSET_LABELS, RISK_LABELS, SOURCE_LABELS, PASSERBY_LABELS, KeyFactRow, UnitRow } from './MatchDetailPropertyDetails'
+import { DS_TEXT, DS_BG, DS_SURFACE, DS_BORDER, DS_MARKET_SIGNAL, DS_PRE_MARKET } from '../../lib/ds'

 type Match = NonNullable<ReturnType<typeof useMatchDetail>['data']>

@@ -30,7 +31,7 @@ export function MatchDetailPropertySections({ property, match }: MatchDetailProp
      {/* Preis */}
      <Paper sx={{ p: 2.5 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
-          <Tag size={15} color="#374151" />
+          <Tag size={15} color={DS_TEXT.secondary} />
          <Typography variant="h6" sx={{ fontWeight: 700 }}>Preis</Typography>
        </Box>
        <KeyFactRow label="Monatliche Miete" value={`CHF ${totalMonthly.toLocaleString('de-CH')}.–`} />
@@ -44,7 +45,7 @@ export function MatchDetailPropertySections({ property, match }: MatchDetailProp
      {/* Hauptangaben */}
      <Paper sx={{ p: 2.5 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
-          <Info size={15} color="#374151" />
+          <Info size={15} color={DS_TEXT.secondary} />
          <Typography variant="h6" sx={{ fontWeight: 700 }}>Hauptangaben</Typography>
        </Box>
        <KeyFactRow label="Verfügbarkeit" value={property.availabilityDate ? new Date(property.availabilityDate).toLocaleDateString('de-CH', { day: 'numeric', month: 'long', year: 'numeric' }) : 'Auf Anfrage'} />
@@ -66,27 +67,27 @@ export function MatchDetailPropertySections({ property, match }: MatchDetailProp
      {property.softFactors && (
        <Paper sx={{ p: 2.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
-            <TrendingUp size={15} color="#374151" />
+            <TrendingUp size={15} color={DS_TEXT.secondary} />
            <Typography variant="h6" sx={{ fontWeight: 700 }}>Eigenschaften</Typography>
          </Box>
          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
            {property.softFactors.publicTransportMinutes != null && (
-              <Chip size="small" icon={<Train size={11} />} label={`ÖV: ${property.softFactors.publicTransportMinutes} Min. zu Fuss`} sx={{ bgcolor: '#eff6ff', color: '#1d4ed8', border: '1px solid #bfdbfe', fontWeight: 500 }} />
+              <Chip size="small" icon={<Train size={11} />} label={`ÖV: ${property.softFactors.publicTransportMinutes} Min. zu Fuss`} sx={{ bgcolor: DS_SURFACE.blue.bg, color: DS_MARKET_SIGNAL.accent, border: `1px solid ${DS_SURFACE.blue.border}`, fontWeight: 500 }} />
            )}
            {property.softFactors.parkingSpots != null && property.softFactors.parkingSpots > 0 && (
-              <Chip size="small" label={`${property.softFactors.parkingSpots} Parkplätze`} sx={{ bgcolor: '#f8fafc', color: '#374151', border: '1px solid #e2e8f0', fontWeight: 500 }} />
+              <Chip size="small" label={`${property.softFactors.parkingSpots} Parkplätze`} sx={{ bgcolor: DS_BG.page, color: DS_TEXT.primary, border: `1px solid ${DS_BORDER.default}`, fontWeight: 500 }} />
            )}
            {property.softFactors.prestige != null && property.softFactors.prestige >= 80 && (
-              <Chip size="small" label="Prestigestandort" sx={{ bgcolor: '#fef9c3', color: '#92400e', border: '1px solid #fde68a', fontWeight: 500 }} />
+              <Chip size="small" label="Prestigestandort" sx={{ bgcolor: DS_SURFACE.warning.bg, color: DS_TEXT.warningDark, border: `1px solid ${DS_SURFACE.warning.border}`, fontWeight: 500 }} />
            )}
            {property.softFactors.visibilityScore != null && property.softFactors.visibilityScore >= 80 && (
-              <Chip size="small" label="Hohe Sichtbarkeit" sx={{ bgcolor: '#fef9c3', color: '#92400e', border: '1px solid #fde68a', fontWeight: 500 }} />
+              <Chip size="small" label="Hohe Sichtbarkeit" sx={{ bgcolor: DS_SURFACE.warning.bg, color: DS_TEXT.warningDark, border: `1px solid ${DS_SURFACE.warning.border}`, fontWeight: 500 }} />
            )}
            {property.softFactors.passerbyFrequency && (
-              <Chip size="small" label={`Laufkundschaft: ${PASSERBY_LABELS[property.softFactors.passerbyFrequency]}`} sx={{ bgcolor: '#f0fdf4', color: '#1a7a4a', border: '1px solid #bbf7d0', fontWeight: 500 }} />
+              <Chip size="small" label={`Laufkundschaft: ${PASSERBY_LABELS[property.softFactors.passerbyFrequency]}`} sx={{ bgcolor: DS_SURFACE.success.bg, color: DS_TEXT.success, border: `1px solid ${DS_SURFACE.success.border}`, fontWeight: 500 }} />
            )}
            {property.softFactors.talentAccess != null && property.softFactors.talentAccess >= 80 && (
-              <Chip size="small" label={`Talentindex: ${property.softFactors.talentAccess}`} sx={{ bgcolor: '#faf5ff', color: '#5b21b6', border: '1px solid #e9d5ff', fontWeight: 500 }} />
+              <Chip size="small" label={`Talentindex: ${property.softFactors.talentAccess}`} sx={{ bgcolor: DS_SURFACE.purple.bg, color: DS_TEXT.signalDark, border: `1px solid ${DS_SURFACE.purple.border}`, fontWeight: 500 }} />
            )}
          </Box>
        </Paper>
@@ -96,12 +97,12 @@ export function MatchDetailPropertySections({ property, match }: MatchDetailProp
      {property.softFactors?.publicTransportMinutes != null && (
        <Paper sx={{ p: 2.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
-            <Clock size={15} color="#374151" />
+            <Clock size={15} color={DS_TEXT.secondary} />
            <Typography variant="h6" sx={{ fontWeight: 700 }}>Wegzeit</Typography>
          </Box>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: '50%', bgcolor: '#eff6ff', border: '1px solid #bfdbfe', flexShrink: 0 }}>
-              <Train size={18} color="#1d4ed8" />
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: '50%', bgcolor: DS_SURFACE.blue.bg, border: `1px solid ${DS_SURFACE.blue.border}`, flexShrink: 0 }}>
+              <Train size={18} color={DS_MARKET_SIGNAL.accent} />
            </Box>
            <Box>
              <Typography variant="body2" sx={{ fontWeight: 600 }}>{property.softFactors.publicTransportMinutes} Min. zu Fuss</Typography>
@@ -118,7 +119,7 @@ export function MatchDetailPropertySections({ property, match }: MatchDetailProp
      {units.length > 0 && (
        <Paper sx={{ p: 2.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
-            <Layers size={15} color="#374151" />
+            <Layers size={15} color={DS_TEXT.secondary} />
            <Typography variant="h6" sx={{ fontWeight: 700 }}>Einheiten</Typography>
          </Box>
          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 80px 110px 120px auto', gap: 1.5, px: 2, mb: 0.75 }}>
@@ -135,10 +136,10 @@ export function MatchDetailPropertySections({ property, match }: MatchDetailProp
      {property.description && (
        <Paper sx={{ p: 2.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
-            <Building2 size={15} color="#374151" />
+            <Building2 size={15} color={DS_TEXT.secondary} />
            <Typography variant="h6" sx={{ fontWeight: 700 }}>Beschreibung</Typography>
          </Box>
-          <Typography variant="body2" sx={{ lineHeight: 1.75, color: '#374151', whiteSpace: 'pre-wrap' }}>
+          <Typography variant="body2" sx={{ lineHeight: 1.75, color: DS_TEXT.primary, whiteSpace: 'pre-wrap' }}>
            {property.description}
          </Typography>
        </Paper>
@@ -147,7 +148,7 @@ export function MatchDetailPropertySections({ property, match }: MatchDetailProp
      {/* Quelle & Referenz */}
      <Paper sx={{ p: 2.5 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
-          <Info size={15} color="#374151" />
+          <Info size={15} color={DS_TEXT.secondary} />
          <Typography variant="h6" sx={{ fontWeight: 700 }}>Quelle & Referenz</Typography>
        </Box>
        <KeyFactRow label="Datenquelle" value={sourceLabel} />
@@ -158,7 +159,7 @@ export function MatchDetailPropertySections({ property, match }: MatchDetailProp
        )}
        {property.sourceUrl && (
          <Box sx={{ mt: 1.25 }}>
-            <Button size="small" variant="outlined" endIcon={<ExternalLink size={12} />} href={property.sourceUrl} target="_blank" rel="noopener noreferrer" sx={{ textTransform: 'none', fontSize: '0.8rem', borderColor: '#cbd5e1', color: '#374151' }}>
+            <Button size="small" variant="outlined" endIcon={<ExternalLink size={12} />} href={property.sourceUrl} target="_blank" rel="noopener noreferrer" sx={{ textTransform: 'none', fontSize: '0.8rem', borderColor: DS_BORDER.strong, color: DS_TEXT.primary }}>
              Zum Originalinserat
            </Button>
          </Box>
@@ -26,6 +26,7 @@ import {
  SOURCE_LABELS,
  UnitRow,
 } from './MatchDetailPropertyDetails'
+import { DS_TEXT, DS_BG, DS_SURFACE, DS_BORDER, DS_MARKET_SIGNAL } from '../../lib/ds'

 interface PropertyDetailPublicSectionsProps {
  property: Property
@@ -57,7 +58,7 @@ export function PropertyDetailPublicSections({ property, highlightUnitId }: Prop
      {/* ── Preis ── */}
      <Paper sx={{ mb: 2, p: 2.5 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
-          <Tag size={15} color="#374151" />
+          <Tag size={15} color={DS_TEXT.secondary} />
          <Typography variant="h6" sx={{ fontWeight: 700 }}>Preis</Typography>
        </Box>
        <KeyFactRow label="Monatliche Miete" value={`CHF ${totalMonthly.toLocaleString('de-CH')}.–`} />
@@ -74,7 +75,7 @@ export function PropertyDetailPublicSections({ property, highlightUnitId }: Prop
      {/* ── Hauptangaben ── */}
      <Paper sx={{ mb: 2, p: 2.5 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
-          <Info size={15} color="#374151" />
+          <Info size={15} color={DS_TEXT.secondary} />
          <Typography variant="h6" sx={{ fontWeight: 700 }}>Hauptangaben</Typography>
        </Box>
        <KeyFactRow
@@ -127,7 +128,7 @@ export function PropertyDetailPublicSections({ property, highlightUnitId }: Prop
      {property.softFactors && (
        <Paper sx={{ mb: 2, p: 2.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
-            <TrendingUp size={15} color="#374151" />
+            <TrendingUp size={15} color={DS_TEXT.secondary} />
            <Typography variant="h6" sx={{ fontWeight: 700 }}>Eigenschaften</Typography>
          </Box>
          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
@@ -136,49 +137,49 @@ export function PropertyDetailPublicSections({ property, highlightUnitId }: Prop
                size="small"
                icon={<Train size={11} />}
                label={`ÖV: ${property.softFactors.publicTransportMinutes} Min. zu Fuss`}
-                sx={{ bgcolor: '#eff6ff', color: '#1d4ed8', border: '1px solid #bfdbfe', fontWeight: 500 }}
+                sx={{ bgcolor: DS_SURFACE.blue.bg, color: DS_MARKET_SIGNAL.accent, border: `1px solid ${DS_SURFACE.blue.border}`, fontWeight: 500 }}
              />
            )}
            {property.softFactors.parkingSpots != null && property.softFactors.parkingSpots > 0 && (
              <Chip
                size="small"
                label={`${property.softFactors.parkingSpots} Parkplätze`}
-                sx={{ bgcolor: '#f8fafc', color: '#374151', border: '1px solid #e2e8f0', fontWeight: 500 }}
+                sx={{ bgcolor: DS_BG.page, color: DS_TEXT.primary, border: `1px solid ${DS_BORDER.default}`, fontWeight: 500 }}
              />
            )}
            {property.softFactors.prestige != null && property.softFactors.prestige >= 80 && (
              <Chip
                size="small"
                label="Prestigestandort"
-                sx={{ bgcolor: '#fef9c3', color: '#92400e', border: '1px solid #fde68a', fontWeight: 500 }}
+                sx={{ bgcolor: DS_SURFACE.warning.bg, color: DS_TEXT.warningDark, border: `1px solid ${DS_SURFACE.warning.border}`, fontWeight: 500 }}
              />
            )}
            {property.softFactors.visibilityScore != null && property.softFactors.visibilityScore >= 80 && (
              <Chip
                size="small"
                label="Hohe Sichtbarkeit"
-                sx={{ bgcolor: '#fef9c3', color: '#92400e', border: '1px solid #fde68a', fontWeight: 500 }}
+                sx={{ bgcolor: DS_SURFACE.warning.bg, color: DS_TEXT.warningDark, border: `1px solid ${DS_SURFACE.warning.border}`, fontWeight: 500 }}
              />
            )}
            {property.softFactors.passerbyFrequency && (
              <Chip
                size="small"
                label={`Laufkundschaft: ${PASSERBY_LABELS[property.softFactors.passerbyFrequency]}`}
-                sx={{ bgcolor: '#f0fdf4', color: '#1a7a4a', border: '1px solid #bbf7d0', fontWeight: 500 }}
+                sx={{ bgcolor: DS_SURFACE.success.bg, color: DS_TEXT.success, border: `1px solid ${DS_SURFACE.success.border}`, fontWeight: 500 }}
              />
            )}
            {property.softFactors.talentAccess != null && property.softFactors.talentAccess >= 80 && (
              <Chip
                size="small"
                label="Hoher Talentzugang"
-                sx={{ bgcolor: '#faf5ff', color: '#5b21b6', border: '1px solid #e9d5ff', fontWeight: 500 }}
+                sx={{ bgcolor: DS_SURFACE.purple.bg, color: DS_TEXT.signalDark, border: `1px solid ${DS_SURFACE.purple.border}`, fontWeight: 500 }}
              />
            )}
            {property.softFactors.talentAccess != null && property.softFactors.talentAccess >= 80 && (
              <Chip
                size="small"
                label={`Talentindex: ${property.softFactors.talentAccess}`}
-                sx={{ bgcolor: '#faf5ff', color: '#5b21b6', border: '1px solid #e9d5ff', fontWeight: 500 }}
+                sx={{ bgcolor: DS_SURFACE.purple.bg, color: DS_TEXT.signalDark, border: `1px solid ${DS_SURFACE.purple.border}`, fontWeight: 500 }}
              />
            )}
          </Box>
@@ -189,12 +190,12 @@ export function PropertyDetailPublicSections({ property, highlightUnitId }: Prop
      {property.softFactors?.publicTransportMinutes != null && (
        <Paper sx={{ mb: 2, p: 2.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
-            <Clock size={15} color="#374151" />
+            <Clock size={15} color={DS_TEXT.secondary} />
            <Typography variant="h6" sx={{ fontWeight: 700 }}>Wegzeit</Typography>
          </Box>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: '50%', bgcolor: '#eff6ff', border: '1px solid #bfdbfe', flexShrink: 0 }}>
-              <Train size={18} color="#1d4ed8" />
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: '50%', bgcolor: DS_SURFACE.blue.bg, border: `1px solid ${DS_SURFACE.blue.border}`, flexShrink: 0 }}>
+              <Train size={18} color={DS_MARKET_SIGNAL.accent} />
            </Box>
            <Box>
              <Typography variant="body2" sx={{ fontWeight: 600 }}>
@@ -220,7 +221,7 @@ export function PropertyDetailPublicSections({ property, highlightUnitId }: Prop
      {(property.units ?? []).length > 0 && (
        <Paper sx={{ mb: 2, p: 2.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
-            <Layers size={15} color="#374151" />
+            <Layers size={15} color={DS_TEXT.secondary} />
            <Typography variant="h6" sx={{ fontWeight: 700 }}>Einheiten</Typography>
          </Box>
          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 80px 110px 120px auto', gap: 1.5, px: 2, mb: 0.75 }}>
@@ -241,10 +242,10 @@ export function PropertyDetailPublicSections({ property, highlightUnitId }: Prop
      {property.description && (
        <Paper sx={{ mb: 2, p: 2.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
-            <Building2 size={15} color="#374151" />
+            <Building2 size={15} color={DS_TEXT.secondary} />
            <Typography variant="h6" sx={{ fontWeight: 700 }}>Beschreibung</Typography>
          </Box>
-          <Typography variant="body2" sx={{ lineHeight: 1.75, color: '#374151', whiteSpace: 'pre-wrap' }}>
+          <Typography variant="body2" sx={{ lineHeight: 1.75, color: DS_TEXT.primary, whiteSpace: 'pre-wrap' }}>
            {property.description}
          </Typography>
        </Paper>
@@ -253,7 +254,7 @@ export function PropertyDetailPublicSections({ property, highlightUnitId }: Prop
      {/* ── Quelle & Referenz ── */}
      <Paper sx={{ mb: 2, p: 2.5 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
-          <Info size={15} color="#374151" />
+          <Info size={15} color={DS_TEXT.secondary} />
          <Typography variant="h6" sx={{ fontWeight: 700 }}>Quelle & Referenz</Typography>
        </Box>
        <KeyFactRow label="Datenquelle" value={sourceLabel} />
@@ -278,7 +279,7 @@ export function PropertyDetailPublicSections({ property, highlightUnitId }: Prop
              href={property.sourceUrl}
              target="_blank"
              rel="noopener noreferrer"
-              sx={{ textTransform: 'none', fontSize: '0.8rem', borderColor: '#cbd5e1', color: '#374151' }}
+              sx={{ textTransform: 'none', fontSize: '0.8rem', borderColor: DS_BORDER.strong, color: DS_TEXT.primary }}
            >
              Zum Originalinserat
            </Button>