feat(ui): visual polish primitives + token additions (Phase A)

Adds the design tokens the polish PRs (10a-e) will draw from:
shadow-xs/sm/md/lg/glow, radius scale tuned to spec, gradient utilities,
spring/smooth eases, and fast/base/slow durations. Introduces
StatusPill, KPITile, and EmptyState primitives plus a polished
PageHeader variant ('gradient') with optional eyebrow + KPI sub-line —
existing PageHeader callers stay on the plain variant.

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

src/components/shared/page-header.tsx

@@ -6,22 +6,54 @@ interface PageHeaderProps {
   description?: string;
   actions?: ReactNode;
   className?: string;
+  /** Optional small uppercase label above the title. */
+  eyebrow?: string;
+  /** Optional one-line stats / KPI summary under the description. */
+  kpiLine?: ReactNode;
+  /** Render with the polished gradient-brand-soft background strip. */
+  variant?: 'plain' | 'gradient';
 }
 
 /**
- * Consistent page-level header: title, optional description, and an action
- * slot (typically buttons — e.g. "New Client", "Export").
+ * Consistent page-level header: title, optional description, KPI sub-line,
+ * eyebrow, and an action slot. Use `variant="gradient"` for hero strips on
+ * landing pages and detail headers; the plain variant remains the default so
+ * existing call-sites stay unchanged.
  */
-export function PageHeader({ title, description, actions, className }: PageHeaderProps) {
+export function PageHeader({
+  title,
+  description,
+  actions,
+  className,
+  eyebrow,
+  kpiLine,
+  variant = 'plain',
+}: PageHeaderProps) {
+  const isGradient = variant === 'gradient';
   return (
-    <div className={cn('flex items-start justify-between gap-4 mb-6', className)}>
+    <div
+      className={cn(
+        'mb-6 flex items-start justify-between gap-4',
+        isGradient &&
+          'rounded-xl border border-slate-200 bg-gradient-brand-soft px-5 py-4 shadow-xs',
+        className,
+      )}
+    >
       <div className="min-w-0">
-        <h1 className="text-2xl font-bold text-foreground tracking-tight truncate">{title}</h1>
-        {description && (
-          <p className="mt-1 text-sm text-muted-foreground">{description}</p>
-        )}
+        {eyebrow ? (
+          <div className="mb-1 text-xs font-semibold uppercase tracking-wide text-brand">
+            {eyebrow}
+          </div>
+        ) : null}
+        <h1 className="truncate text-2xl font-bold tracking-tight text-foreground">{title}</h1>
+        {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+        {kpiLine ? (
+          <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
+            {kpiLine}
+          </div>
+        ) : null}
       </div>
-      {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
+      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
     </div>
   );
 }