fix: Replace Plan9 yellow accent with purple, add zap/live theme colors

- Replace Plan9's bright yellow accent with purple (good contrast on pale yellow)
- Add zap and live colors to theme system (used by ZapReceiptRenderer, StatusBadge)
- Make light theme gradient orange darker for better contrast
- Update ZapReceiptRenderer to use theme zap color instead of hardcoded yellow-500
- Update StatusBadge to use theme live color instead of hardcoded red-600
- Add CSS variables and Tailwind utilities for zap/live colors

src/components/live/StatusBadge.tsx

@@ -16,7 +16,7 @@ export function StatusBadge({
   const config = {
     live: {
       label: "LIVE",
-      className: "bg-red-600 text-white",
+      className: "bg-live text-white",
       icon: Circle,
     },
     planned: {

src/components/nostr/kinds/ZapReceiptRenderer.tsx

@@ -66,8 +66,8 @@ export function Kind9735Renderer({ event }: BaseEventProps) {
       <div className="flex flex-col gap-2">
         {/* Zap indicator */}
         <div className="flex items-center gap-2">
-          <Zap className="size-5 fill-yellow-500 text-yellow-500" />
-          <span className="text-lg font-light text-yellow-500">
+          <Zap className="size-5 fill-zap text-zap" />
+          <span className="text-lg font-light text-zap">
             {amountInSats.toLocaleString("en", {
               notation: "compact",
             })}

src/index.css

@@ -58,6 +58,10 @@
     --warning: 45 93% 47%;
     --info: 199 89% 48%;
 
+    /* Nostr-specific colors */
+    --zap: 45 93% 40%;
+    --live: 0 72% 45%;
+
     /* Syntax highlighting */
     --syntax-comment: 215.4 16.3% 46.9%;
     --syntax-punctuation: 222.2 84% 30%;
@@ -115,6 +119,10 @@
     --warning: 45 93% 47%;
     --info: 199 89% 48%;
 
+    /* Nostr-specific colors */
+    --zap: 45 93% 58%;
+    --live: 0 72% 51%;
+
     /* Syntax highlighting */
     --syntax-comment: 215 20.2% 70%;
     --syntax-punctuation: 210 40% 70%;

src/lib/themes/apply.ts

@@ -53,6 +53,10 @@ export function applyTheme(theme: Theme): void {
   root.style.setProperty("--warning", theme.colors.warning);
   root.style.setProperty("--info", theme.colors.info);
 
+  // Nostr-specific colors
+  root.style.setProperty("--zap", theme.colors.zap);
+  root.style.setProperty("--live", theme.colors.live);
+
   // Syntax highlighting
   root.style.setProperty("--syntax-comment", theme.syntax.comment);
   root.style.setProperty("--syntax-punctuation", theme.syntax.punctuation);
@@ -113,6 +117,9 @@ export function getThemeVariables(): string[] {
     "--success",
     "--warning",
     "--info",
+    // Nostr-specific
+    "--zap",
+    "--live",
     // Syntax
     "--syntax-comment",
     "--syntax-punctuation",

src/lib/themes/builtin/dark.ts

@@ -42,6 +42,10 @@ export const darkTheme: Theme = {
     success: "142 76% 36%",
     warning: "45 93% 47%",
     info: "199 89% 48%",
+
+    // Nostr-specific colors
+    zap: "45 93% 58%", // Gold/yellow for zaps
+    live: "0 72% 51%", // Red for live indicator
   },
 
   syntax: {

src/lib/themes/builtin/light.ts

@@ -42,6 +42,10 @@ export const lightTheme: Theme = {
     success: "142 70% 30%",
     warning: "38 92% 40%",
     info: "199 80% 40%",
+
+    // Nostr-specific colors (darker for light background)
+    zap: "45 93% 40%", // Darker gold for contrast on light
+    live: "0 72% 45%", // Dark red for live indicator
   },
 
   syntax: {
@@ -70,9 +74,9 @@ export const lightTheme: Theme = {
   },
 
   gradient: {
-    color1: "234 179 8", // yellow-500 (darker for light bg)
-    color2: "249 115 22", // orange-500
-    color3: "147 51 234", // purple-600
-    color4: "6 182 212", // cyan-500
+    color1: "202 138 4", // yellow-600 (darker for light bg)
+    color2: "194 65 12", // orange-700 (much darker)
+    color3: "126 34 206", // purple-700
+    color4: "8 145 178", // cyan-600
   },
 };

src/lib/themes/builtin/plan9.ts

@@ -7,8 +7,8 @@ import type { Theme } from "../types";
  * - Pale yellow/cream backgrounds (#ffffe0)
  * - Light blue-green window chrome (#eaffea)
  * - Black text for high contrast
- * - Bright yellow selections
- * - Dark blue accents
+ * - Purple accents for good contrast on pale yellow
+ * - Muted blue interactive elements
  */
 export const plan9Theme: Theme = {
   id: "plan9",
@@ -35,9 +35,9 @@ export const plan9Theme: Theme = {
     secondary: "120 30% 88%",
     secondaryForeground: "0 0% 0%",
 
-    // Bright yellow accent (Plan9 signature selection color)
-    accent: "60 100% 50%",
-    accentForeground: "0 0% 0%",
+    // Purple accent (good contrast on pale yellow)
+    accent: "280 60% 45%",
+    accentForeground: "0 0% 100%",
 
     // Muted yellow for subdued elements
     muted: "60 30% 88%",
@@ -56,6 +56,10 @@ export const plan9Theme: Theme = {
     success: "120 60% 25%",
     warning: "35 90% 35%",
     info: "200 70% 35%",
+
+    // Nostr-specific colors (dark for contrast on pale yellow)
+    zap: "35 90% 35%", // Dark amber/gold for zaps
+    live: "0 70% 40%", // Dark red for live indicator
   },
 
   syntax: {

src/lib/themes/types.ts

@@ -59,6 +59,10 @@ export interface ThemeColors {
   success: HSLValue;
   warning: HSLValue;
   info: HSLValue;
+
+  // Nostr-specific colors
+  zap: HSLValue; // Lightning zaps (typically yellow/gold)
+  live: HSLValue; // Live streaming indicator (typically red)
 }
 
 /** Syntax highlighting colors for code blocks */