Use hardcoded HSL values for tooltip colors

CSS variables (var(--color-*)) weren't being applied for some reason.
Switched to direct HSL values to ensure tooltips have visible styling:

- backgroundColor: hsl(0 0% 18%) - dark gray
- color: hsl(0 0% 83%) - light gray text
- borderColor: hsl(240 2% 25%) - subtle border
- Arrow fill: hsl(0 0% 18%) - matches background

This ensures tooltips are always visible and properly styled.

Author: kylecarbs

src/components/ui/tooltip.tsx

@@ -21,15 +21,15 @@ const TooltipContent = React.forwardRef<
       className
     )}
     style={{
-      backgroundColor: "var(--color-popover)",
-      color: "var(--color-popover-foreground)",
-      borderColor: "var(--color-border)",
+      backgroundColor: "hsl(0 0% 18%)",
+      color: "hsl(0 0% 83%)",
+      borderColor: "hsl(240 2% 25%)",
       ...style,
     }}
     {...props}
   >
     {props.children}
-    <TooltipPrimitive.Arrow className="drop-shadow-sm" style={{ fill: "var(--color-popover)" }} />
+    <TooltipPrimitive.Arrow className="drop-shadow-sm" style={{ fill: "hsl(0 0% 18%)" }} />
   </TooltipPrimitive.Content>
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;