Use native shadcn color scheme for tooltips

Added missing shadcn semantic colors to theme:
- --color-primary: hsl(0 0% 18%) - dark background
- --color-primary-foreground: hsl(0 0% 98%) - light text

Updated tooltip to use native shadcn utilities:
- bg-primary (instead of hardcoded colors)
- text-primary-foreground
- fill-primary (for arrow)

This follows the standard shadcn/ui tooltip pattern and should work
with Tailwind's utility generation.

Author: kylecarbs

src/components/ui/tooltip.tsx

@@ -12,21 +12,18 @@ const TooltipTrigger = TooltipPrimitive.Trigger;
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, style, ...props }, ref) => (
+>(({ className, sideOffset = 4, ...props }, ref) => (
   <TooltipPrimitive.Content
     ref={ref}
     sideOffset={sideOffset}
-    className={cn("z-50 rounded-md px-2.5 py-1 text-xs shadow-md", className)}
-    style={{
-      backgroundColor: "#2d2d2d",
-      color: "#d4d4d4",
-      border: "1px solid #404040",
-      ...style,
-    }}
+    className={cn(
+      "z-50 overflow-hidden rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground shadow-md",
+      className
+    )}
     {...props}
   >
     {props.children}
-    <TooltipPrimitive.Arrow style={{ fill: "#2d2d2d" }} />
+    <TooltipPrimitive.Arrow className="fill-primary" />
   </TooltipPrimitive.Content>
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;

src/styles/globals.css

@@ -43,6 +43,8 @@
   --color-ring: hsl(207 100% 40%);          /* focus ring - uses accent */
   --color-muted-foreground: hsl(0 0% 60%);  /* muted text */
   --color-accent-foreground: hsl(0 0% 98%); /* white text on accent */
+  --color-primary: hsl(0 0% 18%);           /* primary - dark for tooltips */
+  --color-primary-foreground: hsl(0 0% 98%); /* white text on primary */
 
   /* Code */
   --color-code-bg: hsl(0 6.43% 8.04%);
@@ -205,6 +207,8 @@
   --color-border: hsl(240 2% 25%);
   --color-popover: hsl(0 0% 18%);
   --color-popover-foreground: hsl(0 0% 83%);
+  --color-primary: hsl(0 0% 18%);
+  --color-primary-foreground: hsl(0 0% 98%);
   --color-text: hsl(0 0% 83%);
   --color-text-secondary: hsl(0 0% 42%);
   --color-user-border: hsl(0 0% 38%);