docs: fix KpiStrip trend coloring and Card relationship in spec

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

docs/superpowers/specs/2026-03-24-mock-deviations-design.md

@@ -25,7 +25,7 @@ A pattern stays in the pages when it is page-specific composition or a one-off l
 interface KpiItem {
   label: string
   value: string | number
-  trend?: { direction: 'up' | 'down' | 'flat'; label: string }
+  trend?: { label: string; variant?: 'success' | 'warning' | 'error' | 'muted' }
   subtitle?: string
   sparkline?: number[]
   borderColor?: string           // CSS token, e.g. "var(--success)"
@@ -43,10 +43,12 @@ interface KpiStripProps {
 - Card surface: `var(--bg-surface)`, border: `var(--border-subtle)`, radius: `var(--radius-md)`
 - Label: 11px uppercase, monospace weight 500, `var(--text-muted)`
 - Value: 28px, weight 700, `var(--text-primary)`
-- Trend: inline next to value, 11px, colored by direction (up+bad=error, up+neutral=muted, down=success — but color is caller's responsibility via `trend.label` content; the component just renders the text)
+- Trend: inline next to value, 11px. Color controlled by `trend.variant` (maps to semantic tokens). Default `'muted'`. The caller decides what color a trend should be — "↑ +12%" on error count is `'error'`, on throughput is `'success'`.
 - Subtitle: 11px, `var(--text-secondary)`
 - Sparkline: existing `Sparkline` primitive rendered top-right of card
 
+**Note:** KpiStrip builds its own card-like containers internally. It does NOT reuse the `Card` primitive because `Card` uses a top accent border while KpiStrip needs a left border. The visual surface (bg, border, radius, shadow) uses the same tokens but the layout is distinct.
+
 **File location:** `src/design-system/composites/KpiStrip/`
 
 **Pages to refactor:** Dashboard.tsx, Routes.tsx, AgentHealth.tsx — replace inline `KpiHeader` functions with `<KpiStrip items={[...]} />`.