feat: establish tokenized kanban design foundation

src/components/shared/chip.tsx

@@ -2,21 +2,18 @@ import type { ReactNode } from 'react';
 
 interface ChipProps {
   children: ReactNode;
+  tone?: 'default' | 'status' | 'priority';
 }
 
-export function Chip({ children }: ChipProps) {
+const CHIP_TONE_CLASS: Record<NonNullable<ChipProps['tone']>, string> = {
+  default: 'border-border-soft bg-surface-muted/70 text-text-body',
+  status: 'border-cyan-300/25 bg-cyan-400/15 text-cyan-100',
+  priority: 'border-amber-300/25 bg-amber-400/15 text-amber-100',
+};
+
+export function Chip({ children, tone = 'default' }: ChipProps) {
   return (
-    <span
-      style={{
-        border: '1px solid #d7dee8',
-        borderRadius: 999,
-        padding: '0.2rem 0.55rem',
-        fontSize: '0.75rem',
-        fontWeight: 600,
-        color: '#1f2a38',
-        background: '#f7fafc',
-      }}
-    >
+    <span className={`inline-flex items-center rounded-full border px-2 py-1 text-[11px] font-semibold ${CHIP_TONE_CLASS[tone]}`}>
       {children}
     </span>
   );

src/components/shared/stat-pill.tsx

@@ -1,21 +1,16 @@
 interface StatPillProps {
   label: string;
   value: number;
+  tone?: 'default' | 'critical';
 }
 
-export function StatPill({ label, value }: StatPillProps) {
+export function StatPill({ label, value, tone = 'default' }: StatPillProps) {
+  const valueToneClass = tone === 'critical' ? 'text-rose-300' : 'text-text-strong';
+
   return (
-    <div
-      style={{
-        border: '1px solid #d7dee8',
-        borderRadius: 12,
-        padding: '0.6rem 0.8rem',
-        background: '#ffffff',
-        minWidth: 90,
-      }}
-    >
-      <div style={{ fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.05em', color: '#5e6b7a' }}>{label}</div>
-      <div style={{ fontSize: '1.05rem', fontWeight: 700, color: '#0f1720' }}>{value}</div>
+    <div className="min-w-20 rounded-xl border border-border-soft bg-surface-muted/65 px-3 py-2">
+      <div className="font-mono text-[10px] uppercase tracking-[0.16em] text-text-muted">{label}</div>
+      <div className={`mt-0.5 text-lg font-semibold ${valueToneClass}`}>{value}</div>
     </div>
   );
 }