fix(insights): pass theme tokens instead of raw hex on four HealthKit metric pages

grip-strength, waist, waist-to-height, and pain shipped stock hex chart
colours (#22c55e / #0ea5e9 / #8b5cf6 / #f97316) while every sibling page
passes var(--token) — the four charts ignored both themes and any token
retune. Map them to var(--success) / var(--info) / var(--chart-1) /
var(--warning) and narrow the scaffold's color prop to a `var(--…)`
template-literal type so a raw hex no longer typechecks.

src/app/insights/grip-strength/page.tsx

@@ -22,7 +22,7 @@ export default function InsightsGripStrengthPage() {
       insightMetric="GRIP_STRENGTH"
       chartKey="gripStrength"
       i18nPrefix="insights.gripStrength"
-      color="#22c55e"
+      color="var(--success)"
       unit="kg"
       yAxisUnit="kg"
       statIcon={Dumbbell}

src/app/insights/pain/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsPainPage() {
       insightMetric="PAIN_NRS"
       chartKey="painNrs"
       i18nPrefix="insights.pain"
-      color="#f97316"
+      color="var(--warning)"
       unit=""
       yAxisUnit="/10"
       statIcon={Activity}

src/app/insights/waist-to-height/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsWaistToHeightPage() {
       insightMetric="WAIST_TO_HEIGHT"
       chartKey="waistToHeight"
       i18nPrefix="insights.waistToHeight"
-      color="#8b5cf6"
+      color="var(--chart-1)"
       unit=""
       statIcon={Scaling}
       emptyStateIcon={<Scaling className="size-6" />}

src/app/insights/waist/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsWaistPage() {
       insightMetric="WAIST_CIRCUMFERENCE"
       chartKey="waistCircumference"
       i18nPrefix="insights.waist"
-      color="#0ea5e9"
+      color="var(--info)"
       unit="cm"
       yAxisUnit="cm"
       statIcon={Ruler}

src/components/insights/__tests__/healthkit-metric-page-status.test.tsx

@@ -70,7 +70,7 @@ const baseProps = {
   insightMetric: "HEART_RATE_VARIABILITY" as const,
   chartKey: "hrv" as const,
   i18nPrefix: "insights.hrv",
-  color: "#bd93f9",
+  color: "var(--chart-1)" as const,
   unit: "ms",
   emptyStateIcon: null,
 };

src/components/insights/healthkit-metric-page.tsx

@@ -82,8 +82,13 @@ export interface HealthKitMetricPageProps {
    * sub-key off the prefix.
    */
   i18nPrefix: string;
-  /** Single canonical colour for the chart line. */
-  color: string;
+  /**
+   * Single canonical colour for the chart line. Typed as a `var(--…)`
+   * template so pages can only pass a theme token (`"var(--success)"`),
+   * never a raw hex — raw stock hex ignores both themes and every future
+   * token retune (see UI standards, colour token rules).
+   */
+  color: `var(--${string})`;
   /** Unit suffix the chart renders next to the value. */
   unit: string;
   /** Optional y-axis label shown above the unit. */