refactor(tokens): extract subscription urgent + critical semantic colors

The #FFB800 (23 hits) and #FF3B5C (11 hits) raw hex literals across
Subscription / SubscriptionPurchase / TrialOfferCard / useTrafficZone
all represent the same semantic: 'expiring soon' and 'expired'.
Distinct from warning-500 (#f59e0b) and error-500 (#ef4444) — the
subscription timeline needs a sharper, hotter signal than the
system-wide warning/error roles.

Add two semantic tokens:
  --color-urgent-400:   255, 184, 0    (#FFB800)
  --color-critical-500: 255, 59, 92    (#FF3B5C)

Exposed via Tailwind as urgent.400 / critical.500. Sweep all
single-and double-quoted hex literals to rgb(var(--color-...))
form so style attrs, SVG stroke=, and ternary string values all
resolve through CSS vars (auto-respects future light-theme
variants).

Left as-is: 4 hex appearances inside gradient pair strings —
linear-gradient(135deg, #FFB800, #FF8C00) — where the partner
color (#FF8C00 / #FF6B35) isn't in the token set. Partial-replace
inside gradient strings would just add noise; full extraction of
the orange-ramp companion is out of scope for this pass.

src/hooks/useTrafficZone.ts

@@ -5,8 +5,8 @@ import type { ThemeColors } from '../types/theme';
 
 const FALLBACKS: Record<TrafficColorKey, string> = {
   accent: '#3b82f6',
-  warning: '#FFB800',
-  error: '#FF3B5C',
+  warning: 'rgb(var(--color-urgent-400))',
+  error: 'rgb(var(--color-critical-500))',
 };
 
 const COLOR_MAP: Record<TrafficColorKey, keyof ThemeColors> = {