fix: tooltip accent line and theme-independent colors

- Use clipPath to clip accent bar to main rect's rounded corners,
  preventing stroke from showing through at corners
- Use fixed dark colors for tooltip (always dark, like OS tooltips)
  instead of CSS variables that break in light mode

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: raifdmueller

src/components/RadarChart.jsx

@@ -401,38 +401,41 @@ export default function RadarChart({
               <feDropShadow dx="0" dy="2" stdDeviation="4" floodColor="#000" floodOpacity="0.4" />
             </filter>
           </defs>
+          <clipPath id="tt-clip">
+            <rect x={tipX} y={tipY} width={tooltipW} height={tooltipH} rx={10} />
+          </clipPath>
           <rect
             x={tipX}
             y={tipY}
             width={tooltipW}
             height={tooltipH}
             rx={10}
-            fill="var(--bg-card)"
+            fill="#1e293b"
             stroke={tc}
             strokeWidth={1.5}
             filter="url(#tt-shadow)"
           />
-          <rect x={tipX} y={tipY} width={4} height={tooltipH} rx={4} fill={tc} />
-          <text x={tipX + 14} y={tipY + 19} fill="var(--text-secondary)" fontSize="11" fontWeight="500">
+          <rect x={tipX} y={tipY} width={5} height={tooltipH} fill={tc} clipPath="url(#tt-clip)" />
+          <text x={tipX + 14} y={tipY + 19} fill="#94a3b8" fontSize="11" fontWeight="500">
             {tooltip.label}
           </text>
           <text x={tipX + 14} y={tipY + 39} fill={tc} fontSize="19" fontWeight="800">
             {tooltip.value}
-            <tspan fill="var(--text-muted)" fontSize="11" fontWeight="400">
+            <tspan fill="#475569" fontSize="11" fontWeight="400">
               {" "}
               / 4
             </tspan>
           </text>
           <polygon
             points={`${tipX + tooltipW / 2 - 7},${tipY + tooltipH} ${tipX + tooltipW / 2 + 7},${tipY + tooltipH} ${tipX + tooltipW / 2},${tipY + tooltipH + 10}`}
-            fill="var(--bg-card)"
+            fill="#1e293b"
             stroke={tc}
             strokeWidth={1.5}
             strokeLinejoin="round"
           />
           <polygon
             points={`${tipX + tooltipW / 2 - 5},${tipY + tooltipH - 1} ${tipX + tooltipW / 2 + 5},${tipY + tooltipH - 1} ${tipX + tooltipW / 2},${tipY + tooltipH + 8}`}
-            fill="var(--bg-card)"
+            fill="#1e293b"
           />
         </g>
       )}