refactor(insights): route metric-page and chart colors through theme tokens

The per-metric reference bands, chart palettes, and status tints across
the insights pages and shared charts carried hardcoded hex that glared
on the light theme. Route them through the semantic and chart CSS
variables; dark rendering stays byte-identical, light gets the muted set.

src/app/insights/active-energy/page.tsx

@@ -22,7 +22,7 @@ export default function InsightsActiveEnergyPage() {
       chartKey="activeEnergy"
       i18nPrefix="insights.activeEnergy"
       explainerMetric="activeEnergy"
-      color="#ffb86c"
+      color="var(--warning)"
       unit="kcal"
       yAxisUnit="kcal"
       emptyStateIcon={<Flame className="size-6" />}

src/app/insights/audio-events/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsLaermereignissePage() {
       chartKey="audioExposureEvent"
       i18nPrefix="insights.audioExposureEvent"
       explainerMetric="audioEvents"
-      color="#ff79c6"
+      color="var(--chart-3)"
       unit=""
       yAxisUnit=""
       emptyStateIcon={<Volume2 className="size-6" />}

src/app/insights/blood-glucose/page.tsx

@@ -51,7 +51,7 @@ export default function InsightsBlutzuckerPage() {
       chartKey="bloodGlucose"
       i18nPrefix="insights.bloodGlucose"
       explainerMetric="bloodGlucose"
-      color="#ff79c6"
+      color="var(--chart-3)"
       unit={glucoseUnit}
       yAxisUnit={glucoseUnit}
       // mmol/L = mg/dL ÷ 18.0182; the chart's valueScale multiplies, so pass

src/app/insights/blood-pressure/page.tsx

@@ -88,19 +88,19 @@ export default function InsightsBlutdruckPage() {
         {
           min: bpTargets.sysLow,
           max: bpTargets.sysHigh,
-          color: "#ff79c6",
+          color: "var(--chart-3)",
           opacity: 0.21,
           label: t("charts.systolic"),
-          textColor: "#ff79c6",
+          textColor: "var(--chart-3)",
           lineOpacity: 0.24,
         },
         {
           min: bpTargets.diaLow,
           max: bpTargets.diaHigh,
-          color: "#8be9fd",
+          color: "var(--info)",
           opacity: 0.21,
           label: t("charts.diastolic"),
-          textColor: "#8be9fd",
+          textColor: "var(--info)",
           lineOpacity: 0.24,
         },
       ]
@@ -164,7 +164,7 @@ export default function InsightsBlutdruckPage() {
         types={["BLOOD_PRESSURE_SYS", "BLOOD_PRESSURE_DIA"]}
         title={t("charts.bloodPressure")}
         titleIcon={HeartPulse}
-        colors={["#ff79c6", "#8be9fd"]}
+        colors={["var(--chart-3)", "var(--info)"]}
         unit="mmHg"
         yAxisUnit="mmHg"
         targetZones={bpTargetZones}

src/app/insights/bmi/page.tsx

@@ -31,11 +31,11 @@ import { SubPageShell } from "@/components/insights/sub-page-shell";
  * the CTA targets `/settings/account`, not the measurement onboarding.
  */
 const BMI_BANDS = [
-  { min: 0, max: 17, color: "#ff5555", opacity: 0.16 },
-  { min: 17, max: 18.5, color: "#ffb86c", opacity: 0.18 },
-  { min: 18.5, max: 24.9, color: "#50fa7b", opacity: 0.2 },
-  { min: 24.9, max: 29.9, color: "#ffb86c", opacity: 0.18 },
-  { min: 29.9, max: 120, color: "#ff5555", opacity: 0.16 },
+  { min: 0, max: 17, color: "var(--destructive)", opacity: 0.16 },
+  { min: 17, max: 18.5, color: "var(--warning)", opacity: 0.18 },
+  { min: 18.5, max: 24.9, color: "var(--success)", opacity: 0.2 },
+  { min: 24.9, max: 29.9, color: "var(--warning)", opacity: 0.18 },
+  { min: 29.9, max: 120, color: "var(--destructive)", opacity: 0.16 },
 ];
 
 export default function InsightsBmiPage() {
@@ -117,7 +117,7 @@ export default function InsightsBmiPage() {
         chartKey="bmi"
         types={["WEIGHT"]}
         title={t("targets.bmi")}
-        colors={["#f1fa8c"]}
+        colors={["var(--dracula-yellow)"]}
         unit="kg/m²"
         valueMode="bmi"
         valueBands={BMI_BANDS}

src/app/insights/body-temperature/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsBodyTemperaturePage() {
       chartKey="bodyTemperature"
       i18nPrefix="insights.bodyTemperature"
       explainerMetric="bodyTemperature"
-      color="#ff79c6"
+      color="var(--chart-3)"
       unit="°C"
       yAxisUnit="°C"
       emptyStateIcon={<Thermometer className="size-6" />}

src/app/insights/body-water/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsKoerperwasserPage() {
       chartKey="totalBodyWater"
       i18nPrefix="insights.totalBodyWater"
       explainerMetric="bodyWater"
-      color="#8be9fd"
+      color="var(--info)"
       unit="kg"
       yAxisUnit="kg"
       emptyStateIcon={<Droplet className="size-6" />}

src/app/insights/bone-mass/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsKnochenmassePage() {
       chartKey="boneMass"
       i18nPrefix="insights.boneMass"
       explainerMetric="boneMass"
-      color="#ffb86c"
+      color="var(--warning)"
       unit="kg"
       yAxisUnit="kg"
       emptyStateIcon={<Bone className="size-6" />}

src/app/insights/breathing-disturbances/page.tsx

@@ -20,7 +20,7 @@ export default function InsightsBreathingDisturbancesPage() {
       chartKey="breathingDisturbances"
       i18nPrefix="insights.breathingDisturbances"
       explainerMetric="breathingDisturbances"
-      color="#8be9fd"
+      color="var(--info)"
       unit="count"
       yAxisUnit="count"
       emptyStateIcon={<Wind className="size-6" />}

src/app/insights/cardio-fitness/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsCardioFitnessPage() {
       chartKey="vo2Max"
       i18nPrefix="insights.cardioFitness"
       explainerMetric="cardioFitness"
-      color="#bd93f9"
+      color="var(--chart-1)"
       unit="mL/(kg·min)"
       yAxisUnit="mL/(kg·min)"
       statIcon={Gauge}

src/app/insights/cardio-recovery/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsCardioRecoveryPage() {
       chartKey="cardioRecovery"
       i18nPrefix="insights.cardioRecovery"
       explainerMetric="cardioRecovery"
-      color="#ff79c6"
+      color="var(--chart-3)"
       unit="bpm"
       yAxisUnit="bpm"
       emptyStateIcon={<HeartPulse className="size-6" />}

src/app/insights/daylight/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsTageslichtPage() {
       chartKey="timeInDaylight"
       i18nPrefix="insights.timeInDaylight"
       explainerMetric="daylight"
-      color="#50fa7b"
+      color="var(--success)"
       unit="min"
       yAxisUnit="min"
       emptyStateIcon={<Sun className="size-6" />}

src/app/insights/double-support-time/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsDoppelstandphasePage() {
       chartKey="walkingDoubleSupport"
       i18nPrefix="insights.walkingDoubleSupport"
       explainerMetric="doubleSupportTime"
-      color="#50fa7b"
+      color="var(--success)"
       unit="%"
       yAxisUnit="%"
       emptyStateIcon={<Footprints className="size-6" />}

src/app/insights/environmental-audio/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsLaermbelastungPage() {
       chartKey="audioExposureEnv"
       i18nPrefix="insights.audioExposureEnv"
       explainerMetric="environmentalAudio"
-      color="#ff79c6"
+      color="var(--chart-3)"
       unit="dBA"
       yAxisUnit="dBA"
       emptyStateIcon={<Volume2 className="size-6" />}

src/app/insights/falls/page.tsx

@@ -19,7 +19,7 @@ export default function InsightsFallsPage() {
       chartKey="fallCount"
       i18nPrefix="insights.falls"
       explainerMetric="falls"
-      color="#ff5555"
+      color="var(--destructive)"
       unit="falls"
       yAxisUnit="falls"
       emptyStateIcon={<PersonStanding className="size-6" />}

src/app/insights/fat-free-mass/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsFettfreieMassePage() {
       chartKey="fatFreeMass"
       i18nPrefix="insights.fatFreeMass"
       explainerMetric="fatFreeMass"
-      color="#bd93f9"
+      color="var(--chart-1)"
       unit="kg"
       yAxisUnit="kg"
       emptyStateIcon={<Scale className="size-6" />}

src/app/insights/fat-mass/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsFettmassePage() {
       chartKey="fatMass"
       i18nPrefix="insights.fatMass"
       explainerMetric="fatMass"
-      color="#ffb86c"
+      color="var(--warning)"
       unit="kg"
       yAxisUnit="kg"
       emptyStateIcon={<Droplets className="size-6" />}

src/app/insights/flights-climbed/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsStockwerkePage() {
       chartKey="flightsClimbed"
       i18nPrefix="insights.flightsClimbed"
       explainerMetric="flightsClimbed"
-      color="#50fa7b"
+      color="var(--success)"
       unit="flights"
       yAxisUnit="flights"
       emptyStateIcon={<TrendingUp className="size-6" />}

src/app/insights/headphone-audio/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsKopfhoererpegelPage() {
       chartKey="audioExposureHeadphone"
       i18nPrefix="insights.audioExposureHeadphone"
       explainerMetric="headphoneAudio"
-      color="#ff79c6"
+      color="var(--chart-3)"
       unit="dBA"
       yAxisUnit="dBA"
       emptyStateIcon={<Headphones className="size-6" />}

src/app/insights/hrv/page.tsx

@@ -27,7 +27,7 @@ export default function InsightsHrvPage() {
       chartKey="hrv"
       i18nPrefix="insights.hrv"
       explainerMetric="hrv"
-      color="#bd93f9"
+      color="var(--chart-1)"
       unit="ms"
       yAxisUnit="ms"
       emptyStateIcon={<Activity className="size-6" />}

src/app/insights/lean-body-mass/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsMagermassePage() {
       chartKey="leanBodyMass"
       i18nPrefix="insights.leanBodyMass"
       explainerMetric="leanBodyMass"
-      color="#bd93f9"
+      color="var(--chart-1)"
       unit="kg"
       yAxisUnit="kg"
       emptyStateIcon={<Scale className="size-6" />}

src/app/insights/muscle-mass/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsMuskelmassePage() {
       chartKey="muscleMass"
       i18nPrefix="insights.muscleMass"
       explainerMetric="muscleMass"
-      color="#bd93f9"
+      color="var(--chart-1)"
       unit="kg"
       yAxisUnit="kg"
       emptyStateIcon={<Dumbbell className="size-6" />}

src/app/insights/oxygen/page.tsx

@@ -23,16 +23,16 @@ export default function InsightsOxygenSaturationPage() {
       chartKey="oxygenSaturation"
       i18nPrefix="insights.oxygenSaturation"
       explainerMetric="oxygenSaturation"
-      color="#8be9fd"
+      color="var(--info)"
       unit="%"
       yAxisUnit="%"
       valueBands={[
         // < 90 % — clinical hypoxia floor, paint the danger band.
-        { min: 80, max: 90, color: "#ff5555", opacity: 0.18 },
+        { min: 80, max: 90, color: "var(--destructive)", opacity: 0.18 },
         // 90 .. 95 % — watch zone.
-        { min: 90, max: 95, color: "#ffb86c", opacity: 0.18 },
+        { min: 90, max: 95, color: "var(--warning)", opacity: 0.18 },
         // 95 .. 100 % — clinical normal.
-        { min: 95, max: 100, color: "#50fa7b", opacity: 0.18 },
+        { min: 95, max: 100, color: "var(--success)", opacity: 0.18 },
       ]}
       emptyStateIcon={<Wind className="size-6" />}
       emptyStateCtaType={null}

src/app/insights/pulse-wave-velocity/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsPulswellengeschwindigkeitPage() {
       chartKey="pulseWaveVelocity"
       i18nPrefix="insights.pulseWaveVelocity"
       explainerMetric="pulseWaveVelocity"
-      color="#ff5555"
+      color="var(--destructive)"
       unit="m/s"
       yAxisUnit="m/s"
       emptyStateIcon={<Activity className="size-6" />}

src/app/insights/pulse/page.tsx

@@ -98,26 +98,36 @@ export default function InsightsPulsPage() {
     (user?.gender as "MALE" | "FEMALE" | null | undefined) ?? null,
   );
   const pulseBands = [
-    { min: 30, max: pulseTarget.orangeMin, color: "#ff5555", opacity: 0.16 },
+    {
+      min: 30,
+      max: pulseTarget.orangeMin,
+      color: "var(--destructive)",
+      opacity: 0.16,
+    },
     {
       min: pulseTarget.orangeMin,
       max: pulseTarget.greenMin,
-      color: "#ffb86c",
+      color: "var(--warning)",
       opacity: 0.18,
     },
     {
       min: pulseTarget.greenMin,
       max: pulseTarget.greenMax,
-      color: "#50fa7b",
+      color: "var(--success)",
       opacity: 0.2,
     },
     {
       min: pulseTarget.greenMax,
       max: pulseTarget.orangeMax,
-      color: "#ffb86c",
+      color: "var(--warning)",
       opacity: 0.18,
     },
-    { min: pulseTarget.orangeMax, max: 220, color: "#ff5555", opacity: 0.16 },
+    {
+      min: pulseTarget.orangeMax,
+      max: 220,
+      color: "var(--destructive)",
+      opacity: 0.16,
+    },
   ].filter((band) => band.max > band.min);
 
   return (
@@ -156,7 +166,7 @@ export default function InsightsPulsPage() {
         types={hasRestingHr ? ["RESTING_HEART_RATE"] : ["PULSE"]}
         title={t("charts.pulse")}
         titleIcon={Heart}
-        colors={["#50fa7b"]}
+        colors={["var(--success)"]}
         unit="bpm"
         valueBands={hasRestingHr ? pulseBands : undefined}
         compareBaseline={compareBaseline}

src/app/insights/respiratory-rate/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsAtemfrequenzPage() {
       chartKey="respiratoryRate"
       i18nPrefix="insights.respiratoryRate"
       explainerMetric="respiratoryRate"
-      color="#8be9fd"
+      color="var(--info)"
       unit="breaths/min"
       yAxisUnit="breaths/min"
       emptyStateIcon={<Wind className="size-6" />}

src/app/insights/resting-pulse/page.tsx

@@ -24,7 +24,7 @@ export default function InsightsRestingHrPage() {
       chartKey="restingHr"
       i18nPrefix="insights.restingHr"
       explainerMetric="restingHr"
-      color="#ff5555"
+      color="var(--destructive)"
       unit="bpm"
       yAxisUnit="bpm"
       emptyStateIcon={<Heart className="size-6" />}

src/app/insights/six-minute-walk/page.tsx

@@ -20,7 +20,7 @@ export default function InsightsSixMinuteWalkPage() {
       chartKey="sixMinuteWalkDistance"
       i18nPrefix="insights.sixMinuteWalk"
       explainerMetric="sixMinuteWalk"
-      color="#50fa7b"
+      color="var(--success)"
       unit="m"
       yAxisUnit="m"
       emptyStateIcon={<Footprints className="size-6" />}

src/app/insights/skin-temperature/page.tsx

@@ -29,7 +29,7 @@ export default function InsightsHauttemperaturPage() {
       chartKey="skinTemperature"
       i18nPrefix="insights.skinTemperature"
       explainerMetric="skinTemperature"
-      color="#ffb86c"
+      color="var(--warning)"
       unit="°C"
       yAxisUnit="°C"
       emptyStateIcon={<Thermometer className="size-6" />}
@@ -40,7 +40,7 @@ export default function InsightsHauttemperaturPage() {
           type="BODY_TEMPERATURE_DEVIATION"
           title={t("measurements.typeBodyTemperatureDeviation")}
           icon={ThermometerSnowflake}
-          color="#8be9fd"
+          color="var(--info)"
           unit="°C"
           fractionDigits={2}
           sectionTitle={t("insights.bodyTempDeviation.title")}

src/app/insights/stair-ascent-speed/page.tsx

@@ -20,7 +20,7 @@ export default function InsightsStairAscentSpeedPage() {
       chartKey="stairAscentSpeed"
       i18nPrefix="insights.stairAscentSpeed"
       explainerMetric="stairAscentSpeed"
-      color="#50fa7b"
+      color="var(--success)"
       unit="m/s"
       yAxisUnit="m/s"
       emptyStateIcon={<Gauge className="size-6" />}

src/app/insights/stair-descent-speed/page.tsx

@@ -20,7 +20,7 @@ export default function InsightsStairDescentSpeedPage() {
       chartKey="stairDescentSpeed"
       i18nPrefix="insights.stairDescentSpeed"
       explainerMetric="stairDescentSpeed"
-      color="#50fa7b"
+      color="var(--success)"
       unit="m/s"
       yAxisUnit="m/s"
       emptyStateIcon={<Gauge className="size-6" />}

src/app/insights/step-length/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsSchrittlaengePage() {
       chartKey="walkingStepLength"
       i18nPrefix="insights.walkingStepLength"
       explainerMetric="stepLength"
-      color="#50fa7b"
+      color="var(--success)"
       unit="m"
       yAxisUnit="m"
       emptyStateIcon={<Footprints className="size-6" />}

src/app/insights/steps/page.tsx

@@ -26,7 +26,7 @@ export default function InsightsStepsPage() {
       i18nPrefix="insights.steps"
       explainerMetric="steps"
       statIcon={Footprints}
-      color="#50fa7b"
+      color="var(--success)"
       unit="steps"
       yAxisUnit="steps"
       emptyStateIcon={<Footprints className="size-6" />}

src/app/insights/vascular-age/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsGefaessalterPage() {
       chartKey="vascularAge"
       i18nPrefix="insights.vascularAge"
       explainerMetric="vascularAge"
-      color="#ff79c6"
+      color="var(--chart-3)"
       unit="years"
       yAxisUnit="years"
       emptyStateIcon={<HeartPulse className="size-6" />}

src/app/insights/visceral-fat/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsViszeralfettPage() {
       chartKey="visceralFat"
       i18nPrefix="insights.visceralFat"
       explainerMetric="visceralFat"
-      color="#ffb86c"
+      color="var(--warning)"
       unit=""
       yAxisUnit=""
       emptyStateIcon={<Droplets className="size-6" />}

src/app/insights/walking-asymmetry/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsGangasymmetriePage() {
       chartKey="walkingAsymmetry"
       i18nPrefix="insights.walkingAsymmetry"
       explainerMetric="walkingAsymmetry"
-      color="#50fa7b"
+      color="var(--success)"
       unit="%"
       yAxisUnit="%"
       emptyStateIcon={<Footprints className="size-6" />}

src/app/insights/walking-distance/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsGehstreckePage() {
       chartKey="walkingRunningDistance"
       i18nPrefix="insights.walkingRunningDistance"
       explainerMetric="walkingDistance"
-      color="#50fa7b"
+      color="var(--success)"
       unit="km"
       yAxisUnit="km"
       // Stored in metres; display daily totals in km (1 m = 0.001 km).

src/app/insights/walking-heart-rate/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsGehpulsPage() {
       chartKey="walkingHeartRateAverage"
       i18nPrefix="insights.walkingHeartRateAverage"
       explainerMetric="walkingHeartRate"
-      color="#ff5555"
+      color="var(--destructive)"
       unit="bpm"
       yAxisUnit="bpm"
       emptyStateIcon={<HeartPulse className="size-6" />}

src/app/insights/walking-speed/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsGehgeschwindigkeitPage() {
       chartKey="walkingSpeed"
       i18nPrefix="insights.walkingSpeed"
       explainerMetric="walkingSpeed"
-      color="#50fa7b"
+      color="var(--success)"
       unit="km/h"
       yAxisUnit="km/h"
       valueScale={3.6}

src/app/insights/walking-steadiness/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsGangstabilitaetPage() {
       chartKey="walkingSteadiness"
       i18nPrefix="insights.walkingSteadiness"
       explainerMetric="walkingSteadiness"
-      color="#50fa7b"
+      color="var(--success)"
       unit="%"
       yAxisUnit="%"
       emptyStateIcon={<Gauge className="size-6" />}

src/app/insights/weight/page.tsx

@@ -104,7 +104,7 @@ export default function InsightsGewichtPage() {
         types={["WEIGHT"]}
         title={t("charts.weight")}
         titleIcon={Scale}
-        colors={["#bd93f9"]}
+        colors={["var(--chart-1)"]}
         unit="kg"
         valueBands={weightBands}
         compareBaseline={compareBaseline}

src/app/insights/wrist-temperature/page.tsx

@@ -21,7 +21,7 @@ export default function InsightsWristTemperaturePage() {
       chartKey="wristTemperature"
       i18nPrefix="insights.wristTemperature"
       explainerMetric="wristTemperature"
-      color="#ffb86c"
+      color="var(--warning)"
       unit="°C"
       yAxisUnit="°C"
       emptyStateIcon={<Thermometer className="size-6" />}

src/components/charts/__tests__/health-chart-vertical-markers.test.ts

@@ -46,7 +46,7 @@ describe("resolveVerticalMarkerPositions", () => {
     );
     expect(positions).toHaveLength(1);
     expect(positions[0].pointIndex).toBe(0);
-    expect(positions[0].color).toBe("#50fa7b");
+    expect(positions[0].color).toBe("var(--success)");
     expect(positions[0].label).toBeUndefined();
   });
 
@@ -69,7 +69,7 @@ describe("resolveVerticalMarkerPositions", () => {
     expect(positions[0].color).toBe("#ff79c6");
     expect(positions[0].label).toBe("Mounjaro 7.5");
     // Default color preserved for the second marker.
-    expect(positions[1].color).toBe("#50fa7b");
+    expect(positions[1].color).toBe("var(--success)");
     expect(positions[1].label).toBeUndefined();
   });
 

src/components/charts/health-chart.tsx

@@ -190,7 +190,7 @@ interface HealthChartProps {
    *   2. A small filled dot sits at the x-axis intersection (mood-
    *      chart style emoji-on-axis pattern repurposed) so a row of
    *      green dots reads as "injection cadence" at a glance.
-   *   3. Default green (`#50fa7b`) to match the strip-tile palette
+   *   3. Default green (`var(--success)`) to match the strip-tile palette
    *      for active medications; callers can override per marker.
    *
    * Off-window markers silently drop via `ifOverflow="discard"`,
@@ -485,7 +485,7 @@ export function resolveVerticalMarkerPositions(
     if (idx === undefined) continue;
     out.push({
       pointIndex: idx,
-      color: marker.color ?? "#50fa7b",
+      color: marker.color ?? "var(--success)",
       label: marker.label,
     });
   }
@@ -570,7 +570,7 @@ function buildTrendSeriesByTime(data: Array<{ date: Date; value: number }>): {
 export function HealthChart({
   types,
   title,
-  colors = ["#bd93f9", "#ff79c6", "#8be9fd"],
+  colors = ["var(--chart-1)", "var(--chart-3)", "var(--chart-4)"],
   unit,
   yAxisUnit,
   valueMode = "raw",

src/components/insights/glucose/glucose-tir-bar.tsx

@@ -16,11 +16,11 @@ import type { TimeInRangeDistribution } from "@/lib/analytics/glucose-metrics";
  */
 
 const BAND_COLORS = {
-  veryLow: "#ff5555", // dracula-red — urgent low
-  low: "#ffb86c", // dracula-orange — low
-  inRange: "#50fa7b", // dracula-green — target
-  high: "#f1fa8c", // dracula-yellow — high
-  veryHigh: "#ff79c6", // dracula-pink — urgent high
+  veryLow: "var(--destructive)", // dracula-red — urgent low
+  low: "var(--warning)", // dracula-orange — low
+  inRange: "var(--success)", // dracula-green — target
+  high: "var(--dracula-yellow)", // dracula-yellow — high
+  veryHigh: "var(--chart-3)", // dracula-pink — urgent high
 } as const;
 
 type BandKey = keyof typeof BAND_COLORS;

src/components/insights/recovery/recovery-section.tsx

@@ -89,7 +89,7 @@ export function RecoverySection() {
           title: t("measurements.typeAnsCharge"),
           explainer: t("insights.recovery.block.ansChargeExplainer"),
           icon: Battery,
-          color: "#50fa7b",
+          color: "var(--success)",
           unit: unitScore,
           fractionDigits: 1,
         },
@@ -105,7 +105,7 @@ export function RecoverySection() {
           title: t("measurements.typeDayStrain"),
           explainer: t("insights.recovery.block.dayStrainExplainer"),
           icon: Gauge,
-          color: "#ffb86c",
+          color: "var(--warning)",
           unit: unitScore,
           fractionDigits: 1,
         },
@@ -116,7 +116,7 @@ export function RecoverySection() {
           title: t("measurements.typeWorkoutStrain"),
           explainer: t("insights.recovery.block.workoutStrainExplainer"),
           icon: Activity,
-          color: "#ff79c6",
+          color: "var(--chart-3)",
           unit: unitScore,
           fractionDigits: 1,
         },
@@ -127,7 +127,7 @@ export function RecoverySection() {
           title: t("measurements.typeCardioLoad"),
           explainer: t("insights.recovery.block.cardioLoadExplainer"),
           icon: TrendingUp,
-          color: "#bd93f9",
+          color: "var(--chart-1)",
           unit: unitScore,
         },
       ],
@@ -142,7 +142,7 @@ export function RecoverySection() {
           title: t("measurements.typeAverageHeartRate"),
           explainer: t("insights.recovery.block.averageHeartRateExplainer"),
           icon: Heart,
-          color: "#8be9fd",
+          color: "var(--info)",
           unit: unitBpm,
         },
         {
@@ -152,7 +152,7 @@ export function RecoverySection() {
           title: t("measurements.typeMaxHeartRate"),
           explainer: t("insights.recovery.block.maxHeartRateExplainer"),
           icon: HeartPulse,
-          color: "#ff5555",
+          color: "var(--destructive)",
           unit: unitBpm,
         },
         {
@@ -162,7 +162,7 @@ export function RecoverySection() {
           title: t("measurements.typeEnergyExpenditureKj"),
           explainer: t("insights.recovery.block.energyExpenditureKjExplainer"),
           icon: Flame,
-          color: "#f1fa8c",
+          color: "var(--dracula-yellow)",
           unit: unitKj,
         },
       ],

src/components/insights/sleep-duration-chart.tsx

@@ -42,7 +42,7 @@ export function SleepDurationChart({
       chartKey="sleep"
       types={["SLEEP_DURATION"]}
       title={t("charts.sleep")}
-      colors={["#8be9fd"]}
+      colors={["var(--info)"]}
       unit="h"
       yAxisUnit="h"
       compareBaseline={compareBaseline}

src/components/insights/sleep-stage-stacked-bar.tsx

@@ -89,11 +89,11 @@ export const STAGE_ORDER = ["DEEP", "REM", "CORE", "ASLEEP", "AWAKE"] as const;
  * charts-visual-identity rule, no token reshuffle.
  */
 export const STAGE_COLORS: Record<string, string> = {
-  DEEP: "#bd93f9", // dracula-purple — deepest, most restorative
-  REM: "#ff79c6", // dracula-pink — dream phase
-  CORE: "#8be9fd", // dracula-cyan — bulk of sleep
-  ASLEEP: "#50fa7b", // dracula-green — legacy iOS 15- unspecified
-  AWAKE: "#f1fa8c", // dracula-yellow — wake bouts
+  DEEP: "var(--chart-1)", // dracula-purple — deepest, most restorative
+  REM: "var(--chart-3)", // dracula-pink — dream phase
+  CORE: "var(--info)", // dracula-cyan — bulk of sleep
+  ASLEEP: "var(--success)", // dracula-green — legacy iOS 15- unspecified
+  AWAKE: "var(--dracula-yellow)", // dracula-yellow — wake bouts
   IN_BED: "#6272a4", // dracula-comment — pre-asleep
 };
 

src/components/insights/sleep/sleep-quality-section.tsx

@@ -57,42 +57,42 @@ export function SleepQualitySection({ enabled }: { enabled: boolean }) {
       type: "SLEEP_SCORE",
       title: t("measurements.typeSleepScore"),
       icon: Moon,
-      color: "#bd93f9",
+      color: "var(--chart-1)",
       unit: t("insights.deviceScore.unitScore"),
     },
     {
       type: "SLEEP_PERFORMANCE",
       title: t("measurements.typeSleepPerformance"),
       icon: Target,
-      color: "#8be9fd",
+      color: "var(--info)",
       unit: "%",
     },
     {
       type: "SLEEP_EFFICIENCY",
       title: t("measurements.typeSleepEfficiency"),
       icon: Gauge,
-      color: "#50fa7b",
+      color: "var(--success)",
       unit: "%",
     },
     {
       type: "SLEEP_CONSISTENCY",
       title: t("measurements.typeSleepConsistency"),
       icon: Repeat,
-      color: "#f1fa8c",
+      color: "var(--dracula-yellow)",
       unit: "%",
     },
     {
       type: "SLEEP_NEED",
       title: t("measurements.typeSleepNeed"),
       icon: Waves,
-      color: "#ffb86c",
+      color: "var(--warning)",
       unit: t("insights.deviceScore.unitMinutes"),
     },
     {
       type: "SLEEP_DISTURBANCE_COUNT",
       title: t("measurements.typeSleepDisturbanceCount"),
       icon: Activity,
-      color: "#ff79c6",
+      color: "var(--chart-3)",
     },
   ];