fix(charts): replace hsl(var(--token)) with bare var(--token) refs

The Dracula tokens are stored as hex values; wrapping them in
hsl() yielded an invalid CSS color string that the browser fell
back from to default. Mirrors the W10 reconcile-A C1 fix already
applied to the sleep-stage chart. Three call sites remained:
mood-chart CartesianGrid stroke, scatter-correlation CartesianGrid
stroke, and the scatter-correlation tooltip background + border.

src/components/charts/mood-chart.tsx

@@ -646,7 +646,7 @@ export function MoodChart({
                     so the trends row reads as a single rhythm. */}
                 <CartesianGrid
                   strokeDasharray="3 3"
-                  stroke="hsl(var(--border))"
+                  stroke="var(--border)"
                   opacity={0.5}
                   horizontalCoordinatesGenerator={({ offset }) => {
                     // `offset` carries the chart's plot-area metrics.

src/components/charts/scatter-correlation-chart.tsx

@@ -86,7 +86,7 @@ export function ScatterCorrelationChart<T extends Record<string, number>>({
     <div className="touch-pan-y" style={{ height }}>
       <ResponsiveContainer width="100%" height="100%">
         <ScatterChart margin={{ top: 10, right: 20, bottom: 36, left: 12 }}>
-          <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
           <XAxis
             dataKey={xAxis.dataKey}
             type="number"
@@ -125,8 +125,8 @@ export function ScatterCorrelationChart<T extends Record<string, number>>({
           />
           <Tooltip
             contentStyle={{
-              backgroundColor: "hsl(var(--card))",
-              border: "1px solid hsl(var(--border))",
+              backgroundColor: "var(--card)",
+              border: "1px solid var(--border)",
               borderRadius: "0.5rem",
               fontSize: "0.75rem",
             }}