fix: Make gradient orange darker, theme status colors

- Make gradient orange darker in light and plan9 themes for better contrast
- Make req viewer status colors themeable:
  - loading/connecting → text-warning
  - live/receiving → text-success
  - error/failed → text-destructive
  - eose → text-info
- Update relay status icons to use theme colors
- Update tests to expect theme color classes

src/lib/relay-status-utils.tsx

@@ -24,11 +24,11 @@ export function getConnectionIcon(relay: RelayState | undefined) {
 
   const iconMap = {
     connected: {
-      icon: <Wifi className="size-3 text-green-600/70" />,
+      icon: <Wifi className="size-3 text-success/70" />,
       label: "Connected",
     },
     connecting: {
-      icon: <Loader2 className="size-3 text-yellow-600/70 animate-spin" />,
+      icon: <Loader2 className="size-3 text-warning/70 animate-spin" />,
       label: "Connecting",
     },
     disconnected: {
@@ -36,7 +36,7 @@ export function getConnectionIcon(relay: RelayState | undefined) {
       label: "Disconnected",
     },
     error: {
-      icon: <XCircle className="size-3 text-red-600/70" />,
+      icon: <XCircle className="size-3 text-destructive/70" />,
       label: "Connection Error",
     },
   };
@@ -57,19 +57,19 @@ export function getAuthIcon(relay: RelayState | undefined) {
 
   const iconMap = {
     authenticated: {
-      icon: <ShieldCheck className="size-3 text-green-600/70" />,
+      icon: <ShieldCheck className="size-3 text-success/70" />,
       label: "Authenticated",
     },
     challenge_received: {
-      icon: <ShieldQuestion className="size-3 text-yellow-600/70" />,
+      icon: <ShieldQuestion className="size-3 text-warning/70" />,
       label: "Challenge Received",
     },
     authenticating: {
-      icon: <Loader2 className="size-3 text-yellow-600/70 animate-spin" />,
+      icon: <Loader2 className="size-3 text-warning/70 animate-spin" />,
       label: "Authenticating",
     },
     failed: {
-      icon: <ShieldX className="size-3 text-red-600/70" />,
+      icon: <ShieldX className="size-3 text-destructive/70" />,
       label: "Authentication Failed",
     },
     rejected: {

src/lib/req-state-machine.test.ts

@@ -597,14 +597,14 @@ describe("getStatusTooltip", () => {
 
 describe("getStatusColor", () => {
   it("should return correct colors for each status", () => {
-    expect(getStatusColor("discovering")).toBe("text-yellow-500");
-    expect(getStatusColor("connecting")).toBe("text-yellow-500");
-    expect(getStatusColor("loading")).toBe("text-yellow-500");
-    expect(getStatusColor("live")).toBe("text-green-500");
-    expect(getStatusColor("partial")).toBe("text-yellow-500");
+    expect(getStatusColor("discovering")).toBe("text-warning");
+    expect(getStatusColor("connecting")).toBe("text-warning");
+    expect(getStatusColor("loading")).toBe("text-warning");
+    expect(getStatusColor("live")).toBe("text-success");
+    expect(getStatusColor("partial")).toBe("text-warning");
     expect(getStatusColor("closed")).toBe("text-muted-foreground");
-    expect(getStatusColor("offline")).toBe("text-red-500");
-    expect(getStatusColor("failed")).toBe("text-red-500");
+    expect(getStatusColor("offline")).toBe("text-destructive");
+    expect(getStatusColor("failed")).toBe("text-destructive");
   });
 });
 
@@ -633,7 +633,7 @@ describe("getRelayStateBadge", () => {
       eventCount: 5,
     });
     expect(badge?.text).toBe("RECEIVING");
-    expect(badge?.color).toBe("text-green-500");
+    expect(badge?.color).toBe("text-success");
   });
 
   it("should return eose badge", () => {
@@ -644,7 +644,7 @@ describe("getRelayStateBadge", () => {
       eventCount: 10,
     });
     expect(badge?.text).toBe("EOSE");
-    expect(badge?.color).toBe("text-blue-500");
+    expect(badge?.color).toBe("text-info");
   });
 
   it("should return error badge", () => {
@@ -655,7 +655,7 @@ describe("getRelayStateBadge", () => {
       eventCount: 0,
     });
     expect(badge?.text).toBe("ERROR");
-    expect(badge?.color).toBe("text-red-500");
+    expect(badge?.color).toBe("text-destructive");
   });
 
   it("should return offline badge for disconnected", () => {

src/lib/req-state-machine.ts

@@ -214,16 +214,16 @@ export function getStatusColor(status: ReqOverallStatus): string {
     case "discovering":
     case "connecting":
     case "loading":
-      return "text-yellow-500";
+      return "text-warning";
     case "live":
-      return "text-green-500";
+      return "text-success";
     case "partial":
-      return "text-yellow-500";
+      return "text-warning";
     case "closed":
       return "text-muted-foreground";
     case "offline":
     case "failed":
-      return "text-red-500";
+      return "text-destructive";
   }
 }
 
@@ -244,21 +244,21 @@ export function getRelayStateBadge(
 
   // Prioritize subscription state
   if (subscriptionState === "receiving") {
-    return { text: "RECEIVING", color: "text-green-500" };
+    return { text: "RECEIVING", color: "text-success" };
   }
   if (subscriptionState === "eose") {
-    return { text: "EOSE", color: "text-blue-500" };
+    return { text: "EOSE", color: "text-info" };
   }
   if (subscriptionState === "error") {
-    return { text: "ERROR", color: "text-red-500" };
+    return { text: "ERROR", color: "text-destructive" };
   }
 
   // Show connection state if not connected
   if (connectionState === "connecting") {
-    return { text: "CONNECTING", color: "text-yellow-500" };
+    return { text: "CONNECTING", color: "text-warning" };
   }
   if (connectionState === "error") {
-    return { text: "ERROR", color: "text-red-500" };
+    return { text: "ERROR", color: "text-destructive" };
   }
   if (connectionState === "disconnected") {
     return { text: "OFFLINE", color: "text-muted-foreground" };

src/lib/themes/builtin/light.ts

@@ -74,8 +74,8 @@ export const lightTheme: Theme = {
   },
 
   gradient: {
-    color1: "202 138 4", // yellow-600 (darker for light bg)
-    color2: "194 65 12", // orange-700 (much darker)
+    color1: "161 98 7", // yellow-700 (darker for light bg)
+    color2: "154 52 18", // orange-800 (even darker)
     color3: "126 34 206", // purple-700
     color4: "8 145 178", // cyan-600
   },

src/lib/themes/builtin/plan9.ts

@@ -90,8 +90,8 @@ export const plan9Theme: Theme = {
 
   gradient: {
     // Darker gradient for contrast on pale yellow background
-    color1: "140 110 20", // Dark olive/mustard
-    color2: "180 90 40", // Dark burnt orange
+    color1: "120 90 15", // Darker olive/mustard
+    color2: "140 60 25", // Darker burnt orange
     color3: "80 50 140", // Dark muted purple
     color4: "30 120 130", // Dark teal
   },