fix: improve tooltip contrast across all themes

CRITICAL FIX: Plan 9 theme had a catastrophic contrast failure where
tooltip text (HSL 60, 100%, 96%) was nearly identical to the background
(HSL 60, 100%, 94%), creating a ~1:1 contrast ratio that made tooltips
completely unreadable.

Changes:
- Added dedicated `tooltip` and `tooltipForeground` colors to theme system
- Updated all three built-in themes (dark, light, plan9) with proper colors
- Modified tooltip component to use new colors instead of primary/primary-foreground
- Added rounded corners and shadow to tooltips for better visual separation

Theme-specific tooltip colors:
- Dark theme: Dark blue-gray background (#217.2 32.6% 17.5%) with light text
- Light theme: Very dark background (#222.2 47.4% 11.2%) with light text
- Plan 9 theme: Dark blue (#220 50% 25%) with pale yellow text

All tooltip colors now meet WCAG AA standards (4.5:1+ contrast ratio) and
are clearly visible against their respective theme backgrounds.

Files modified:
- src/lib/themes/types.ts: Added tooltip color types
- src/lib/themes/builtin/*.ts: Added tooltip colors to all themes
- src/lib/themes/apply.ts: Apply tooltip CSS variables on theme change
- src/index.css: Added tooltip CSS variables for light/dark themes
- tailwind.config.js: Exposed tooltip colors as Tailwind utilities
- src/components/ui/tooltip.tsx: Use new tooltip colors with improved styling

src/components/ui/tooltip.tsx

@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+        "z-50 overflow-hidden rounded-md bg-tooltip px-3 py-1.5 text-xs text-tooltip-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
         className,
       )}
       {...props}

src/index.css

@@ -65,6 +65,10 @@
     /* UI highlight (active user, self-references) */
     --highlight: 25 90% 35%;
 
+    /* Tooltip colors */
+    --tooltip: 222.2 47.4% 11.2%;
+    --tooltip-foreground: 210 40% 98%;
+
     /* Syntax highlighting */
     --syntax-comment: 215.4 16.3% 46.9%;
     --syntax-punctuation: 222.2 84% 30%;
@@ -129,6 +133,10 @@
     /* UI highlight (active user, self-references) */
     --highlight: 27 96% 61%;
 
+    /* Tooltip colors */
+    --tooltip: 217.2 32.6% 17.5%;
+    --tooltip-foreground: 210 40% 98%;
+
     /* Syntax highlighting */
     --syntax-comment: 215 20.2% 70%;
     --syntax-punctuation: 210 40% 70%;

src/lib/themes/apply.ts

@@ -60,6 +60,13 @@ export function applyTheme(theme: Theme): void {
   // UI highlight color
   root.style.setProperty("--highlight", theme.colors.highlight);
 
+  // Tooltip colors
+  root.style.setProperty("--tooltip", theme.colors.tooltip);
+  root.style.setProperty(
+    "--tooltip-foreground",
+    theme.colors.tooltipForeground,
+  );
+
   // Syntax highlighting
   root.style.setProperty("--syntax-comment", theme.syntax.comment);
   root.style.setProperty("--syntax-punctuation", theme.syntax.punctuation);
@@ -125,6 +132,9 @@ export function getThemeVariables(): string[] {
     "--live",
     // UI highlight
     "--highlight",
+    // Tooltip
+    "--tooltip",
+    "--tooltip-foreground",
     // Syntax
     "--syntax-comment",
     "--syntax-punctuation",

src/lib/themes/builtin/dark.ts

@@ -49,6 +49,10 @@ export const darkTheme: Theme = {
 
     // UI highlight (active user, self-references)
     highlight: "27 96% 61%", // orange-400 (original color)
+
+    // Tooltip colors (high contrast for visibility)
+    tooltip: "217.2 32.6% 17.5%", // Dark blue-gray (same as secondary)
+    tooltipForeground: "210 40% 98%", // Light (high contrast with dark tooltip)
   },
 
   syntax: {

src/lib/themes/builtin/light.ts

@@ -49,6 +49,10 @@ export const lightTheme: Theme = {
 
     // UI highlight (darker for light background)
     highlight: "25 90% 35%", // Dark amber/brown
+
+    // Tooltip colors (dark tooltip for visibility on light background)
+    tooltip: "222.2 47.4% 11.2%", // Very dark blue-gray (same as primary)
+    tooltipForeground: "210 40% 98%", // Light text
   },
 
   syntax: {

src/lib/themes/builtin/plan9.ts

@@ -63,6 +63,10 @@ export const plan9Theme: Theme = {
 
     // UI highlight (dark for contrast on pale yellow)
     highlight: "25 85% 30%", // Dark brown/amber
+
+    // Tooltip colors (strong contrast against pale yellow background)
+    tooltip: "220 50% 25%", // Dark blue (darker than primary for tooltips)
+    tooltipForeground: "60 100% 97%", // Very pale yellow (matches popover)
   },
 
   syntax: {

src/lib/themes/types.ts

@@ -66,6 +66,10 @@ export interface ThemeColors {
 
   // UI highlight color (for active user, self-references, etc.)
   highlight: HSLValue;
+
+  // Tooltip colors (for proper contrast across all themes)
+  tooltip: HSLValue;
+  tooltipForeground: HSLValue;
 }
 
 /** Syntax highlighting colors for code blocks */

tailwind.config.js

@@ -74,6 +74,11 @@ export default {
         live: "hsl(var(--live))",
         // UI highlight (active user, self-references)
         highlight: "hsl(var(--highlight))",
+        // Tooltip colors
+        tooltip: {
+          DEFAULT: "hsl(var(--tooltip))",
+          foreground: "hsl(var(--tooltip-foreground))",
+        },
       },
     },
   },