feat: add fonts, animations, and shared utilities for dashboard redesign

Add Outfit + IBM Plex Mono fonts, traffic progress animations
(shimmer, unlimited flow/pulse, trial glow), traffic zone utility,
and animated number hook.

src/hooks/useAnimatedNumber.ts

@@ -0,0 +1,38 @@
+import { useEffect, useRef, useState } from 'react';
+
+export function useAnimatedNumber(target: number, duration = 600): number {
+  const [current, setCurrent] = useState(target);
+  const rafRef = useRef<number>(0);
+  const startRef = useRef<number>(0);
+  const fromRef = useRef<number>(target);
+  const currentRef = useRef<number>(target);
+  const prevTargetRef = useRef<number>(target);
+
+  // Keep currentRef in sync with state
+  currentRef.current = current;
+
+  useEffect(() => {
+    if (prevTargetRef.current === target) return;
+    prevTargetRef.current = target;
+    fromRef.current = currentRef.current;
+    startRef.current = performance.now();
+
+    const animate = (now: number) => {
+      const elapsed = now - startRef.current;
+      const progress = Math.min(elapsed / duration, 1);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      const value = fromRef.current + (target - fromRef.current) * eased;
+      setCurrent(value);
+      currentRef.current = value;
+
+      if (progress < 1) {
+        rafRef.current = requestAnimationFrame(animate);
+      }
+    };
+
+    rafRef.current = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(rafRef.current);
+  }, [target, duration]);
+
+  return current;
+}

src/utils/trafficZone.ts

@@ -0,0 +1,56 @@
+export type TrafficZone = 'normal' | 'warning' | 'danger' | 'critical';
+
+interface TrafficZoneResult {
+  zone: TrafficZone;
+  textClass: string;
+  dotClass: string;
+  glowColor: string;
+  labelKey: string;
+  gradientFrom: string;
+  gradientTo: string;
+}
+
+const ZONES: Record<TrafficZone, Omit<TrafficZoneResult, 'zone'>> = {
+  normal: {
+    textClass: 'text-success-400',
+    dotClass: 'bg-success-400',
+    glowColor: 'rgba(var(--color-success-500), 0.5)',
+    labelKey: 'dashboard.zone.normal',
+    gradientFrom: 'rgb(var(--color-success-500))',
+    gradientTo: 'rgb(var(--color-success-400))',
+  },
+  warning: {
+    textClass: 'text-warning-400',
+    dotClass: 'bg-warning-400',
+    glowColor: 'rgba(var(--color-warning-500), 0.5)',
+    labelKey: 'dashboard.zone.warning',
+    gradientFrom: 'rgb(var(--color-warning-500))',
+    gradientTo: 'rgb(var(--color-warning-400))',
+  },
+  danger: {
+    textClass: 'text-warning-300',
+    dotClass: 'bg-warning-300',
+    glowColor: 'rgba(var(--color-warning-400), 0.5)',
+    labelKey: 'dashboard.zone.danger',
+    gradientFrom: 'rgb(var(--color-warning-600))',
+    gradientTo: 'rgb(var(--color-warning-400))',
+  },
+  critical: {
+    textClass: 'text-error-400',
+    dotClass: 'bg-error-400',
+    glowColor: 'rgba(var(--color-error-500), 0.5)',
+    labelKey: 'dashboard.zone.critical',
+    gradientFrom: 'rgb(var(--color-error-500))',
+    gradientTo: 'rgb(var(--color-error-400))',
+  },
+};
+
+export function getTrafficZone(percent: number): TrafficZoneResult {
+  let zone: TrafficZone;
+  if (percent >= 90) zone = 'critical';
+  else if (percent >= 75) zone = 'danger';
+  else if (percent >= 50) zone = 'warning';
+  else zone = 'normal';
+
+  return { zone, ...ZONES[zone] };
+}