style(chart): open chart pages and surface/track tokens

- @hm-design/chart: add --hm-chart-track (radial tracks, horizontal bar
  hover band; warm neutral light) and --hm-chart-surface (slice / segment
  gaps, Dot rings, label halos, radial meter center; white by default)
- --hm-chart-bar-name-halo stays an optional override and falls back to
  --hm-chart-surface; official chart.tsx unchanged
- Storybook Chart pages (Bar / Line / Area / Donut / Pie / Radar / Radial):
  open layout without example cards, 2-4 responsive columns, one sample
  data notice per page, surface token set to the content background
- Same sample data, props, tooltip and interaction as the example cards;
  examples entry and consumer example unchanged
- README: surface / track token usage

packages/chart/src/components/donut-chart.tsx

@@ -165,7 +165,7 @@ export function HMDonutChart({ data, totalLabel, activeId, onActiveChange, label
           // Room for the active slice to grow outwards without leaving the chart.
           outerRadius={ring.outer}
           paddingAngle={paddingAngle(selectable)}
-          stroke="var(--hm-sem-bg-surface)"
+          stroke="var(--hm-chart-surface)"
           strokeWidth={2}
           onClick={onActiveChange ? (_slice, index) => onActiveChange(data[index].id) : undefined}
           shape={(props: PieSectorShapeProps, index: number) => (

packages/chart/src/components/line-points.tsx

@@ -50,7 +50,7 @@ export function PointDot({
       cy={y}
       r={radius}
       fill={pointColor(payload, colorKey, fallback)}
-      stroke="var(--hm-sem-bg-surface)"
+      stroke="var(--hm-chart-surface)"
       strokeWidth={2}
     />
   )

packages/chart/src/components/pie-chart.tsx

@@ -126,7 +126,7 @@ export function HMPieChart({ data, labels, label, className }: HMPieChartProps)
           dataKey="value"
           nameKey="id"
           outerRadius={outside ? "58%" : "80%"}
-          stroke="var(--hm-sem-bg-surface)"
+          stroke="var(--hm-chart-surface)"
           strokeWidth={2}
           label={
             outside ? <PieOutsideLabel items={data} /> : labels === "inside" ? <PieSliceLabel items={data} /> : false
@@ -185,8 +185,8 @@ export function HMStackedPieChart({ rings, label, className }: HMStackedPieChart
       <PieChart accessibilityLayer>
         <ChartTooltip content={<RingTooltip />} />
         <ChartLegend itemSorter={null} content={<RingLegend rings={rings} items={items} />} />
-        <Pie data={slices[0]} dataKey="value" nameKey="id" outerRadius="46%" stroke="var(--hm-sem-bg-surface)" strokeWidth={2} />
-        <Pie data={slices[1]} dataKey="value" nameKey="id" innerRadius="54%" outerRadius="76%" stroke="var(--hm-sem-bg-surface)" strokeWidth={2} />
+        <Pie data={slices[0]} dataKey="value" nameKey="id" outerRadius="46%" stroke="var(--hm-chart-surface)" strokeWidth={2} />
+        <Pie data={slices[1]} dataKey="value" nameKey="id" innerRadius="54%" outerRadius="76%" stroke="var(--hm-chart-surface)" strokeWidth={2} />
       </PieChart>
     </ChartContainer>
   )

packages/chart/src/components/radial-chart.tsx

@@ -193,12 +193,12 @@ export function HMRadialMeterChart({
   return (
     <ChartContainer config={config} role="group" aria-label={label} className={cn(CHART_BOX, className)}>
       <RadialBarChart data={[row]} startAngle={startAngle} endAngle={endAngle} innerRadius={innerRadius} outerRadius={outerRadius}>
-        {/* Official: the first circle is the muted track, the second (smaller) one is the surface color that cuts it into a ring. */}
+        {/* Official: the first circle is the track (official muted, HM --hm-chart-track), the second (smaller) one is the chart surface color that cuts it into a ring. */}
         <PolarGrid
           gridType="circle"
           radialLines={false}
           stroke="none"
-          className="first:fill-muted last:fill-[var(--hm-sem-bg-surface)]"
+          className="first:fill-[var(--hm-chart-track)] last:fill-[var(--hm-chart-surface)]"
           polarRadius={[...trackRadii]}
         />
         <PolarAngleAxis type="number" domain={[0, maxOf([item.value])]} tick={false} axisLine={false} />
@@ -269,7 +269,7 @@ export function HMRadialStackedChart({
               stackId="a"
               fill={`var(--color-${item.key})`}
               cornerRadius={5}
-              stroke="var(--hm-sem-bg-surface)"
+              stroke="var(--hm-chart-surface)"
               strokeWidth={2}
             />
           ))}

packages/chart/src/components/solid-chart.tsx

@@ -89,7 +89,7 @@ function SolidSlice({ sector, hole, sideColor, topColor, center }: SolidSlicePro
   const frontTo = Math.min(to, 360)
   const backFrom = Math.max(from, 0)
   const backTo = Math.min(to, 180)
-  const seam = "var(--hm-sem-bg-surface)"
+  const seam = "var(--hm-chart-surface)"
   // The seam between slices is a surface-colored stroke; on a very thin slice it thins out so the slice stays visible.
   const arcPx = (to - from) * RAD * p.rx
   const seamTop = arcPx < 4 ? 0.5 : arcPx < 10 ? 1 : 2