@titan-design/react-ui 0.12.1 → 0.13.0

package/dist/pages.mjs

@@ -1,6 +1,6 @@
-import { createContext, useState, useMemo, useEffect, Fragment as Fragment$1, useSyncExternalStore, useContext, useCallback } from 'react';
+import { createContext, useState, useMemo, useEffect, Fragment, useContext, useCallback } from 'react';
 import { Easing, Platform, View, Text, TextInput, Pressable, Animated, ScrollView } from 'react-native';
-import { Fragment, jsx as jsx$1, jsxs as jsxs$1 } from 'react/jsx-runtime';
+import { Fragment as Fragment$1, jsx as jsx$1, jsxs as jsxs$1 } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
@@ -9,6 +9,7 @@ import { twMerge } from 'tailwind-merge';
 // src/theme/tokens/primitives.ts
 var primitiveColors = {
   white: "#FFFFFF"};
+var alertRedVivid = "#FF4757";
 var greyRamp = {
   50: "#F9F6F3",
   //  L*97.0  W6
@@ -159,11 +160,7 @@ var WORKOUT_TOKENS = {
   intensity: {
     // matches status-error
     over2: primitiveRamps.red[700],
-    over3: primitiveRamps.red[800]},
-  // Placeholder strip
-  placeholder: {
-    fill: "#3A3A3A"
-  }};
+    over3: primitiveRamps.red[800]}};
 
 // src/theme/tokens/semantic.ts
 var semanticColorsLight = {
@@ -172,12 +169,16 @@ var semanticColorsLight = {
   "brand-primary-light": primitiveRamps.orange[300],
   "brand-primary-dark": primitiveRamps.orange[500],
   "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
+  "brand-primary-muted": "rgba(255, 121, 0, 0.30)",
+  "brand-primary-strong": "rgba(255, 121, 0, 0.50)",
   "brand-primary-hover": primitiveRamps.orange[500],
   "brand-primary-active": primitiveRamps.orange[600],
   "brand-secondary": primitiveRamps.cyan[600],
   "brand-secondary-light": primitiveRamps.cyan[500],
   "brand-secondary-dark": primitiveRamps.cyan[700],
   "brand-secondary-subtle": "rgba(48, 123, 155, 0.08)",
+  "brand-secondary-muted": "rgba(48, 123, 155, 0.30)",
+  "brand-secondary-strong": "rgba(48, 123, 155, 0.50)",
   "brand-secondary-hover": primitiveRamps.cyan[700],
   "brand-secondary-active": primitiveRamps.cyan[800],
   // Text on brand backgrounds (on-*)
@@ -188,6 +189,8 @@ var semanticColorsLight = {
   "status-success-light": primitiveRamps.green[200],
   "status-success-dark": primitiveRamps.green[600],
   "status-success-subtle": primitiveRamps.green[50],
+  "status-success-muted": "rgba(46, 213, 115, 0.30)",
+  "status-success-strong": "rgba(46, 213, 115, 0.50)",
   // Live-session accent — its OWN role, decoupled from success so the two can diverge
   "status-live": primitiveRamps.green[300],
   "status-live-muted": primitiveRamps.green[500],
@@ -195,19 +198,27 @@ var semanticColorsLight = {
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
   "status-error-subtle": primitiveRamps.red[50],
-  "status-error-vivid": primitiveRamps.red[600],
-  // vivid alert red
+  "status-error-muted": "rgba(209, 67, 67, 0.30)",
+  "status-error-strong": "rgba(209, 67, 67, 0.50)",
+  "status-error-vivid": alertRedVivid,
+  // NOT red[600], that is status-error
   "status-error-vivid-light": primitiveRamps.red[500],
   "status-error-vivid-dark": primitiveRamps.red[700],
   "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-error-vivid-muted": "rgba(255, 71, 87, 0.30)",
+  "status-error-vivid-strong": "rgba(255, 71, 87, 0.50)",
   "status-warning": primitiveRamps.amber[300],
   "status-warning-light": primitiveRamps.amber[200],
   "status-warning-dark": primitiveRamps.amber[500],
   "status-warning-subtle": primitiveRamps.amber[50],
+  "status-warning-muted": "rgba(249, 180, 21, 0.30)",
+  "status-warning-strong": "rgba(249, 180, 21, 0.50)",
   "status-info": primitiveRamps.blue[500],
   "status-info-light": primitiveRamps.blue[300],
   "status-info-dark": primitiveRamps.blue[600],
   "status-info-subtle": primitiveRamps.blue[50],
+  "status-info-muted": "rgba(33, 150, 243, 0.30)",
+  "status-info-strong": "rgba(33, 150, 243, 0.50)",
   // Text on status backgrounds (on-status-*)
   "on-status-success": primitiveColors.white,
   "on-status-error": primitiveColors.white,
@@ -302,7 +313,7 @@ var semanticColorsLight = {
   "interactive-disabled": "rgba(55, 65, 81, 0.12)",
   "interactive-disabled-text": "rgba(55, 65, 81, 0.26)",
   // Divider
-  "divider": "#E8E9EB",
+  divider: "#E8E9EB",
   // Avatar default
   "avatar-background": greyRamp[600],
   "avatar-text": primitiveColors.white
@@ -313,12 +324,16 @@ var semanticColorsDark = {
   "brand-primary-light": primitiveRamps.orange[300],
   "brand-primary-dark": primitiveRamps.orange[500],
   "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
+  "brand-primary-muted": "rgba(255, 121, 0, 0.30)",
+  "brand-primary-strong": "rgba(255, 121, 0, 0.50)",
   "brand-primary-hover": primitiveRamps.orange[300],
   "brand-primary-active": primitiveRamps.orange[200],
   "brand-secondary": primitiveRamps.cyan[600],
   "brand-secondary-light": primitiveRamps.cyan[500],
   "brand-secondary-dark": primitiveRamps.cyan[700],
   "brand-secondary-subtle": "rgba(48, 123, 155, 0.12)",
+  "brand-secondary-muted": "rgba(48, 123, 155, 0.30)",
+  "brand-secondary-strong": "rgba(48, 123, 155, 0.50)",
   "brand-secondary-hover": primitiveRamps.cyan[500],
   "brand-secondary-active": primitiveRamps.cyan[400],
   // Text on brand backgrounds
@@ -329,6 +344,8 @@ var semanticColorsDark = {
   "status-success-light": primitiveRamps.green[200],
   "status-success-dark": primitiveRamps.green[600],
   "status-success-subtle": "rgba(46, 213, 115, 0.12)",
+  "status-success-muted": "rgba(46, 213, 115, 0.30)",
+  "status-success-strong": "rgba(46, 213, 115, 0.50)",
   // Live-session accent — its OWN role, decoupled from success so the two can diverge
   "status-live": primitiveRamps.green[300],
   "status-live-muted": primitiveRamps.green[500],
@@ -336,18 +353,26 @@ var semanticColorsDark = {
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
   "status-error-subtle": "rgba(209, 67, 67, 0.12)",
-  "status-error-vivid": primitiveRamps.red[600],
+  "status-error-muted": "rgba(209, 67, 67, 0.30)",
+  "status-error-strong": "rgba(209, 67, 67, 0.50)",
+  "status-error-vivid": alertRedVivid,
   "status-error-vivid-light": primitiveRamps.red[500],
   "status-error-vivid-dark": primitiveRamps.red[700],
   "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-error-vivid-muted": "rgba(255, 71, 87, 0.30)",
+  "status-error-vivid-strong": "rgba(255, 71, 87, 0.50)",
   "status-warning": primitiveRamps.amber[300],
   "status-warning-light": primitiveRamps.amber[200],
   "status-warning-dark": primitiveRamps.amber[500],
   "status-warning-subtle": "rgba(249, 180, 21, 0.12)",
+  "status-warning-muted": "rgba(249, 180, 21, 0.30)",
+  "status-warning-strong": "rgba(249, 180, 21, 0.50)",
   "status-info": primitiveRamps.blue[500],
   "status-info-light": primitiveRamps.blue[300],
   "status-info-dark": primitiveRamps.blue[600],
   "status-info-subtle": "rgba(33, 150, 243, 0.12)",
+  "status-info-muted": "rgba(33, 150, 243, 0.30)",
+  "status-info-strong": "rgba(33, 150, 243, 0.50)",
   // Text on status backgrounds
   "on-status-success": primitiveColors.white,
   "on-status-error": primitiveColors.white,
@@ -487,7 +512,7 @@ var semanticColorsDark = {
   "interactive-disabled": "rgba(255, 255, 255, 0.12)",
   "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
   // Divider
-  "divider": "rgba(255, 255, 255, 0.09)",
+  divider: "rgba(255, 255, 255, 0.09)",
   // Avatar default
   "avatar-background": greyRamp[700],
   "avatar-text": primitiveColors.white
@@ -513,79 +538,6 @@ function hexToRgb(hex) {
   }
   return { r, g, b };
 }
-function rgbToHsv(r, g, b) {
-  const rNorm = r / 255;
-  const gNorm = g / 255;
-  const bNorm = b / 255;
-  const max = Math.max(rNorm, gNorm, bNorm);
-  const min = Math.min(rNorm, gNorm, bNorm);
-  const delta = max - min;
-  const v = max;
-  const s = max === 0 ? 0 : delta / max;
-  let h = 0;
-  if (delta !== 0) {
-    if (max === rNorm) {
-      h = 60 * ((gNorm - bNorm) / delta % 6);
-    } else if (max === gNorm) {
-      h = 60 * ((bNorm - rNorm) / delta + 2);
-    } else {
-      h = 60 * ((rNorm - gNorm) / delta + 4);
-    }
-  }
-  if (h < 0) h += 360;
-  return { h, s, v };
-}
-function hsvToRgb(h, s, v) {
-  const c2 = v * s;
-  const x = c2 * (1 - Math.abs(h / 60 % 2 - 1));
-  const m = v - c2;
-  let rPrime, gPrime, bPrime;
-  if (h >= 0 && h < 60) {
-    rPrime = c2;
-    gPrime = x;
-    bPrime = 0;
-  } else if (h >= 60 && h < 120) {
-    rPrime = x;
-    gPrime = c2;
-    bPrime = 0;
-  } else if (h >= 120 && h < 180) {
-    rPrime = 0;
-    gPrime = c2;
-    bPrime = x;
-  } else if (h >= 180 && h < 240) {
-    rPrime = 0;
-    gPrime = x;
-    bPrime = c2;
-  } else if (h >= 240 && h < 300) {
-    rPrime = x;
-    gPrime = 0;
-    bPrime = c2;
-  } else {
-    rPrime = c2;
-    gPrime = 0;
-    bPrime = x;
-  }
-  return {
-    r: Math.round((rPrime + m) * 255),
-    g: Math.round((gPrime + m) * 255),
-    b: Math.round((bPrime + m) * 255)
-  };
-}
-function rgbToHex(r, g, b) {
-  const toHex = (n) => {
-    const clamped = Math.max(0, Math.min(255, Math.round(n)));
-    return clamped.toString(16).padStart(2, "0");
-  };
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-function lighten(hex, amount = 0.1) {
-  const rgb = hexToRgb(hex);
-  if (!rgb) return hex;
-  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-  const newV = Math.min(1, hsv.v + amount);
-  const newRgb = hsvToRgb(hsv.h, hsv.s, newV);
-  return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
-}
 
 // src/utils/colors.ts
 function alpha(color, opacity) {
@@ -632,6 +584,17 @@ function formatVelocity(velocity) {
 function roundTempo(tempo) {
   return tempo.map((v) => Math.round(v * 10) / 10);
 }
+function formatRepsRange(repsLow, repsHigh) {
+  if (repsLow != null && repsHigh != null) {
+    return repsLow === repsHigh ? `${repsLow}` : `${repsLow}\u2013${repsHigh}`;
+  }
+  if (repsLow != null) return `${repsLow}`;
+  if (repsHigh != null) return `${repsHigh}`;
+  return null;
+}
+
+// src/theme/materials.ts
+var c = getSemanticColors("dark");
 function parseHex(hex) {
   const h = hex.replace("#", "");
   const full = h.length === 3 ? h.split("").map((ch) => ch + ch).join("") : h;
@@ -655,12 +618,20 @@ function grainForTone(baseColor) {
   const op = grainOpacityForTone(baseColor).toFixed(3);
   return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='${op}'/%3E%3C/svg%3E")`;
 }
+function insetWell(tone = c["surface-input"]) {
+  return {
+    backgroundColor: tone,
+    boxShadow: "inset 0 2px 6px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,255,255,0.12)"
+  };
+}
 function barPaper(color, flip = false) {
   return {
     backgroundImage: grainForTone(color),
     boxShadow: flip ? "0 -6px 16px rgba(0,0,0,0.45)" : "inset 0 1.5px 0 rgba(255,255,255,0.22), 0 6px 16px rgba(0,0,0,0.45)"
   };
 }
+
+// src/theme/surface-planes.ts
 var SURFACE_LEVEL_TOKEN = {
   frame: "background-frame",
   background: "background-base",
@@ -669,6 +640,30 @@ var SURFACE_LEVEL_TOKEN = {
   raised: "surface-raised",
   overlay: "surface-overlay"
 };
+var PLANE_ORDER = [
+  "frame",
+  "background",
+  "base",
+  "elevated",
+  "raised",
+  "overlay"
+];
+function surfaceBackground(level, mode) {
+  return getSemanticColors(mode)[SURFACE_LEVEL_TOKEN[level]];
+}
+function stepPlane(from, delta) {
+  const index = PLANE_ORDER.indexOf(from);
+  const clamped = Math.min(PLANE_ORDER.length - 1, Math.max(0, index + delta));
+  return PLANE_ORDER[clamped];
+}
+function pressedLevel(parent) {
+  return stepPlane(parent, -1);
+}
+function raisedLevel(parent, steps) {
+  return stepPlane(parent, Math.max(0, steps));
+}
+
+// src/components/ui/surface/SurfaceContext.ts
 var ON_SURFACE_TOKEN = {
   primary: "text-primary",
   secondary: "text-secondary",
@@ -685,9 +680,6 @@ function useSurfaceMode() {
 function useOnSurfaceColor(role = "primary") {
   return getSemanticColors(useSurfaceMode())[ON_SURFACE_TOKEN[role]];
 }
-function surfaceBackground(level, mode) {
-  return getSemanticColors(mode)[SURFACE_LEVEL_TOKEN[level]];
-}
 var ANIMATION_EASING = Easing.bezier(0.22, 1, 0.36, 1);
 var PEAK_OVERSHOOT = 1.12;
 function getReducedMotionPreference() {
@@ -761,14 +753,14 @@ var jsx = wrapJsx(jsx$1);
 var jsxs = wrapJsx(jsxs$1);
 
 // src/components/custom/charts/SetBarChart.tsx
-function mixHex(a, b, t12) {
+function mixHex(a, b, t7) {
   const parse = (h) => {
     const s = h.replace("#", "");
     return [parseInt(s.slice(0, 2), 16), parseInt(s.slice(2, 4), 16), parseInt(s.slice(4, 6), 16)];
   };
   const [ar, ag, ab] = parse(a);
   const [br, bg, bb] = parse(b);
-  const ch = (x, y) => Math.round(x + (y - x) * t12).toString(16).padStart(2, "0");
+  const ch = (x, y) => Math.round(x + (y - x) * t7).toString(16).padStart(2, "0");
   return `#${ch(ar, br)}${ch(ag, bg)}${ch(ab, bb)}`;
 }
 var VARIABLE_FILL = primitiveRamps.cyan[900];
@@ -781,6 +773,13 @@ function scaleDenominator(scale, maxValue) {
 function valueLabelFontSize(height) {
   return Math.round(Math.max(8, Math.min(12, height * 0.11)));
 }
+var LABEL_GLYPH_WIDTH_RATIO = 0.62;
+function estimateValueLabelWidth(text, fontSize) {
+  return text.length * fontSize * LABEL_GLYPH_WIDTH_RATIO;
+}
+function shouldFlipEdgeLabel(roomPx, labelWidthPx) {
+  return labelWidthPx / 2 > roomPx;
+}
 var SET_BAR_DEFAULT_HEIGHT = 220;
 var LABEL_ROW_HEIGHT = 16;
 var LABEL_GAP = 3;
@@ -824,6 +823,7 @@ function SetBarChart({
   flat = false,
   showValueLabels: showValueLabelsProp = false,
   formatValue: formatValue2 = String,
+  flipEdgeLabel = false,
   todoVariant = "solid",
   minColumns,
   renderReference,
@@ -939,6 +939,12 @@ function SetBarChart({
                 }) : isLive ? liveGrowth.interpolate({ inputRange: [0, 1], outputRange: [0, barHeight(value)] }) : barHeight(value);
                 const ownLabel = showValueLabels && !renderBarOverlay && showBarLabel(repIndex);
                 const labelBottom = (expandProgress ? valueBarHeight(best) : barHeight(best)) + LABEL_GAP;
+                const isLastCell = i === cells.length - 1;
+                const labelText = formatValue2(value);
+                const flipLabel = flipEdgeLabel && isLastCell && shouldFlipEdgeLabel(
+                  barWidth / 2,
+                  estimateValueLabelWidth(labelText, valueLabelFontSize(height))
+                );
                 return /* @__PURE__ */ jsxs(View, { accessibilityElementsHidden: renderBarOverlay == null, style: column, children: [
                   ownLabel && // All labels pin to one aligned row JUST ABOVE THE PEAK BAR (not the container top),
                   // in the muted on-surface-secondary tone — so the row hugs the bars, no floating void.
@@ -948,9 +954,8 @@ function SetBarChart({
                       style: {
                         position: "absolute",
                         bottom: labelBottom,
-                        left: 0,
-                        right: 0,
-                        alignItems: "center",
+                        ...flipLabel ? { right: 0 } : { left: 0, right: 0 },
+                        alignItems: flipLabel ? "flex-end" : "center",
                         ...expandProgress ? { opacity: expandProgress } : null
                       },
                       pointerEvents: "none",
@@ -960,7 +965,7 @@ function SetBarChart({
                           className: "text-text-secondary",
                           style: [{ fontSize: valueLabelFontSize(height), fontWeight: "700" }, flipStyle],
                           testID: `${testIDPrefix}-label-${repIndex}`,
-                          children: formatValue2(value)
+                          children: labelText
                         }
                       )
                     }
@@ -1314,7 +1319,7 @@ function VelocityLossBands({
       },
       children: [
         /* @__PURE__ */ jsx(View, { style: { flex: 9, borderTopWidth: 1, borderStyle: "dashed", borderColor: color } }),
-        showLabels ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        showLabels ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
           /* @__PURE__ */ jsx(
             Text,
             {
@@ -1352,7 +1357,7 @@ function VelocityLossBands({
 }
 function velocityReferenceOverlay(g, showLossBands) {
   const referencePx = g.best > 0 && g.scaleDenom > 0 ? Math.min(g.plotHeight, g.yOf(g.best)) : 0;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     showLossBands && /* @__PURE__ */ jsx(
       VelocityLossBands,
       {
@@ -1455,6 +1460,7 @@ function VelocityStrip({
         label,
         showValueLabels: true,
         formatValue: formatVelocity,
+        flipEdgeLabel: columnSlots != null,
         renderReference: (g) => velocityReferenceOverlay(g, lossBandsOn),
         hideBaseline: true,
         testID: "velocity-strip-hero",
@@ -1534,7 +1540,7 @@ function VelocityStrip({
     leadingGap: sl.leadingGap
   })) : doneVelocities.map((v) => ({ kind: "rep", value: v }));
   const needsBarOverlay = showNumbers || onRepPress != null;
-  const renderFramedBarOverlay = needsBarOverlay ? (repIndex, value) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  const renderFramedBarOverlay = needsBarOverlay ? (repIndex, value) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
     showNumbers && /* @__PURE__ */ jsx(
       Animated.View,
       {
@@ -1659,8 +1665,12 @@ function VelocityStrip({
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function resolveColor(token, mode = "dark") {
+  return Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
+}
 
 // src/components/custom/Workout/PlaceholderStrip.tsx
+var RAIL_TOKEN = "border-prominent";
 function SingleStrip({
   width,
   className,
@@ -1673,7 +1683,7 @@ function SingleStrip({
       style: [
         {
           height: 3,
-          backgroundColor: WORKOUT_TOKENS.placeholder.fill,
+          backgroundColor: resolveColor(RAIL_TOKEN),
           borderRadius: 2,
           opacity: 0.5
         },
@@ -1710,7 +1720,7 @@ function SegmentedStrip({
           style: {
             flex: 1,
             height: 3,
-            backgroundColor: WORKOUT_TOKENS.placeholder.fill,
+            backgroundColor: resolveColor(RAIL_TOKEN),
             borderRadius: 1,
             minWidth: 4
           },
@@ -1722,11 +1732,7 @@ function SegmentedStrip({
     }
   );
 }
-function PlaceholderStrip({
-  mode = "single",
-  segments,
-  ...props
-}) {
+function PlaceholderStrip({ mode = "single", segments, ...props }) {
   if (mode === "segmented") {
     return /* @__PURE__ */ jsx(SegmentedStrip, { segments, ...props });
   }
@@ -1885,9 +1891,98 @@ function BaseBadge({
   }
   return badge;
 }
+var variantStyles = {
+  h1: "font-heading text-5xl font-bold leading-tight",
+  h2: "font-heading text-4xl font-bold leading-tight",
+  h3: "font-heading text-3xl font-bold leading-tight",
+  h4: "font-heading text-2xl font-bold leading-tight",
+  h5: "font-heading text-xl font-semibold leading-tight",
+  h6: "font-heading text-lg font-semibold leading-tight",
+  body1: "font-body text-base font-normal leading-normal",
+  body2: "font-body text-sm font-normal leading-normal",
+  subtitle1: "font-body text-base font-medium leading-relaxed",
+  subtitle2: "font-body text-sm font-medium leading-normal",
+  caption: "font-body text-xs font-normal leading-loose",
+  overline: "font-body text-xs font-semibold uppercase tracking-widest leading-relaxed",
+  button: "font-sans text-sm font-semibold leading-relaxed",
+  // Monospace technical readouts (clocks, ids, metrics) and their all-caps label form.
+  mono: "font-mono text-xs font-normal leading-normal",
+  monoLabel: "font-mono text-xs font-bold uppercase tracking-wide leading-normal",
+  // The sans (Inter) label pair: 10px for dense table/column headers, 12px bold for
+  // badge and row labels. `overline` is the 12px font-body form of the same idea.
+  microLabel: "font-sans text-2xs font-semibold uppercase tracking-widest leading-normal",
+  boldLabel: "font-sans text-xs font-bold leading-normal"
+};
+var colorStyles = {
+  primary: "text-text-primary",
+  secondary: "text-text-secondary",
+  tertiary: "text-text-tertiary",
+  disabled: "text-text-disabled",
+  inverse: "text-text-inverse",
+  success: "text-status-success",
+  error: "text-status-error",
+  warning: "text-status-warning",
+  info: "text-status-info",
+  inherit: ""
+  // No color class, inherit from parent
+};
+var alignStyles = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+  justify: "text-justify"
+};
+var headingVariants = ["h1", "h2", "h3", "h4", "h5", "h6"];
+var marginBottomStyles = {
+  none: "",
+  sm: "mb-1",
+  md: "mb-2",
+  lg: "mb-4"
+};
+function Typography({
+  variant = "body1",
+  color = "primary",
+  align,
+  truncate = false,
+  noWrap = false,
+  // deprecated, kept for backward compatibility
+  marginBottom,
+  gutterBottom = false,
+  // deprecated, kept for backward compatibility
+  maxLines,
+  className,
+  children,
+  ...props
+}) {
+  const isHeading = headingVariants.includes(variant);
+  const shouldTruncate = truncate || noWrap;
+  const mb = marginBottom || (gutterBottom ? "md" : "none");
+  let numLines;
+  if (maxLines) {
+    numLines = maxLines;
+  } else if (shouldTruncate) {
+    numLines = 1;
+  }
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      accessibilityRole: isHeading ? "header" : "text",
+      numberOfLines: numLines,
+      className: cn(
+        variantStyles[variant],
+        color !== "inherit" && colorStyles[color],
+        align && alignStyles[align],
+        shouldTruncate && "truncate",
+        marginBottomStyles[mb],
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
 
 // src/components/custom/Workout/PrBadge.tsx
-var BRAND_PRIMARY = getSemanticColors("dark")["brand-primary"];
 var typeLabels = {
   e1rm: "PR e1RM",
   weight: "PR Weight",
@@ -1904,6 +1999,7 @@ function PrBadge({
   ...props
 }) {
   const resolvedLabel = labelProp ?? typeLabels[type];
+  const brandPrimary = resolveColor("brand-primary");
   const [scale] = useState(() => new Animated.Value(animate ? 0.8 : 1));
   const [opacity] = useState(() => new Animated.Value(animate ? 0 : 1));
   useEffect(() => {
@@ -1931,7 +2027,7 @@ function PrBadge({
       accessibilityLabel: `Personal record: ${resolvedLabel}`,
       testID: "pr-badge-star",
       ...props,
-      children: /* @__PURE__ */ jsx(StarIcon, { size: 14, color: BRAND_PRIMARY, fill: BRAND_PRIMARY, strokeWidth: 2 })
+      children: /* @__PURE__ */ jsx(StarIcon, { size: 14, color: brandPrimary, fill: brandPrimary, strokeWidth: 2 })
     }
   ) : /* @__PURE__ */ jsx(
     BaseBadge,
@@ -1941,14 +2037,11 @@ function PrBadge({
       accessibilityLabel: `Personal record: ${resolvedLabel}`,
       ...props,
       children: /* @__PURE__ */ jsxs(
-        Text,
+        Typography,
         {
-          style: {
-            fontSize: 12,
-            color: BRAND_PRIMARY,
-            fontWeight: "700",
-            fontFamily: "Inter, sans-serif"
-          },
+          variant: "boldLabel",
+          color: "inherit",
+          className: "leading-[normal] text-brand-primary",
           children: [
             "\u2605",
             " ",
@@ -1959,28 +2052,15 @@ function PrBadge({
     }
   );
   if (animate) {
-    return /* @__PURE__ */ jsx(
-      Animated.View,
-      {
-        style: { transform: [{ scale }], opacity },
-        testID: "pr-badge-animated",
-        children: badge
-      }
-    );
+    return /* @__PURE__ */ jsx(Animated.View, { style: { transform: [{ scale }], opacity }, testID: "pr-badge-animated", children: badge });
   }
   return badge;
 }
-var DARK = getSemanticColors("dark");
-var TEXT_ACTIVE = DARK["text-primary"];
-var TEXT_MUTED = DARK["text-secondary"];
+var TEXT_ACTIVE = "text-primary";
+var TEXT_MUTED = "text-secondary";
 var COL = { set: 36, reps: 44, load: 56, rpe: 36 };
-var cellText = { fontFamily: "Inter, sans-serif", fontSize: 13, fontWeight: "600" };
-var typeBadge = {
-  fontSize: 10,
-  fontWeight: "700",
-  fontFamily: "Inter, sans-serif",
-  color: WORKOUT_TOKENS.scale.orange,
-  backgroundColor: "rgba(255,165,2,0.12)",
+var CELL_CLASS = "font-semibold leading-[normal]";
+var typeBadgeStyle = {
   paddingVertical: 1,
   paddingHorizontal: 5,
   borderRadius: 3,
@@ -2041,7 +2121,8 @@ function RowStrip({ set }) {
 }
 function SetRow(set) {
   const live = set.state === "live";
-  const valueColor = live ? TEXT_ACTIVE : TEXT_MUTED;
+  const valueColor = resolveColor(live ? TEXT_ACTIVE : TEXT_MUTED);
+  const mutedColor = resolveColor(TEXT_MUTED);
   const rpe = set.state === "todo" ? null : set.rpe;
   return /* @__PURE__ */ jsxs(
     View,
@@ -2051,10 +2132,60 @@ function SetRow(set) {
       testID: "set-row",
       children: [
         /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ jsx(Cell, { width: COL.set, testID: "set-row-set-number", children: set.setType ? /* @__PURE__ */ jsx(Text, { style: typeBadge, testID: "set-row-type-badge", children: set.setType }) : /* @__PURE__ */ jsx(Text, { style: { ...cellText, color: valueColor, fontWeight: live ? "700" : "600" }, children: set.setNumber }) }),
-          /* @__PURE__ */ jsx(Cell, { width: COL.reps, testID: "set-row-reps", children: /* @__PURE__ */ jsx(Text, { style: { ...cellText, color: valueColor }, children: displayReps(set) }) }),
-          /* @__PURE__ */ jsx(Cell, { width: COL.load, testID: "set-row-weight", children: /* @__PURE__ */ jsx(Text, { style: { ...cellText, color: valueColor }, children: roundWeight(displayWeight(set)) }) }),
-          /* @__PURE__ */ jsx(Cell, { width: COL.rpe, testID: "set-row-rpe", children: /* @__PURE__ */ jsx(Text, { style: { ...cellText, color: TEXT_MUTED }, children: rpe != null ? roundRpe(rpe) : "\u2014" }) })
+          /* @__PURE__ */ jsx(Cell, { width: COL.set, testID: "set-row-set-number", children: set.setType ? /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "boldLabel",
+              color: "inherit",
+              className: "text-2xs leading-[normal]",
+              style: {
+                ...typeBadgeStyle,
+                color: resolveColor("brand-primary"),
+                backgroundColor: resolveColor("brand-primary-subtle")
+              },
+              testID: "set-row-type-badge",
+              children: set.setType
+            }
+          ) : /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "boldLabel",
+              color: "inherit",
+              className: live ? "font-bold leading-[normal]" : CELL_CLASS,
+              style: { color: valueColor },
+              children: set.setNumber
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Cell, { width: COL.reps, testID: "set-row-reps", children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "boldLabel",
+              color: "inherit",
+              className: CELL_CLASS,
+              style: { color: valueColor },
+              children: displayReps(set)
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Cell, { width: COL.load, testID: "set-row-weight", children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "boldLabel",
+              color: "inherit",
+              className: CELL_CLASS,
+              style: { color: valueColor },
+              children: roundWeight(displayWeight(set))
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Cell, { width: COL.rpe, testID: "set-row-rpe", children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "boldLabel",
+              color: "inherit",
+              className: CELL_CLASS,
+              style: { color: mutedColor },
+              children: rpe != null ? roundRpe(rpe) : "\u2014"
+            }
+          ) })
         ] }),
         /* @__PURE__ */ jsx(View, { style: { marginTop: live ? 6 : 4 }, testID: "set-row-strip", children: /* @__PURE__ */ jsx(RowStrip, { set }) })
       ]
@@ -2062,6 +2193,7 @@ function SetRow(set) {
   );
 }
 var PREV_COLUMN = { label: "PREV", width: void 0 };
+var COLUMN_LABEL = "leading-[normal]";
 function buildColumns(unit, showPrevious) {
   return [
     { label: "SET", width: 36 },
@@ -2100,20 +2232,7 @@ function SetTableHeader({
               gap: 8
             },
             ...isFlex ? { className: "flex-1" } : {},
-            children: /* @__PURE__ */ jsx(
-              Text,
-              {
-                className: "text-text-tertiary",
-                style: {
-                  fontSize: 10,
-                  fontWeight: "600",
-                  fontFamily: "Inter, sans-serif",
-                  textTransform: "uppercase",
-                  letterSpacing: 0.8
-                },
-                children: label
-              }
-            )
+            children: /* @__PURE__ */ jsx(Typography, { variant: "microLabel", color: "tertiary", className: COLUMN_LABEL, children: label })
           },
           label
         );
@@ -2139,7 +2258,6 @@ function MetricCell({ children, color, fontSize = 11 }) {
 }
 
 // src/components/custom/Workout/SetsRepsLoad.tsx
-var t2 = getSemanticColors("dark");
 var TIMES = "\xD7";
 var AT = "@";
 function SetsRepsLoad({
@@ -2151,8 +2269,8 @@ function SetsRepsLoad({
   className,
   ...props
 }) {
-  const value = t2["text-primary"];
-  const sep = t2["text-tertiary"];
+  const value = useOnSurfaceColor("primary");
+  const sep = useOnSurfaceColor("tertiary");
   return /* @__PURE__ */ jsxs(
     View,
     {
@@ -2172,19 +2290,19 @@ function SetsRepsLoad({
     }
   );
 }
-var t3 = getSemanticColors("dark");
+var t2 = getSemanticColors("dark");
 var INTER = "Inter, sans-serif";
 var TEXT_TERTIARY = "#6B7280";
-var STATUS_ERROR = t3["status-error"];
-var STATUS_SUCCESS = t3["status-success"];
-var STATUS_WARNING = t3["status-warning"];
+var STATUS_ERROR = t2["status-error"];
+var STATUS_SUCCESS = t2["status-success"];
+var STATUS_WARNING = t2["status-warning"];
 var ON_TARGET_MS = 100;
 function getTempoFillPct(elapsedMs, targetMs) {
   if (!targetMs) return 100;
   return Math.min(100, elapsedMs / targetMs * 100);
 }
 function activeNumberTone(elapsedMs, targetMs) {
-  if (targetMs == null) return t3["text-primary"];
+  if (targetMs == null) return t2["text-primary"];
   const remainingMs = targetMs - elapsedMs;
   if (remainingMs > ON_TARGET_MS) return STATUS_WARNING;
   if (remainingMs >= -ON_TARGET_MS) return STATUS_SUCCESS;
@@ -2282,7 +2400,7 @@ function LiveTempoRow({
   readout
 }) {
   const activeIndex = live.activePhase ? LIVE_PHASES.findIndex((p) => p.key === live.activePhase) : -1;
-  return /* @__PURE__ */ jsx(Fragment, { children: LIVE_PHASES.map((phase, i) => {
+  return /* @__PURE__ */ jsx(Fragment$1, { children: LIVE_PHASES.map((phase, i) => {
     const status = activeIndex < 0 || i > activeIndex ? "upcoming" : i < activeIndex ? "done" : "active";
     return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center" }, children: [
       i > 0 && /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
@@ -2336,7 +2454,7 @@ function TempoDisplay({
       style: {
         flexDirection: "row",
         alignItems: "center",
-        backgroundColor: t3["surface-raised"],
+        backgroundColor: t2["surface-raised"],
         paddingHorizontal: chromePadX,
         paddingVertical: chromePadY,
         borderRadius: chromeRadius
@@ -2351,7 +2469,7 @@ function TempoDisplay({
               fontSize: labelFont,
               fontWeight: "500",
               // Live-muted green while a rep is running, tertiary at rest.
-              color: live ? t3["status-live-muted"] : TEXT_TERTIARY,
+              color: live ? t2["status-live-muted"] : TEXT_TERTIARY,
               letterSpacing: 0.5,
               textTransform: "uppercase",
               marginRight: Math.round(fontSize * 0.5)
@@ -2369,7 +2487,7 @@ function TempoDisplay({
           }
         ) : (
           // Static prescription: the phase-coloured lockup (the same colours the live row rests at).
-          /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(Fragment$1, { children: [
             /* @__PURE__ */ jsx(TempoValue, { value: eccentric, color: phaseColors.eccentric, fontSize }),
             /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
             /* @__PURE__ */ jsx(TempoValue, { value: pauseBottom, color: phaseColors.pauseBottom, fontSize }),
@@ -2409,7 +2527,7 @@ function TempoDisplay({
                 View,
                 {
                   style: {
-                    backgroundColor: t3["surface-overlay"],
+                    backgroundColor: t2["surface-overlay"],
                     borderRadius: 6,
                     paddingVertical: 8,
                     paddingHorizontal: 12,
@@ -2462,17 +2580,17 @@ function TempoDisplay({
     }
   );
 }
-var t4 = getSemanticColors("dark");
 var INDICATOR_CONFIG = {
-  imbalance: { Icon: ScaleIcon, color: t4["status-error"], label: "Left/right imbalance" },
-  overshoot: { Icon: AlertTriangleIcon, color: t4["status-error"], label: "Load overshoot" },
-  "velocity-loss": { Icon: TrendingDownIcon, color: t4["status-warning"], label: "Velocity loss" },
-  "missed-reps": { Icon: CircleSlashIcon, color: t4["status-warning"], label: "Missed reps" },
-  pr: { Icon: AwardIcon, color: t4["status-success"], label: "Personal record" },
-  info: { Icon: InfoIcon, color: t4["status-info"], label: "More info" }
+  imbalance: { Icon: ScaleIcon, token: "status-error", label: "Left/right imbalance" },
+  overshoot: { Icon: AlertTriangleIcon, token: "status-error", label: "Load overshoot" },
+  "velocity-loss": { Icon: TrendingDownIcon, token: "status-warning", label: "Velocity loss" },
+  "missed-reps": { Icon: CircleSlashIcon, token: "status-warning", label: "Missed reps" },
+  pr: { Icon: AwardIcon, token: "status-success", label: "Personal record" },
+  info: { Icon: InfoIcon, token: "status-info", label: "More info" }
 };
 function ExerciseIndicator({ kind, onPress, className, ...props }) {
-  const { Icon, color, label } = INDICATOR_CONFIG[kind];
+  const { Icon, token, label } = INDICATOR_CONFIG[kind];
+  const color = resolveColor(token);
   const chip = /* @__PURE__ */ jsx(
     View,
     {
@@ -2527,10 +2645,10 @@ function ExerciseHeading({
         testID: "exercise-card-header",
         children: [
           /* @__PURE__ */ jsx(
-            Text,
+            Typography,
             {
-              className: "text-text-primary",
-              style: { fontSize: 14, fontFamily: '"Space Grotesk", sans-serif', fontWeight: "700" },
+              variant: "boldLabel",
+              className: "font-heading text-sm leading-[normal]",
               testID: "exercise-card-name",
               children: name
             }
@@ -2659,12 +2777,12 @@ function SegmentedBar({
 
 // src/components/custom/Workout/SetBar.tsx
 var SET_STRIP_ZONES = {
-  slow: primitiveRamps.red[600],
-  moderate: primitiveRamps.orange[400],
-  fast: primitiveRamps.amber[300],
-  fastest: primitiveRamps.green[300]
+  slow: WORKOUT_TOKENS.scale.red,
+  moderate: WORKOUT_TOKENS.scale.orange,
+  fast: WORKOUT_TOKENS.scale.yellow,
+  fastest: WORKOUT_TOKENS.scale.green
 };
-var TODO_COLOR = greyRamp[900];
+var TODO_COLOR = resolveColor("border-prominent");
 var SET_STRIP_VARIABLE_COLOR = primitiveRamps.cyan[900];
 var NOTCH_GAP = 2;
 var CLUSTER_GAP = 3;
@@ -2778,6 +2896,10 @@ function describeSets(sets) {
   const upcoming = sets.filter((s) => setCategory(s) === "upcoming").length;
   return `Set progress: ${done} done, ${active} in progress, ${upcoming} upcoming`;
 }
+function repsRangeLabel(set) {
+  if (set.status !== "todo" && set.status !== "active") return null;
+  return formatRepsRange(set.repsLow, set.repsHigh);
+}
 function SetStrip({ sets, height = 8, className, ...props }) {
   return /* @__PURE__ */ jsx(
     View,
@@ -2788,7 +2910,22 @@ function SetStrip({ sets, height = 8, className, ...props }) {
       accessibilityLabel: describeSets(sets),
       testID: "set-strip",
       ...props,
-      children: sets.map((set, i) => /* @__PURE__ */ jsx(SetBar, { set, height }, i))
+      children: sets.map((set, i) => {
+        const label = repsRangeLabel(set);
+        if (label == null) return /* @__PURE__ */ jsx(SetBar, { set, height }, i);
+        return /* @__PURE__ */ jsxs(View, { style: { flex: 1, minWidth: 0, position: "relative" }, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: "text-text-secondary text-2xs font-semibold text-center",
+              style: { position: "absolute", bottom: height + 3, left: 0, right: 0 },
+              testID: "set-strip-reps-label",
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx(SetBar, { set, height })
+        ] }, i);
+      })
     }
   );
 }
@@ -2900,28 +3037,24 @@ function CollapsedCard({
           children: [
             /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", testID: "exercise-card-header", children: [
               /* @__PURE__ */ jsx(
-                Text,
+                Typography,
                 {
-                  className: "text-text-primary",
-                  style: {
-                    fontSize: 14,
-                    fontFamily: '"Space Grotesk", sans-serif',
-                    fontWeight: "700"
-                  },
+                  variant: "h6",
+                  color: "primary",
+                  className: "text-sm font-bold leading-[normal]",
                   testID: "exercise-card-name",
                   children: name
                 }
               ),
               /* @__PURE__ */ jsx(View, { className: "flex-1" }),
-              summary && /* @__PURE__ */ jsx(
-                Text,
+              summary && /* The demo's "body" face is Inter, which is the library's `font-sans`
+                 (the mapping B1 established for PrBadge), not Typography's `font-body`. */
+              /* @__PURE__ */ jsx(
+                Typography,
                 {
-                  className: "text-text-secondary",
-                  style: {
-                    fontSize: 12,
-                    fontFamily: "Inter, sans-serif",
-                    marginRight: 8
-                  },
+                  variant: "caption",
+                  color: "secondary",
+                  className: "font-sans mr-2 leading-[normal]",
                   testID: "exercise-card-summary",
                   children: formatSummary(summary)
                 }
@@ -2955,8 +3088,6 @@ function CollapsedCard({
     }
   );
 }
-var DARK2 = getSemanticColors("dark");
-var BODY_DIVIDER = DARK2["hairline-subtle"];
 function deriveHeaderSetStates(sets) {
   return sets.map((set) => {
     switch (set.state) {
@@ -3017,7 +3148,11 @@ function ExpandedCard({
         /* @__PURE__ */ jsxs(
           View,
           {
-            style: { borderTopWidth: 1, borderTopColor: BODY_DIVIDER, paddingBottom: 6 },
+            style: {
+              borderTopWidth: 1,
+              borderTopColor: resolveColor("hairline-subtle"),
+              paddingBottom: 6
+            },
             testID: "exercise-card-body",
             children: [
               /* @__PURE__ */ jsx(SetTableHeader, { unit, showPrevious: false, testID: "exercise-card-column-headers" }),
@@ -3052,45 +3187,36 @@ function UpcomingCard({
       testID: "exercise-card",
       children: /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", children: [
         /* @__PURE__ */ jsx(
-          Text,
+          Typography,
           {
-            className: "text-text-primary",
-            style: {
-              flexShrink: 0,
-              fontSize: 14,
-              fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: "700"
-            },
+            variant: "h6",
+            color: "primary",
+            className: "shrink-0 text-sm font-bold leading-[normal]",
             testID: "exercise-card-name",
             children: name
           }
         ),
         prescription && /* @__PURE__ */ jsx(
-          Text,
+          Typography,
           {
-            className: "text-text-secondary",
-            numberOfLines: 1,
-            style: {
-              flexShrink: 1,
-              fontSize: 12,
-              fontFamily: "Inter, sans-serif",
-              marginLeft: 8
-            },
+            variant: "caption",
+            color: "secondary",
+            maxLines: 1,
+            className: "font-sans shrink ml-2 leading-[normal]",
             testID: "exercise-card-prescription",
             children: prescription
           }
         ),
         /* @__PURE__ */ jsx(View, { className: "flex-1", style: { minWidth: 8 } }),
-        previousBest && /* @__PURE__ */ jsx(
-          Text,
+        previousBest && /* 11px is off the type scale; `2xs` (10px) is the step below, as B2's
+           WorkoutCard date took for the same size. */
+        /* @__PURE__ */ jsx(
+          Typography,
           {
-            className: "text-text-tertiary",
-            numberOfLines: 1,
-            style: {
-              flexShrink: 1,
-              fontSize: 11,
-              fontFamily: "Inter, sans-serif"
-            },
+            variant: "caption",
+            color: "tertiary",
+            maxLines: 1,
+            className: "font-sans shrink text-2xs leading-[normal]",
             testID: "exercise-card-previous-best",
             children: previousBest
           }
@@ -3117,12 +3243,7 @@ function ExerciseCard({
   if (upcoming) return /* @__PURE__ */ jsx(UpcomingCard, { ...rest, onToggle });
   return isExpanded ? /* @__PURE__ */ jsx(ExpandedCard, { ...rest, onToggle }) : /* @__PURE__ */ jsx(CollapsedCard, { ...rest, onToggle });
 }
-function resolveColor(token, mode = "dark") {
-  return Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
-}
-
-// src/components/custom/Workout/InputBar.tsx
-var BRAND_PRIMARY2 = getSemanticColors("dark")["brand-primary"];
+var BRAND_PRIMARY = getSemanticColors("dark")["brand-primary"];
 var INPUT_CLASSNAME = "bg-surface-raised border-hairline-strong text-text-primary";
 var inputStyle = {
   fontSize: 14,
@@ -3251,7 +3372,7 @@ function InputBar({
             onPress: onRecord,
             disabled: !canRecord,
             style: ({ pressed }) => ({
-              backgroundColor: BRAND_PRIMARY2,
+              backgroundColor: BRAND_PRIMARY,
               borderRadius: 8,
               paddingVertical: 10,
               paddingHorizontal: 16,
@@ -3485,7 +3606,7 @@ function CircularTimer({
 }
 
 // src/components/custom/Workout/RestTimer.tsx
-var BRAND_PRIMARY3 = getSemanticColors("dark")["brand-primary"];
+var BRAND_PRIMARY2 = getSemanticColors("dark")["brand-primary"];
 var RING_DEFAULT_SIZE = 180;
 function RestActions({ onAddTime, onSkip }) {
   return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 8 }, children: [
@@ -3532,7 +3653,7 @@ function RestActions({ onAddTime, onSkip }) {
               fontSize: 11,
               fontFamily: "Inter, sans-serif",
               fontWeight: "600",
-              color: BRAND_PRIMARY3
+              color: BRAND_PRIMARY2
             },
             children: "Skip"
           }
@@ -3707,7 +3828,7 @@ function RestTimer({
               {
                 style: {
                   height: "100%",
-                  backgroundColor: BRAND_PRIMARY3,
+                  backgroundColor: BRAND_PRIMARY2,
                   borderRadius: 2,
                   width: `${progressPct}%`
                 },
@@ -3721,23 +3842,16 @@ function RestTimer({
     }
   );
 }
-var DEFAULTS = {
-  label: "SS",
-  color: getSemanticColors("dark")["brand-primary"],
-  bgBase: getSemanticColors("dark")["background-base"]
-};
-function SupersetWrapper({
-  label = DEFAULTS.label,
-  color = DEFAULTS.color,
-  children
-}) {
+var DEFAULT_LABEL = "SS";
+function SupersetWrapper({ label = DEFAULT_LABEL, color, children }) {
+  const rail = color ?? resolveColor("brand-primary");
   return /* @__PURE__ */ jsxs(
     View,
     {
       style: {
         position: "relative",
         borderLeftWidth: 3,
-        borderLeftColor: color,
+        borderLeftColor: rail,
         paddingLeft: 8,
         marginHorizontal: 12,
         marginBottom: 8,
@@ -3748,21 +3862,18 @@ function SupersetWrapper({
       testID: "superset-wrapper",
       children: [
         /* @__PURE__ */ jsx(
-          Text,
+          Typography,
           {
+            variant: "microLabel",
+            color: "inverse",
             style: {
               position: "absolute",
               top: -1,
               left: -3,
-              fontSize: 9,
-              fontFamily: "Inter, sans-serif",
-              fontWeight: "700",
-              backgroundColor: color,
-              color: DEFAULTS.bgBase,
+              backgroundColor: rail,
               paddingVertical: 2,
               paddingHorizontal: 6,
               borderBottomRightRadius: 4,
-              letterSpacing: 0.5,
               zIndex: 2
             },
             testID: "superset-label",
@@ -3776,7 +3887,7 @@ function SupersetWrapper({
 }
 
 // src/components/custom/Workout/ActiveWorkoutPage.tsx
-var BRAND_PRIMARY4 = getSemanticColors("dark")["brand-primary"];
+var BRAND_PRIMARY3 = getSemanticColors("dark")["brand-primary"];
 function countCompletedSets(exercise) {
   if (exercise.setVelocities != null) return exercise.setVelocities.length;
   if (exercise.status === "completed") return exercise.totalPlannedSets;
@@ -3890,7 +4001,7 @@ function WorkoutHeader({
               fontSize: 15,
               fontFamily: '"Space Grotesk", sans-serif',
               fontWeight: "700",
-              color: BRAND_PRIMARY4,
+              color: BRAND_PRIMARY3,
               fontVariant: ["tabular-nums"]
             },
             children: `${progress.completedExercises}/${progress.totalExercises}`
@@ -3924,7 +4035,7 @@ function WorkoutHeader({
             style: {
               height: "100%",
               width: `${Math.round(progress.fraction * 100)}%`,
-              backgroundColor: BRAND_PRIMARY4,
+              backgroundColor: BRAND_PRIMARY3,
               borderRadius: 2
             },
             testID: "active-workout-page-progress-fill"
@@ -4058,348 +4169,159 @@ function ActiveWorkoutPage({
     }
   );
 }
-var elevationSystem = {
-  // Deep inset (recessed input fields, deeply pressed buttons)
-  [-2]: {
-    name: "deep-inset",
-    colorAdjustment: 0,
-    shadowIntensity: "strong",
-    shadowStyle: "pressed",
-    description: "Deeply recessed elements (e.g., input fields, deeply pressed buttons)"
-  },
-  // Shallow inset (pressed buttons, sunken panels)
-  [-1]: {
-    name: "inset",
-    colorAdjustment: 0,
-    shadowIntensity: "medium",
-    shadowStyle: "pressed",
-    description: "Shallow inset elements (e.g., pressed buttons, sunken panels within cards)"
-  },
-  // Base level (page background, default surface)
-  [0]: {
-    name: "base",
-    colorAdjustment: 0,
-    shadowIntensity: "subtle",
-    shadowStyle: "raised",
-    description: "Base surface level (page background, default containers)"
-  },
-  // Level 1: Subtle elevation (outline cards, subtle containers)
-  [1]: {
-    name: "subtle",
-    // The whole ladder was re-spaced in TD-07.16. It used to run
-    // 0.01/0.02/0.04/0.06/0.08, where the first step was ~2 RGB values — under
-    // the perceptual floor, so level 1 existed in the type system and nowhere on
-    // screen. With drop-shadow now gated off below FLOATING_ELEVATION_MIN, TONE
-    // is the only thing separating 0-3, so every step has to actually land.
-    // Even 0.025 spacing, verified in elevation.test.ts as ΔL* > 1 per step.
-    colorAdjustment: 0.025,
-    shadowIntensity: "subtle",
-    shadowStyle: "raised",
-    description: "Subtle elevation (outline cards, subtle containers)"
-  },
-  // Level 2: Standard elevation (default cards, buttons)
-  [2]: {
-    name: "standard",
-    colorAdjustment: 0.05,
-    shadowIntensity: "medium",
-    shadowStyle: "raised",
-    description: "Standard elevation (default cards, raised buttons)"
-  },
-  // Level 3: Prominent elevation (important cards, modals)
-  [3]: {
-    name: "prominent",
-    colorAdjustment: 0.075,
-    shadowIntensity: "strong",
-    shadowStyle: "raised",
-    description: "Prominent elevation (important cards, modals, dropdowns)"
-  },
-  // Level 4: High elevation (overlays, popovers)
-  [4]: {
-    name: "high",
-    colorAdjustment: 0.1,
-    shadowIntensity: "strong",
-    shadowStyle: "raised",
-    description: "High elevation (overlays, popovers, tooltips)"
-  },
-  // Level 5: Floating (toasts, floating action buttons)
-  [5]: {
-    name: "floating",
-    colorAdjustment: 0.13,
-    shadowIntensity: "strong",
-    shadowStyle: "raised",
-    description: "Floating elevation (toasts, floating action buttons, highest z-index)"
-  }
+var FLOATING_LIFT_MIN = 4;
+var LIFT_RIM_ALPHA = { dark: 0.12, light: 0.9 };
+var AMBIENT = {
+  1: [
+    { y: 1, blur: 2, alpha: 0.35 },
+    { y: 2, blur: 6, alpha: 0.3 }
+  ],
+  2: [
+    { y: 1, blur: 2, alpha: 0.35 },
+    { y: 4, blur: 12, alpha: 0.32 }
+  ],
+  3: [
+    { y: 2, blur: 4, alpha: 0.35 },
+    { y: 8, blur: 22, alpha: 0.35 }
+  ],
+  4: [
+    { y: 1, blur: 2, alpha: 0.35 },
+    { y: 10, blur: 24, alpha: 0.3 },
+    { y: 24, blur: 48, alpha: 0.2 }
+  ],
+  5: [
+    { y: 2, blur: 4, alpha: 0.4 },
+    { y: 16, blur: 32, alpha: 0.35 },
+    { y: 32, blur: 64, alpha: 0.25 }
+  ]
 };
-function calculateRimLightColor(baseColor, level) {
-  const rgb = hexToRgb(baseColor);
-  if (!rgb) {
-    return "rgba(255, 255, 255, 0.5)";
-  }
-  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-  const isLight = hsv.v > 0.6;
-  const isSaturated = hsv.s > 0.3;
-  const absLevel = Math.abs(level);
-  const opacityBoost = Math.max(0, (absLevel - 1) * 0.05);
-  if (isSaturated) {
-    const rimLightValue = 0.95;
-    const rimLightRgb = hsvToRgb(hsv.h, hsv.s * 0.3, rimLightValue);
-    const baseOpacity = isLight ? 0.9 : 0.5;
-    const finalOpacity = Math.min(1, baseOpacity + opacityBoost);
-    return `rgba(${rimLightRgb.r}, ${rimLightRgb.g}, ${rimLightRgb.b}, ${finalOpacity.toFixed(2)})`;
-  } else {
-    const baseOpacity = isLight ? 0.9 : 0.12;
-    const finalOpacity = Math.min(1, baseOpacity + opacityBoost);
-    return `rgba(255, 255, 255, ${finalOpacity.toFixed(2)})`;
-  }
+var AMBIENT_ALPHA_SCALE = { dark: 1, light: 0.4 };
+function ambientLayers(step, mode) {
+  const scale = AMBIENT_ALPHA_SCALE[mode];
+  return AMBIENT[step].map(
+    ({ y, blur, alpha: alpha2 }) => `0 ${y}px ${blur}px rgba(0,0,0,${(alpha2 * scale).toFixed(2)})`
+  );
 }
-function calculateDarkShadowColors(surfaceColor) {
-  const rgb = hexToRgb(surfaceColor);
-  if (!rgb) {
-    return {
-      dark: "rgba(0, 0, 0, 0.3)",
-      darker: "rgba(0, 0, 0, 0.4)"
-    };
-  }
-  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-  const isLight = hsv.v > 0.6;
-  const isSaturated = hsv.s > 0.3;
-  if (isSaturated) {
-    const darkShadowValue = 0.15;
-    const darkShadowRgb = hsvToRgb(hsv.h, hsv.s, darkShadowValue);
-    if (isLight) {
-      return {
-        dark: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.3)`,
-        darker: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.4)`
-      };
-    } else {
-      return {
-        dark: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.5)`,
-        darker: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.6)`
-      };
-    }
-  } else {
-    if (isLight) {
-      return {
-        dark: "rgba(0, 0, 0, 0.2)",
-        darker: "rgba(0, 0, 0, 0.3)"
-      };
-    } else {
-      return {
-        dark: "rgba(0, 0, 0, 0.5)",
-        darker: "rgba(0, 0, 0, 0.6)"
-      };
+function liftShadow(step, mode = "dark", opts = {}) {
+  const rim = opts.rim ?? LIFT_RIM_ALPHA[mode];
+  const layers = ambientLayers(step, mode);
+  if (rim > 0) layers.unshift(`inset 0 1px 0 rgba(255,255,255,${rim.toFixed(2)})`);
+  return layers.join(", ");
+}
+function liftStyle(step, mode = "dark", opts = {}) {
+  const deepest = AMBIENT[step][AMBIENT[step].length - 1];
+  return Platform.select({
+    web: { boxShadow: liftShadow(step, mode, opts) },
+    default: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: Math.round(deepest.y / 2) },
+      shadowOpacity: deepest.alpha * AMBIENT_ALPHA_SCALE[mode],
+      shadowRadius: deepest.blur / 2,
+      elevation: step
     }
-  }
-}
-function getRimLightConfig() {
-  return {
-    offset: 1,
-    // Fixed 1px for crisp rim
-    blur: 1
-    // Tight blur for crisp edge
-  };
-}
-var elevationSurfaceCache = /* @__PURE__ */ new Map();
-var MAX_CACHE_SIZE = 100;
-function getCacheKey(baseColor, level, theme) {
-  return `${baseColor}-${level}-${theme}`;
+  });
 }
-function calculateElevationSurface(baseColor, level, theme) {
-  const config = elevationSystem[level];
-  if (config.colorAdjustment === 0) {
-    return baseColor;
-  }
-  if (level < 0) {
-    return baseColor;
-  }
-  return lighten(baseColor, config.colorAdjustment);
+var FLOATING_ELEVATION_MIN = FLOATING_LIFT_MIN;
+function getPressedRecessShadow(fillColor, _mode = "dark") {
+  const { boxShadow } = insetWell(fillColor);
+  return Platform.select({
+    web: { boxShadow },
+    default: {}
+  });
 }
-function getElevationSurface(baseColor, level, theme) {
-  const cacheKey = getCacheKey(baseColor, level, theme);
-  if (elevationSurfaceCache.has(cacheKey)) {
-    return elevationSurfaceCache.get(cacheKey);
-  }
-  const result = calculateElevationSurface(baseColor, level);
-  if (elevationSurfaceCache.size >= MAX_CACHE_SIZE) {
-    const firstKey = elevationSurfaceCache.keys().next().value;
-    elevationSurfaceCache.delete(firstKey);
-  }
-  elevationSurfaceCache.set(cacheKey, result);
-  return result;
-}
-var elevationShadowCache = /* @__PURE__ */ new Map();
-var MAX_SHADOW_CACHE_SIZE = 50;
-function getShadowCacheKey(baseColor, level, theme, isHovered) {
-  return `${baseColor}-${level}-${theme}-${isHovered}`;
-}
-function calculateElevationShadow(baseColor, level, theme, isHovered = false) {
-  const config = elevationSystem[level];
-  if (level === 0) {
-    return {};
-  }
-  const elevatedSurfaceColor = calculateElevationSurface(baseColor, level);
-  const rimLightColor = calculateRimLightColor(baseColor, level);
-  const darkShadowColors = calculateDarkShadowColors(elevatedSurfaceColor);
-  const intensityConfig = {
-    subtle: { offset: 1, blur: 2 },
-    medium: { offset: 2, blur: 4 },
-    strong: { offset: 2, blur: 5 }
-  };
-  const { offset, blur } = intensityConfig[config.shadowIntensity];
-  const rimConfig = getRimLightConfig();
-  if (config.shadowStyle === "pressed") {
-    if (isHovered) {
-      const hoverOffset = Math.max(1, Math.round(offset / 2));
-      const hoverBlur = Math.max(1, Math.round(blur / 2));
-      return Platform.select({
-        web: {
-          boxShadow: `inset ${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${darkShadowColors.darker}, inset -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
-        },
-        default: {
-          shadowOpacity: 0,
-          elevation: 0
-        }
-      });
-    }
-    return Platform.select({
-      web: {
-        boxShadow: `inset ${offset}px ${offset}px ${blur}px ${darkShadowColors.darker}, inset -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
-      },
-      default: {
-        shadowOpacity: 0,
-        elevation: 0
-      }
-    });
-  } else {
-    if (isHovered) {
-      const hoverOffset = Math.max(1, Math.round(offset / 2));
-      const hoverBlur = Math.max(1, Math.round(blur / 2));
-      return Platform.select({
-        web: {
-          boxShadow: `${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${darkShadowColors.dark}, -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
-        },
-        default: {
-          shadowColor: "#000",
-          shadowOffset: { width: hoverOffset, height: hoverOffset },
-          shadowOpacity: 0.2,
-          shadowRadius: hoverBlur / 2,
-          elevation: hoverOffset
-        }
-      });
+var glowConfig = {
+  tight: { blur: 4, spread: 0, opacity: 0.4 },
+  subtle: { blur: 12, spread: 0, opacity: 0.25 },
+  medium: { blur: 20, spread: 2, opacity: 0.4 },
+  strong: { blur: 30, spread: 4, opacity: 0.55 }
+};
+function getGlowShadow(color, intensity = "medium") {
+  const config = glowConfig[intensity];
+  const rgb = hexToRgb(color);
+  if (!rgb) return {};
+  return Platform.select({
+    web: {
+      boxShadow: `0 0 ${config.blur}px ${config.spread}px rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${config.opacity})`
+    },
+    default: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: config.opacity,
+      shadowRadius: config.blur / 2,
+      elevation: 0
     }
-    return Platform.select({
-      web: {
-        boxShadow: `${offset}px ${offset}px ${blur}px ${darkShadowColors.dark}, -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
-      },
-      default: {
-        shadowColor: "#000",
-        shadowOffset: { width: offset, height: offset },
-        shadowOpacity: 0.3,
-        shadowRadius: blur / 2,
-        elevation: offset
-      }
-    });
-  }
-}
-var FLOATING_ELEVATION_MIN = 4;
-function getElevationShadow(baseColor, level, theme, isHovered = false) {
-  const cacheKey = getShadowCacheKey(baseColor, level, theme, isHovered);
-  if (elevationShadowCache.has(cacheKey)) {
-    return elevationShadowCache.get(cacheKey);
-  }
-  const result = level > 0 && level < FLOATING_ELEVATION_MIN ? {} : calculateElevationShadow(baseColor, level, theme, isHovered);
-  if (elevationShadowCache.size >= MAX_SHADOW_CACHE_SIZE) {
-    const firstKey = elevationShadowCache.keys().next().value;
-    elevationShadowCache.delete(firstKey);
-  }
-  elevationShadowCache.set(cacheKey, result);
-  return result;
-}
-function getBaseSurfaceColor(theme) {
-  return theme === "light" ? semanticColorsLight["surface-raised"] : semanticColorsDark["surface-elevated"];
+  });
 }
-var componentElevationRanges = {
-  button: {
-    allowed: [2],
-    default: 2,
-    hover: 3
-  },
-  card: {
-    allowed: [1, 2, 3],
-    default: 2,
-    hover: 3
-  },
-  input: {
-    allowed: [-2, -1, 0],
-    default: -1
-  },
-  overlay: {
-    allowed: [4, 5],
-    default: 4
+function recessDepth(inherited, planesDown, mode) {
+  let plane = inherited.level;
+  for (let i = 0; i < planesDown; i++) plane = pressedLevel(plane);
+  const backgroundColor = surfaceBackground(plane, mode);
+  return { plane, backgroundColor, depthStyle: getPressedRecessShadow(backgroundColor, mode) };
+}
+function resolveSurfaceDepth(inherited, props) {
+  const mode = props.theme ?? inherited.mode;
+  const elevation = props.elevation ?? 0;
+  if (props.pressed || elevation < 0) {
+    const down = props.pressed ? 1 : -elevation;
+    return { mode, step: 0, lifted: false, ...recessDepth(inherited, down, mode) };
   }
-};
-function getValidatedElevation(component, requested) {
-  const range = componentElevationRanges[component];
-  if (range.allowed.includes(requested)) {
-    return requested;
-  }
-  const sorted = [...range.allowed].sort((a, b) => a - b);
-  if (requested < sorted[0]) return sorted[0];
-  if (requested > sorted[sorted.length - 1]) return sorted[sorted.length - 1];
-  return sorted.reduce(
-    (prev, curr) => Math.abs(curr - requested) < Math.abs(prev - requested) ? curr : prev
+  const step = props.level != null ? 0 : props.raise ?? elevation;
+  const floating = step >= FLOATING_ELEVATION_MIN;
+  const plane = props.level ?? (floating ? "overlay" : raisedLevel(inherited.level, step));
+  const lifted = props.lift ?? step > 0;
+  const liftStep = Math.max(1, Math.min(5, step));
+  const depthStyle = lifted ? liftStyle(liftStep, mode, props.liftOptions) : {};
+  return { mode, plane, backgroundColor: surfaceBackground(plane, mode), depthStyle, step, lifted };
+}
+function useResolvedSurface(props) {
+  const inherited = useSurface();
+  const { level, raise, elevation, pressed, lift, liftOptions, theme } = props;
+  return useMemo(
+    () => resolveSurfaceDepth(inherited, {
+      level,
+      raise,
+      elevation,
+      pressed,
+      lift,
+      liftOptions,
+      theme
+    }),
+    [inherited, level, raise, elevation, pressed, lift, liftOptions, theme]
   );
 }
-function getTheme() {
-  if (typeof document === "undefined") return "dark";
-  return document.documentElement.classList.contains("light") ? "light" : "dark";
-}
-var listeners = [];
-function subscribe(listener) {
-  listeners = [...listeners, listener];
-  if (typeof document !== "undefined" && listeners.length === 1) {
-    const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        if (mutation.type === "attributes" && mutation.attributeName === "class") {
-          listeners.forEach((l) => l());
-        }
-      }
-    });
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class"]
-    });
-    subscribe._observer = observer;
-  }
-  return () => {
-    listeners = listeners.filter((l) => l !== listener);
-    if (listeners.length === 0 && subscribe._observer) {
-      subscribe._observer.disconnect();
-      subscribe._observer = null;
-    }
-  };
-}
-function getSnapshot() {
-  return getTheme();
-}
-function getServerSnapshot() {
-  return "dark";
-}
-function useTheme() {
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-}
 
 // src/components/ui/card/Card.tsx
-var variantStyles = {
+var EDGE_CLASS = {
   elevated: "",
-  // Will be set dynamically via elevation system
-  outline: "border-2 border-hairline-strong",
-  // Thicker border with stronger contrast
+  accent: "",
   filled: "",
-  // Will be set dynamically via elevation system
-  accent: "border border-hairline",
+  outline: "border border-hairline-strong",
   subtle: "border border-hairline-subtle"
 };
+var LIFTED = {
+  elevated: true,
+  accent: true,
+  filled: false,
+  outline: false,
+  subtle: false
+};
+var STAYS_ON_HOST = {
+  elevated: false,
+  accent: false,
+  filled: false,
+  outline: true,
+  subtle: true
+};
+function useCardDepth(variant, elevation, hovered) {
+  const raise = STAYS_ON_HOST[variant] ? void 0 : elevation;
+  const resolved = useResolvedSurface({ raise, lift: LIFTED[variant] });
+  const depthStyle = useMemo(() => {
+    if (!hovered || !LIFTED[variant]) return resolved.depthStyle;
+    const hoverStep = Math.min(3, resolved.step + 1);
+    return liftStyle(hoverStep, resolved.mode);
+  }, [hovered, variant, resolved]);
+  return { ...resolved, depthStyle };
+}
 function Card({
   variant = "elevated",
   elevation = 2,
@@ -4420,89 +4342,54 @@ function Card({
 }) {
   const isClickable = isInteractive || !!onPress;
   const [isHovered, setIsHovered] = useState(false);
-  const theme = useTheme();
-  const elevationLevel = useMemo(() => {
-    const validated = getValidatedElevation("card", elevation);
-    if (variant === "outline" || variant === "accent" || variant === "subtle") {
-      return 1;
-    }
-    return validated;
-  }, [variant, elevation]);
-  const baseColor = useMemo(() => getBaseSurfaceColor(theme), [theme]);
-  const surfaceColor = useMemo(() => {
-    if ((variant === "outline" || variant === "accent") && theme === "light") {
-      return "#FAFAFA";
-    }
-    if (variant === "subtle") {
-      return getElevationSurface(baseColor, 0, theme);
-    }
-    return getElevationSurface(baseColor, elevationLevel, theme);
-  }, [baseColor, elevationLevel, theme, variant]);
-  const shadowStyle = useMemo(() => {
-    const shouldHover = isHovered && isClickable;
-    return getElevationShadow(baseColor, elevationLevel, theme, shouldHover);
-  }, [baseColor, elevationLevel, theme, isHovered, isClickable]);
-  const cardContent = isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    skeletonHasHeader && /* @__PURE__ */ jsxs(CardHeader, { children: [
-      /* @__PURE__ */ jsx(View, { className: "h-5 w-1/3 bg-interactive-disabled rounded" }),
-      /* @__PURE__ */ jsx(View, { className: "mt-2 h-4 w-2/3 bg-interactive-disabled rounded" })
-    ] }),
-    /* @__PURE__ */ jsx(CardContent, { children: Array.from({ length: skeletonContentLines }).map((_, i) => /* @__PURE__ */ jsx(
-      View,
-      {
-        className: cn(
-          "h-4 bg-interactive-disabled rounded",
-          i < skeletonContentLines - 1 ? "mb-2 w-full" : "w-4/5"
-        )
-      },
-      i
-    )) }),
-    skeletonHasFooter && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(View, { className: "h-9 w-24 bg-interactive-disabled rounded" }) })
-  ] }) : children;
+  const depth = useCardDepth(variant, elevation, isHovered && isClickable);
   const baseClassName = cn(
     "rounded-lg overflow-hidden relative",
-    // Apply variant styles, but only use default border color if no custom borderColor
-    variant === "outline" ? borderColor ? "border-2" : variantStyles[variant] : variantStyles[variant],
-    // Remove Tailwind shadow classes - we're using elevation shadows via style prop
+    borderColor ? "border" : EDGE_CLASS[variant],
     isClickable && "web:cursor-pointer web:transition-all web:duration-150",
     isClickable && "web:hover:-translate-y-0.5 active:scale-[0.99]",
     isLoading && "pointer-events-none animate-pulse",
     className
   );
-  const accentStyle = useMemo(() => variant === "accent" ? {
-    borderLeftWidth: accentWidth ?? 3,
-    borderLeftColor: accentColor ?? "var(--color-brand-primary)"
-  } : {}, [variant, accentWidth, accentColor]);
   const mergedStyle = useMemo(() => {
-    const elevationStyle = {
-      backgroundColor: bgColor || surfaceColor,
+    const own = {
+      backgroundColor: bgColor || depth.backgroundColor,
       borderRadius: 8,
       overflow: "hidden",
-      ...shadowStyle,
-      ...accentStyle
+      ...depth.depthStyle
     };
-    if (borderColor) {
-      elevationStyle.borderColor = borderColor;
+    if (variant === "accent") {
+      own.borderLeftWidth = accentWidth ?? 3;
+      own.borderLeftColor = accentColor ?? "var(--color-brand-primary)";
     }
-    if (!style) return elevationStyle;
-    return [elevationStyle, style];
-  }, [style, surfaceColor, shadowStyle, borderColor, bgColor, accentStyle]);
-  if (isClickable) {
-    return /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        onPress,
-        onHoverIn: () => setIsHovered(true),
-        onHoverOut: () => setIsHovered(false),
-        accessibilityRole: "button",
-        className: baseClassName,
-        style: mergedStyle,
-        ...props,
-        children: cardContent
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(View, { className: baseClassName, style: mergedStyle, ...props, children: cardContent });
+    if (borderColor) own.borderColor = borderColor;
+    return style ? [own, style] : own;
+  }, [style, depth, bgColor, borderColor, variant, accentWidth, accentColor]);
+  const context = useMemo(
+    () => ({ mode: depth.mode, level: depth.plane }),
+    [depth.mode, depth.plane]
+  );
+  const content = isLoading ? /* @__PURE__ */ jsx(
+    SkeletonBody,
+    {
+      hasHeader: skeletonHasHeader,
+      hasFooter: skeletonHasFooter,
+      contentLines: skeletonContentLines
+    }
+  ) : children;
+  return /* @__PURE__ */ jsx(SurfaceContext.Provider, { value: context, children: isClickable ? /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      onPress,
+      onHoverIn: () => setIsHovered(true),
+      onHoverOut: () => setIsHovered(false),
+      accessibilityRole: "button",
+      className: baseClassName,
+      style: mergedStyle,
+      ...props,
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx(View, { className: baseClassName, style: mergedStyle, ...props, children: content }) });
 }
 function CardHeader({ children, className }) {
   return /* @__PURE__ */ jsx(View, { className: cn("px-6 py-6", className), children });
@@ -4513,60 +4400,88 @@ function CardContent({ children, className }) {
 function CardFooter({ children, className }) {
   return /* @__PURE__ */ jsx(View, { className: cn("px-6 py-4 flex-row items-center gap-2", className), children });
 }
-var t5 = getSemanticColors("dark");
-var solidVariantColors = {
-  success: t5["status-success"],
-  warning: t5["status-warning"],
-  error: t5["status-error"],
-  neutral: greyRamp[500]
+function SkeletonBody({ hasHeader, hasFooter, contentLines }) {
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    hasHeader && /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(View, { className: "h-5 w-1/3 bg-interactive-disabled rounded" }),
+      /* @__PURE__ */ jsx(View, { className: "mt-2 h-4 w-2/3 bg-interactive-disabled rounded" })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: Array.from({ length: contentLines }).map((_, i) => /* @__PURE__ */ jsx(
+      View,
+      {
+        className: cn(
+          "h-4 bg-interactive-disabled rounded",
+          i < contentLines - 1 ? "mb-2 w-full" : "w-4/5"
+        )
+      },
+      i
+    )) }),
+    hasFooter && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(View, { className: "h-9 w-24 bg-interactive-disabled rounded" }) })
+  ] });
+}
+var solidFillToken = {
+  success: "status-success",
+  warning: "status-warning",
+  error: "status-error",
+  neutral: "text-tertiary"
 };
-var ringVariantStyles = {
-  "on-track": {
-    backgroundColor: "rgba(46,213,115,0.15)",
-    borderWidth: 1,
-    borderColor: "rgba(46,213,115,0.3)"
-  },
-  deviation: {
-    backgroundColor: "rgba(245,158,11,0.15)",
-    borderWidth: 1,
-    borderColor: "rgba(245,158,11,0.25)"
-  },
-  future: {
-    backgroundColor: "rgba(107,114,128,0.1)",
-    borderWidth: 1,
-    borderStyle: "dashed",
-    borderColor: "rgba(107,114,128,0.2)"
-  }
+var ringWashToken = {
+  "on-track": { fill: "status-success-subtle", border: "status-success-muted" },
+  deviation: { fill: "status-warning-subtle", border: "status-warning-muted" }
 };
-var glowStyles = {
-  success: { boxShadow: "0 0 4px rgba(46,213,115,0.4)" },
-  warning: { boxShadow: "0 0 4px rgba(245,158,11,0.4)" },
-  error: { boxShadow: "0 0 4px rgba(239,68,68,0.4)" },
-  neutral: { boxShadow: "0 0 4px rgba(107,114,128,0.4)" },
-  "on-track": { boxShadow: "0 0 4px rgba(46,213,115,0.4)" },
-  deviation: { boxShadow: "0 0 4px rgba(245,158,11,0.4)" },
-  future: { boxShadow: "0 0 4px rgba(107,114,128,0.4)" }
+var FUTURE_FILL = alpha(greyRamp[500], 0.1);
+var FUTURE_BORDER = alpha(greyRamp[500], 0.2);
+var glyphToken = {
+  success: "text-inverse",
+  warning: "text-inverse",
+  error: "text-inverse",
+  neutral: "text-inverse",
+  "on-track": "status-success",
+  deviation: "status-warning",
+  future: "text-tertiary"
 };
+var glowColors = {
+  success: semanticColorsDark["status-success"],
+  warning: semanticColorsDark["status-warning"],
+  error: semanticColorsDark["status-error"],
+  neutral: greyRamp[500],
+  "on-track": semanticColorsDark["status-success"],
+  deviation: semanticColorsDark["status-warning"],
+  future: greyRamp[500]
+};
+var glowStyles = Object.fromEntries(
+  Object.entries(glowColors).map(([variant, color]) => [variant, getGlowShadow(color, "subtle")])
+);
 var iconChars = {
   check: "\u2713",
   exclamation: "!",
   dash: "\u2014"
 };
-var iconColors = {
-  success: "#0A5C52",
-  warning: "#6B4000",
-  error: "#5C1A1A",
-  neutral: greyRamp[200],
-  "on-track": t5["status-success"],
-  deviation: t5["status-warning"],
-  future: greyRamp[500]
-};
 var sizeDimensions = {
   sm: { size: 8, showIcon: false },
   md: { size: 18, showIcon: true }
 };
 function isSolidVariant(variant) {
-  return variant in solidVariantColors;
+  return variant in solidFillToken;
+}
+function ringStyle(variant) {
+  if (variant === "future") {
+    return {
+      backgroundColor: FUTURE_FILL,
+      borderWidth: 1,
+      borderStyle: "dashed",
+      borderColor: FUTURE_BORDER
+    };
+  }
+  if (variant === "on-track" || variant === "deviation") {
+    const tokens = ringWashToken[variant];
+    return {
+      backgroundColor: resolveColor(tokens.fill),
+      borderWidth: 1,
+      borderColor: resolveColor(tokens.border)
+    };
+  }
+  return void 0;
 }
 function StatusDot({
   variant,
@@ -4579,7 +4494,7 @@ function StatusDot({
 }) {
   const config = sizeDimensions[size];
   const solid = isSolidVariant(variant);
-  const ring = ringVariantStyles[variant];
+  const ring = ringStyle(variant);
   const glowStyle = glow ? glowStyles[variant] : null;
   const dot = /* @__PURE__ */ jsx(
     View,
@@ -4593,22 +4508,22 @@ function StatusDot({
           justifyContent: "center",
           flexShrink: 0
         },
-        solid ? { backgroundColor: solidVariantColors[variant] } : void 0,
-        ring ? ring : void 0,
+        solid ? { backgroundColor: resolveColor(solidFillToken[variant]) } : void 0,
+        ring,
         glowStyle ? glowStyle : void 0
       ],
       accessibilityRole: "image",
       accessibilityLabel: `${variant} status`,
       testID: "status-dot",
-      children: config.showIcon && icon && /* @__PURE__ */ jsx(
-        Text,
+      children: config.showIcon && icon && // The glyph was 11px/900, off the type scale (TOKENS.md §4); `boldLabel` is
+      // the 12px sans label step and `font-black` keeps the original weight.
+      /* @__PURE__ */ jsx(
+        Typography,
         {
-          style: {
-            fontSize: 11,
-            lineHeight: 11,
-            fontWeight: "900",
-            color: iconColors[variant]
-          },
+          variant: "boldLabel",
+          color: "inherit",
+          className: "font-black leading-none",
+          style: { color: resolveColor(glyphToken[variant]) },
           accessibilityElementsHidden: true,
           children: iconChars[icon]
         }
@@ -4626,9 +4541,11 @@ function StatusDot({
         children: [
           /* @__PURE__ */ jsx(View, { accessibilityElementsHidden: true, children: dot }),
           /* @__PURE__ */ jsx(
-            Text,
+            Typography,
             {
-              style: { fontSize: 12, lineHeight: 16, color: greyRamp[400] },
+              variant: "caption",
+              color: "secondary",
+              className: "leading-4",
               accessibilityElementsHidden: true,
               children: label
             }
@@ -4644,14 +4561,14 @@ var MESO_ACCENT_GRADIENT_LIGHT = primitiveRamps.orange[300];
 var WORKOUT_PILL_DELOAD = primitiveRamps.magenta[600];
 
 // src/components/custom/Workout/MesoStatusCard.tsx
-var t6 = getSemanticColors("dark");
-var BRAND_PRIMARY5 = t6["brand-primary"];
+var t3 = getSemanticColors("dark");
+var BRAND_PRIMARY4 = t3["brand-primary"];
 var BRAND_PRIMARY_DARK = MESO_ACCENT_GRADIENT_DARK;
 var BRAND_PRIMARY_LIGHT = MESO_ACCENT_GRADIENT_LIGHT;
-var SUCCESS = t6["status-success"];
-var WARNING = t6["status-warning"];
-var ERROR = t6["status-error"];
-var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY5, BRAND_PRIMARY_LIGHT];
+var SUCCESS = t3["status-success"];
+var WARNING = t3["status-warning"];
+var ERROR = t3["status-error"];
+var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY4, BRAND_PRIMARY_LIGHT];
 var CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor("surface-elevated")} 0%, ${resolveColor("surface-raised")} 100%)`;
 var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(249,180,21,0.25) 50%, rgba(209,67,67,0.25) 100%)";
 var STATUS_VARIANTS = {
@@ -4676,15 +4593,7 @@ function renderCoachingText(text, highlights) {
   if (escaped.length === 0) return text;
   const regex = new RegExp(`(${escaped.join("|")})`, "g");
   return text.split(regex).map(
-    (part, index) => highlights.includes(part) ? /* @__PURE__ */ jsx(
-      Text,
-      {
-        className: "text-text-primary",
-        style: { fontWeight: "700" },
-        children: part
-      },
-      `${part}-${index}`
-    ) : /* @__PURE__ */ jsx(Fragment$1, { children: part }, `t-${index}`)
+    (part, index) => highlights.includes(part) ? /* @__PURE__ */ jsx(Text, { className: "text-text-primary", style: { fontWeight: "700" }, children: part }, `${part}-${index}`) : /* @__PURE__ */ jsx(Fragment, { children: part }, `t-${index}`)
   );
 }
 function StatusPill({ badge }) {
@@ -4769,41 +4678,34 @@ function Gauge({ gauge }) {
       "aria-valuemax": 100,
       testID: "meso-status-card-gauge",
       children: [
-        /* @__PURE__ */ jsxs(
-          View,
-          {
-            className: "flex-row items-center justify-between",
-            accessibilityElementsHidden: true,
-            children: [
-              /* @__PURE__ */ jsx(
-                Text,
-                {
-                  className: "text-text-secondary",
-                  style: {
-                    fontSize: 10,
-                    fontFamily: "Inter, sans-serif",
-                    fontWeight: "500",
-                    letterSpacing: 0.5,
-                    textTransform: "uppercase"
-                  },
-                  children: gauge.label
-                }
-              ),
-              gauge.sublabel != null && /* @__PURE__ */ jsx(
-                Text,
-                {
-                  className: "text-text-tertiary",
-                  style: {
-                    fontSize: 10,
-                    fontFamily: "Inter, sans-serif",
-                    fontWeight: "500"
-                  },
-                  children: gauge.sublabel
-                }
-              )
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs(View, { className: "flex-row items-center justify-between", accessibilityElementsHidden: true, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: "text-text-secondary",
+              style: {
+                fontSize: 10,
+                fontFamily: "Inter, sans-serif",
+                fontWeight: "500",
+                letterSpacing: 0.5,
+                textTransform: "uppercase"
+              },
+              children: gauge.label
+            }
+          ),
+          gauge.sublabel != null && /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: "text-text-tertiary",
+              style: {
+                fontSize: 10,
+                fontFamily: "Inter, sans-serif",
+                fontWeight: "500"
+              },
+              children: gauge.sublabel
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxs(
           View,
           {
@@ -4844,7 +4746,8 @@ function Gauge({ gauge }) {
                     borderRadius: 9999,
                     borderWidth: 2,
                     backgroundColor: markerColor,
-                    boxShadow: "0 0 4px rgba(0,0,0,0.5)"
+                    // A knob resting on the gauge: lift, with the ring as its edge.
+                    ...liftStyle(1, "dark", { rim: 0 })
                   },
                   testID: "meso-status-card-gauge-marker"
                 }
@@ -4896,30 +4799,23 @@ function MesoStatusCard({
         ),
         /* @__PURE__ */ jsxs(View, { style: { padding: 14, gap: 14 }, testID: "meso-status-card-body", children: [
           /* @__PURE__ */ jsxs(View, { testID: "meso-status-card-header", children: [
-            /* @__PURE__ */ jsxs(
-              View,
-              {
-                className: "flex-row items-center justify-between",
-                style: { gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      className: "text-text-primary",
-                      style: {
-                        flexShrink: 1,
-                        fontSize: 15,
-                        fontFamily: '"Space Grotesk", sans-serif',
-                        fontWeight: "700"
-                      },
-                      testID: "meso-status-card-name",
-                      children: mesoName
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(StatusPill, { badge: statusBadge })
-                ]
-              }
-            ),
+            /* @__PURE__ */ jsxs(View, { className: "flex-row items-center justify-between", style: { gap: 8 }, children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  className: "text-text-primary",
+                  style: {
+                    flexShrink: 1,
+                    fontSize: 15,
+                    fontFamily: '"Space Grotesk", sans-serif',
+                    fontWeight: "700"
+                  },
+                  testID: "meso-status-card-name",
+                  children: mesoName
+                }
+              ),
+              /* @__PURE__ */ jsx(StatusPill, { badge: statusBadge })
+            ] }),
             /* @__PURE__ */ jsx(
               Text,
               {
@@ -4934,15 +4830,7 @@ function MesoStatusCard({
               }
             )
           ] }),
-          metrics.length > 0 && /* @__PURE__ */ jsx(
-            View,
-            {
-              className: "flex-row flex-wrap",
-              style: { gap: 8 },
-              testID: "meso-status-card-metrics",
-              children: metrics.map((metric, index) => /* @__PURE__ */ jsx(MetricCell2, { metric }, `${metric.label}-${index}`))
-            }
-          ),
+          metrics.length > 0 && /* @__PURE__ */ jsx(View, { className: "flex-row flex-wrap", style: { gap: 8 }, testID: "meso-status-card-metrics", children: metrics.map((metric, index) => /* @__PURE__ */ jsx(MetricCell2, { metric }, `${metric.label}-${index}`)) }),
           gauges.length > 0 && /* @__PURE__ */ jsx(View, { style: { gap: 12 }, testID: "meso-status-card-gauges", children: gauges.map((gauge, index) => /* @__PURE__ */ jsx(Gauge, { gauge }, `${gauge.label}-${index}`)) }),
           coaching != null && /* @__PURE__ */ jsx(
             View,
@@ -5008,7 +4896,7 @@ function MesoStatusCard({
   );
 }
 var sem = getSemanticColors("dark");
-var BRAND_PRIMARY6 = sem["brand-primary"];
+var BRAND_PRIMARY5 = sem["brand-primary"];
 var PROJECTION_LINE_COLOR = resolveColor("text-tertiary");
 var STATUS_SUCCESS2 = sem["status-success"];
 var STATUS_ERROR2 = sem["status-error"];
@@ -5021,8 +4909,8 @@ var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
 var PLOT_LEFT = 26;
 var TOOLTIP_WIDTH = 124;
 function timeOf(dateStr) {
-  const t12 = Date.parse(dateStr);
-  return Number.isNaN(t12) ? 0 : t12;
+  const t7 = Date.parse(dateStr);
+  return Number.isNaN(t7) ? 0 : t7;
 }
 function formatValue(value) {
   return `${Math.round(value)}`;
@@ -5063,9 +4951,7 @@ function buildGeometry(data, projection, boundaries, width, height) {
     point,
     index
   }));
-  const tickValues = Array.from(
-    new Set([yMax, (yMin + yMax) / 2, yMin].map((v) => Math.round(v)))
-  );
+  const tickValues = Array.from(new Set([yMax, (yMin + yMax) / 2, yMin].map((v) => Math.round(v))));
   const gridLines = tickValues.map((v) => ({ y: toY(v), label: formatValue(v) }));
   return {
     hasData: true,
@@ -5101,7 +4987,7 @@ function ChartLine({
   dashed,
   testID
 }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: coords.map((c2, i) => {
+  return /* @__PURE__ */ jsx(Fragment$1, { children: coords.map((c2, i) => {
     if (i === 0) return null;
     const prev = coords[i - 1];
     const dx = c2.x - prev.x;
@@ -5154,10 +5040,7 @@ function StrengthTrendChart({
     () => buildGeometry(data, projection, mesoBoundaries, width, height),
     [data, projection, mesoBoundaries, width, height]
   );
-  const trend = useMemo(
-    () => computeTrend(data, mesoBoundaries),
-    [data, mesoBoundaries]
-  );
+  const trend = useMemo(() => computeTrend(data, mesoBoundaries), [data, mesoBoundaries]);
   const [reveal] = useState(() => new Animated.Value(animateOnMount ? 0 : 1));
   const [selected, setSelected] = useState(null);
   useEffect(() => {
@@ -5194,7 +5077,14 @@ function StrengthTrendChart({
               alignItems: "center",
               justifyContent: "center"
             },
-            children: /* @__PURE__ */ jsx(Text, { className: "text-text-tertiary", style: { fontSize: 12, fontFamily: "Inter, sans-serif" }, children: "No strength data yet" })
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                className: "text-text-tertiary",
+                style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
+                children: "No strength data yet"
+              }
+            )
           }
         )
       }
@@ -5205,316 +5095,333 @@ function StrengthTrendChart({
     outputRange: [0, width]
   });
   const selectedCoord = selected != null ? geometry.actual[selected] : void 0;
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      style: { width },
-      className: cn(className),
-      testID: "strength-trend-chart",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs(View, { style: { width, height, position: "relative" }, children: [
-          /* @__PURE__ */ jsxs(
-            View,
-            {
-              style: { position: "absolute", top: 0, left: 0, width, height },
-              accessibilityRole: "image",
-              accessibilityLabel: ariaLabel,
-              testID: "strength-trend-chart-canvas",
-              children: [
-                geometry.gridLines.map((line, i) => /* @__PURE__ */ jsx(
-                  View,
-                  {
-                    accessibilityElementsHidden: true,
-                    testID: "strength-trend-chart-gridline",
-                    style: {
-                      position: "absolute",
-                      left: PLOT_LEFT,
-                      right: 0,
-                      top: line.y,
-                      height: 1,
-                      backgroundColor: GRID_LINE
-                    },
-                    children: /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        className: "text-text-tertiary",
-                        style: {
-                          position: "absolute",
-                          left: -PLOT_LEFT,
-                          top: -6,
-                          width: PLOT_LEFT - 4,
-                          textAlign: "right",
-                          fontSize: 9,
-                          fontFamily: "Inter, sans-serif"
-                        },
-                        children: line.label
-                      }
-                    )
-                  },
-                  `grid-${i}`
-                )),
-                geometry.boundaries.map((boundary, i) => /* @__PURE__ */ jsx(
-                  View,
-                  {
-                    accessibilityElementsHidden: true,
-                    testID: "strength-trend-chart-meso-boundary",
-                    style: {
-                      position: "absolute",
-                      left: boundary.x,
-                      top: 0,
-                      width: 0,
-                      height,
-                      borderLeftWidth: 1,
-                      borderStyle: "dashed",
-                      borderLeftColor: "rgba(255,255,255,0.10)"
-                    }
-                  },
-                  `boundary-${i}`
-                )),
-                /* @__PURE__ */ jsx(
-                  Animated.View,
+  return /* @__PURE__ */ jsxs(View, { style: { width }, className: cn(className), testID: "strength-trend-chart", ...props, children: [
+    /* @__PURE__ */ jsxs(View, { style: { width, height, position: "relative" }, children: [
+      /* @__PURE__ */ jsxs(
+        View,
+        {
+          style: { position: "absolute", top: 0, left: 0, width, height },
+          accessibilityRole: "image",
+          accessibilityLabel: ariaLabel,
+          testID: "strength-trend-chart-canvas",
+          children: [
+            geometry.gridLines.map((line, i) => /* @__PURE__ */ jsx(
+              View,
+              {
+                accessibilityElementsHidden: true,
+                testID: "strength-trend-chart-gridline",
+                style: {
+                  position: "absolute",
+                  left: PLOT_LEFT,
+                  right: 0,
+                  top: line.y,
+                  height: 1,
+                  backgroundColor: GRID_LINE
+                },
+                children: /* @__PURE__ */ jsx(
+                  Text,
                   {
+                    className: "text-text-tertiary",
                     style: {
                       position: "absolute",
-                      top: 0,
-                      left: 0,
-                      width: revealWidth,
-                      height,
-                      overflow: "hidden"
+                      left: -PLOT_LEFT,
+                      top: -6,
+                      width: PLOT_LEFT - 4,
+                      textAlign: "right",
+                      fontSize: 9,
+                      fontFamily: "Inter, sans-serif"
                     },
-                    testID: "strength-trend-chart-reveal",
-                    children: /* @__PURE__ */ jsxs(View, { style: { width, height, position: "absolute", top: 0, left: 0 }, children: [
-                      /* @__PURE__ */ jsx(
-                        ChartLine,
-                        {
-                          coords: geometry.projection,
-                          color: PROJECTION_LINE_COLOR,
-                          strokeWidth: 2,
-                          dashed: true,
-                          testID: "strength-trend-chart-projection-segment"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        ChartLine,
-                        {
-                          coords: geometry.actual,
-                          color: BRAND_PRIMARY6,
-                          strokeWidth: 2.5,
-                          testID: "strength-trend-chart-actual-segment"
-                        }
-                      )
-                    ] })
+                    children: line.label
                   }
-                ),
-                geometry.actual.map(
-                  (c2) => c2.point.isPR ? /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      accessibilityElementsHidden: true,
-                      testID: "strength-trend-chart-pr-star",
-                      style: {
-                        position: "absolute",
-                        left: c2.x - 7,
-                        top: c2.y - 20,
-                        fontSize: 12,
-                        color: STATUS_WARNING2
-                      },
-                      children: "\u2605"
-                    },
-                    `star-${c2.index}`
-                  ) : null
                 )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            View,
-            {
-              style: { position: "absolute", top: 0, left: 0, width, height },
-              testID: "strength-trend-chart-points",
-              children: geometry.actual.map((c2) => {
-                const label = c2.point.sessionLabel ?? c2.point.date;
-                return /* @__PURE__ */ jsx(
-                  Pressable,
-                  {
-                    testID: "strength-trend-chart-point",
-                    accessibilityRole: "button",
-                    accessibilityLabel: `${label}: ${formatValue(c2.point.e1rm)} ${unit}${c2.point.isPR ? ", personal record" : ""}`,
-                    onPress: () => {
-                      setSelected(c2.index);
-                      onPointPress?.(c2.point);
-                    },
-                    style: {
-                      position: "absolute",
-                      left: c2.x - 4,
-                      top: c2.y - 4,
-                      width: 8,
-                      height: 8,
-                      borderRadius: 1,
-                      backgroundColor: BRAND_PRIMARY6
+              },
+              `grid-${i}`
+            )),
+            geometry.boundaries.map((boundary, i) => /* @__PURE__ */ jsx(
+              View,
+              {
+                accessibilityElementsHidden: true,
+                testID: "strength-trend-chart-meso-boundary",
+                style: {
+                  position: "absolute",
+                  left: boundary.x,
+                  top: 0,
+                  width: 0,
+                  height,
+                  borderLeftWidth: 1,
+                  borderStyle: "dashed",
+                  borderLeftColor: "rgba(255,255,255,0.10)"
+                }
+              },
+              `boundary-${i}`
+            )),
+            /* @__PURE__ */ jsx(
+              Animated.View,
+              {
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: revealWidth,
+                  height,
+                  overflow: "hidden"
+                },
+                testID: "strength-trend-chart-reveal",
+                children: /* @__PURE__ */ jsxs(View, { style: { width, height, position: "absolute", top: 0, left: 0 }, children: [
+                  /* @__PURE__ */ jsx(
+                    ChartLine,
+                    {
+                      coords: geometry.projection,
+                      color: PROJECTION_LINE_COLOR,
+                      strokeWidth: 2,
+                      dashed: true,
+                      testID: "strength-trend-chart-projection-segment"
                     }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ChartLine,
+                    {
+                      coords: geometry.actual,
+                      color: BRAND_PRIMARY5,
+                      strokeWidth: 2.5,
+                      testID: "strength-trend-chart-actual-segment"
+                    }
+                  )
+                ] })
+              }
+            ),
+            geometry.actual.map(
+              (c2) => c2.point.isPR ? /* @__PURE__ */ jsx(
+                Text,
+                {
+                  accessibilityElementsHidden: true,
+                  testID: "strength-trend-chart-pr-star",
+                  style: {
+                    position: "absolute",
+                    left: c2.x - 7,
+                    top: c2.y - 20,
+                    fontSize: 12,
+                    color: STATUS_WARNING2
                   },
-                  `point-${c2.index}`
-                );
-              })
-            }
-          ),
-          selectedCoord && /* @__PURE__ */ jsxs(
-            View,
-            {
-              testID: "strength-trend-chart-tooltip",
-              accessibilityElementsHidden: true,
-              className: "bg-surface-elevated border-hairline-strong",
-              style: {
-                position: "absolute",
-                left: Math.max(
-                  0,
-                  Math.min(width - TOOLTIP_WIDTH, selectedCoord.x - TOOLTIP_WIDTH / 2)
-                ),
-                top: Math.max(0, selectedCoord.y - 52),
-                maxWidth: TOOLTIP_WIDTH,
-                borderWidth: 1,
-                borderRadius: 8,
-                paddingVertical: 8,
-                paddingHorizontal: 10
+                  children: "\u2605"
+                },
+                `star-${c2.index}`
+              ) : null
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          style: { position: "absolute", top: 0, left: 0, width, height },
+          testID: "strength-trend-chart-points",
+          children: geometry.actual.map((c2) => {
+            const label = c2.point.sessionLabel ?? c2.point.date;
+            return /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                testID: "strength-trend-chart-point",
+                accessibilityRole: "button",
+                accessibilityLabel: `${label}: ${formatValue(c2.point.e1rm)} ${unit}${c2.point.isPR ? ", personal record" : ""}`,
+                onPress: () => {
+                  setSelected(c2.index);
+                  onPointPress?.(c2.point);
+                },
+                style: {
+                  position: "absolute",
+                  left: c2.x - 4,
+                  top: c2.y - 4,
+                  width: 8,
+                  height: 8,
+                  borderRadius: 1,
+                  backgroundColor: BRAND_PRIMARY5
+                }
               },
-              children: [
-                /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    className: "text-text-tertiary",
-                    style: {
-                      fontSize: 10,
-                      fontFamily: "Inter, sans-serif"
-                    },
-                    children: selectedCoord.point.sessionLabel ?? selectedCoord.point.date
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    className: "text-text-primary",
-                    style: {
-                      marginTop: 2,
-                      fontSize: 13,
-                      fontFamily: "Inter, sans-serif",
-                      fontWeight: "700"
-                    },
-                    children: `${formatValue(selectedCoord.point.e1rm)} ${unit}`
-                  }
-                ),
-                selected != null && selected > 0 && /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    style: {
-                      marginTop: 1,
-                      fontSize: 10,
-                      fontFamily: "Inter, sans-serif",
-                      color: selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm >= 0 ? STATUS_SUCCESS2 : STATUS_ERROR2
-                    },
-                    children: `${selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm >= 0 ? "+" : "-"}${Math.abs(
-                      selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm
-                    ).toFixed(1)} ${unit}`
-                  }
-                )
-              ]
-            }
-          )
-        ] }),
-        geometry.boundaries.length > 0 && /* @__PURE__ */ jsx(
-          View,
-          {
-            style: { width, height: 14, position: "relative", marginTop: 2 },
-            accessibilityElementsHidden: true,
-            testID: "strength-trend-chart-axis",
-            children: geometry.boundaries.map((boundary, i) => /* @__PURE__ */ jsx(
+              `point-${c2.index}`
+            );
+          })
+        }
+      ),
+      selectedCoord && /* @__PURE__ */ jsxs(
+        View,
+        {
+          testID: "strength-trend-chart-tooltip",
+          accessibilityElementsHidden: true,
+          className: "bg-surface-elevated border-hairline-strong",
+          style: {
+            position: "absolute",
+            left: Math.max(
+              0,
+              Math.min(width - TOOLTIP_WIDTH, selectedCoord.x - TOOLTIP_WIDTH / 2)
+            ),
+            top: Math.max(0, selectedCoord.y - 52),
+            maxWidth: TOOLTIP_WIDTH,
+            borderWidth: 1,
+            borderRadius: 8,
+            paddingVertical: 8,
+            paddingHorizontal: 10
+          },
+          children: [
+            /* @__PURE__ */ jsx(
               Text,
               {
-                testID: "strength-trend-chart-axis-label",
                 className: "text-text-tertiary",
                 style: {
-                  position: "absolute",
-                  left: boundary.x - 24,
-                  width: 48,
-                  textAlign: "center",
                   fontSize: 10,
                   fontFamily: "Inter, sans-serif"
                 },
-                children: boundary.label
-              },
-              `axis-${i}`
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsx(View, { className: "flex-row", style: { marginTop: 8 }, children: /* @__PURE__ */ jsx(
-          View,
-          {
-            testID: "strength-trend-chart-trend-pill",
-            accessibilityLabel: `Strength trend: ${trendText}`,
-            style: {
-              paddingVertical: 3,
-              paddingHorizontal: 8,
-              borderRadius: 4,
-              borderWidth: 1,
-              backgroundColor: trend.positive ? SUCCESS_PILL_BG : ERROR_PILL_BG,
-              borderColor: trend.positive ? SUCCESS_PILL_BORDER : ERROR_PILL_BORDER
-            },
-            children: /* @__PURE__ */ jsx(
+                children: selectedCoord.point.sessionLabel ?? selectedCoord.point.date
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                className: "text-text-primary",
+                style: {
+                  marginTop: 2,
+                  fontSize: 13,
+                  fontFamily: "Inter, sans-serif",
+                  fontWeight: "700"
+                },
+                children: `${formatValue(selectedCoord.point.e1rm)} ${unit}`
+              }
+            ),
+            selected != null && selected > 0 && /* @__PURE__ */ jsx(
               Text,
               {
                 style: {
-                  fontSize: 11,
+                  marginTop: 1,
+                  fontSize: 10,
                   fontFamily: "Inter, sans-serif",
-                  fontWeight: "600",
-                  color: trend.positive ? STATUS_SUCCESS2 : STATUS_ERROR2
+                  color: selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm >= 0 ? STATUS_SUCCESS2 : STATUS_ERROR2
                 },
-                children: trendText
+                children: `${selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm >= 0 ? "+" : "-"}${Math.abs(
+                  selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm
+                ).toFixed(1)} ${unit}`
               }
             )
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(
-          View,
+          ]
+        }
+      )
+    ] }),
+    geometry.boundaries.length > 0 && /* @__PURE__ */ jsx(
+      View,
+      {
+        style: { width, height: 14, position: "relative", marginTop: 2 },
+        accessibilityElementsHidden: true,
+        testID: "strength-trend-chart-axis",
+        children: geometry.boundaries.map((boundary, i) => /* @__PURE__ */ jsx(
+          Text,
           {
-            className: "flex-row items-center",
-            style: { marginTop: 8, gap: 14 },
-            testID: "strength-trend-chart-legend",
-            children: [
-              /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 5 }, children: [
-                /* @__PURE__ */ jsx(View, { style: { width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY6 } }),
-                /* @__PURE__ */ jsx(Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "Actual" })
-              ] }),
-              /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 5 }, children: [
-                /* @__PURE__ */ jsx(
-                  View,
-                  {
-                    style: {
-                      width: 14,
-                      height: 0,
-                      borderTopWidth: 2,
-                      borderStyle: "dashed",
-                      borderTopColor: PROJECTION_LINE_COLOR
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "Projected" })
-              ] }),
-              /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 5 }, children: [
-                /* @__PURE__ */ jsx(Text, { style: { fontSize: 12, color: STATUS_WARNING2 }, children: "\u2605" }),
-                /* @__PURE__ */ jsx(Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "PR" })
-              ] })
-            ]
+            testID: "strength-trend-chart-axis-label",
+            className: "text-text-tertiary",
+            style: {
+              position: "absolute",
+              left: boundary.x - 24,
+              width: 48,
+              textAlign: "center",
+              fontSize: 10,
+              fontFamily: "Inter, sans-serif"
+            },
+            children: boundary.label
+          },
+          `axis-${i}`
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { className: "flex-row", style: { marginTop: 8 }, children: /* @__PURE__ */ jsx(
+      View,
+      {
+        testID: "strength-trend-chart-trend-pill",
+        accessibilityLabel: `Strength trend: ${trendText}`,
+        style: {
+          paddingVertical: 3,
+          paddingHorizontal: 8,
+          borderRadius: 4,
+          borderWidth: 1,
+          backgroundColor: trend.positive ? SUCCESS_PILL_BG : ERROR_PILL_BG,
+          borderColor: trend.positive ? SUCCESS_PILL_BORDER : ERROR_PILL_BORDER
+        },
+        children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              fontSize: 11,
+              fontFamily: "Inter, sans-serif",
+              fontWeight: "600",
+              color: trend.positive ? STATUS_SUCCESS2 : STATUS_ERROR2
+            },
+            children: trendText
           }
         )
-      ]
-    }
-  );
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        className: "flex-row items-center",
+        style: { marginTop: 8, gap: 14 },
+        testID: "strength-trend-chart-legend",
+        children: [
+          /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 5 }, children: [
+            /* @__PURE__ */ jsx(
+              View,
+              {
+                style: { width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY5 }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                className: "text-text-secondary",
+                style: { fontSize: 10, fontFamily: "Inter, sans-serif" },
+                children: "Actual"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 5 }, children: [
+            /* @__PURE__ */ jsx(
+              View,
+              {
+                style: {
+                  width: 14,
+                  height: 0,
+                  borderTopWidth: 2,
+                  borderStyle: "dashed",
+                  borderTopColor: PROJECTION_LINE_COLOR
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                className: "text-text-secondary",
+                style: { fontSize: 10, fontFamily: "Inter, sans-serif" },
+                children: "Projected"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 5 }, children: [
+            /* @__PURE__ */ jsx(Text, { style: { fontSize: 12, color: STATUS_WARNING2 }, children: "\u2605" }),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                className: "text-text-secondary",
+                style: { fontSize: 10, fontFamily: "Inter, sans-serif" },
+                children: "PR"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
 }
-var t7 = getSemanticColors("dark");
-var STATUS_SUCCESS3 = t7["status-success"];
-var STATUS_WARNING3 = t7["status-warning"];
-var STATUS_INFO = t7["status-info"];
+var t4 = getSemanticColors("dark");
+var STATUS_SUCCESS3 = t4["status-success"];
+var STATUS_WARNING3 = t4["status-warning"];
+var STATUS_INFO = t4["status-info"];
 var DOT_BORDER = "#F3F4F6";
 var BAND_FILL = "rgba(46,213,115,0.1)";
 var BAND_EDGE = "rgba(46,213,115,0.45)";
@@ -5557,8 +5464,8 @@ function interpEdge(pixels, x, key) {
     const a = pixels[i];
     const b = pixels[i + 1];
     if (x >= a.x && x <= b.x) {
-      const t12 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
-      return a[key] + t12 * (b[key] - a[key]);
+      const t7 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
+      return a[key] + t7 * (b[key] - a[key]);
     }
   }
   return pixels[pixels.length - 1][key];
@@ -5744,18 +5651,53 @@ function CapacityBandChart({
               /* @__PURE__ */ jsx(
                 Animated.View,
                 {
-                  style: { position: "absolute", top: 0, left: 0, height, width: revealWidth, overflow: "hidden" },
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    height,
+                    width: revealWidth,
+                    overflow: "hidden"
+                  },
                   accessibilityElementsHidden: true,
                   importantForAccessibility: "no-hide-descendants",
                   testID: "capacity-band-chart-reveal",
                   children: /* @__PURE__ */ jsxs(View, { style: { width, height, position: "relative" }, children: [
                     projection && /* @__PURE__ */ jsxs(View, { testID: "capacity-band-chart-projection", children: [
-                      renderColumns(buildColumns2(trainingPixels, COLUMN_STEP), PROJECTION_FILL, "capacity-band-chart-projection-fill"),
-                      renderColumns(buildColumns2(restPixels, COLUMN_STEP), PROJECTION_FILL, "capacity-band-chart-projection-fill"),
-                      renderEdges(buildEdges(trainingPixels, "yHigh"), STATUS_SUCCESS3, true, "capacity-band-chart-projection-training"),
-                      renderEdges(buildEdges(trainingPixels, "yLow"), STATUS_SUCCESS3, true, "capacity-band-chart-projection-training"),
-                      renderEdges(buildEdges(restPixels, "yHigh"), STATUS_INFO, true, "capacity-band-chart-projection-rest"),
-                      renderEdges(buildEdges(restPixels, "yLow"), STATUS_INFO, true, "capacity-band-chart-projection-rest"),
+                      renderColumns(
+                        buildColumns2(trainingPixels, COLUMN_STEP),
+                        PROJECTION_FILL,
+                        "capacity-band-chart-projection-fill"
+                      ),
+                      renderColumns(
+                        buildColumns2(restPixels, COLUMN_STEP),
+                        PROJECTION_FILL,
+                        "capacity-band-chart-projection-fill"
+                      ),
+                      renderEdges(
+                        buildEdges(trainingPixels, "yHigh"),
+                        STATUS_SUCCESS3,
+                        true,
+                        "capacity-band-chart-projection-training"
+                      ),
+                      renderEdges(
+                        buildEdges(trainingPixels, "yLow"),
+                        STATUS_SUCCESS3,
+                        true,
+                        "capacity-band-chart-projection-training"
+                      ),
+                      renderEdges(
+                        buildEdges(restPixels, "yHigh"),
+                        STATUS_INFO,
+                        true,
+                        "capacity-band-chart-projection-rest"
+                      ),
+                      renderEdges(
+                        buildEdges(restPixels, "yLow"),
+                        STATUS_INFO,
+                        true,
+                        "capacity-band-chart-projection-rest"
+                      ),
                       /* @__PURE__ */ jsx(
                         Text,
                         {
@@ -5890,7 +5832,7 @@ function CapacityBandChart({
 }
 
 // src/components/custom/Workout/ExerciseDetailPage.tsx
-var BRAND_PRIMARY7 = getSemanticColors("dark")["brand-primary"];
+var BRAND_PRIMARY6 = getSemanticColors("dark")["brand-primary"];
 var CHART_WIDTH = 326;
 var CHART_HEIGHT = 150;
 var EXERCISE_DETAIL_TABS = [
@@ -5953,7 +5895,7 @@ function TabBar({ active, onSelect }) {
               alignItems: "center",
               paddingVertical: 10,
               borderBottomWidth: 2,
-              borderBottomColor: isActive ? BRAND_PRIMARY7 : "transparent"
+              borderBottomColor: isActive ? BRAND_PRIMARY6 : "transparent"
             },
             testID: `exercise-detail-page-tab-${key}`,
             children: /* @__PURE__ */ jsx(
@@ -6284,7 +6226,7 @@ function ExerciseDetailPage({
                           fontSize: 15,
                           fontFamily: '"Space Grotesk", sans-serif',
                           fontWeight: "700",
-                          color: BRAND_PRIMARY7
+                          color: BRAND_PRIMARY6
                         },
                         children: `${exercise.currentE1rm} ${exercise.unit}`
                       }
@@ -6350,11 +6292,10 @@ function ExerciseDetailPage({
     }
   );
 }
-var BRAND_PRIMARY8 = getSemanticColors("dark")["brand-primary"];
-var segmentBgColors = {
-  completed: "rgba(46,213,115,0.3)",
-  current: "rgba(255,121,0,0.5)",
-  upcoming: "rgba(255,255,255,0.06)"
+var segmentTrackToken = {
+  completed: "status-success-muted",
+  current: "brand-primary-strong",
+  upcoming: "hairline-subtle"
 };
 function clampProgress(currentWeek, weekCount) {
   if (currentWeek == null || weekCount <= 0) return 0;
@@ -6363,6 +6304,7 @@ function clampProgress(currentWeek, weekCount) {
 }
 function MesoSegment({ meso, isActive, onPress }) {
   const [pressScale] = useState(() => new Animated.Value(1));
+  const brandPrimary = resolveColor("brand-primary");
   const handlePressIn = () => {
     Animated.timing(pressScale, {
       toValue: 0.98,
@@ -6397,12 +6339,12 @@ function MesoSegment({ meso, isActive, onPress }) {
               height: 8,
               borderRadius: 4,
               overflow: "hidden",
-              backgroundColor: segmentBgColors[meso.status],
+              backgroundColor: resolveColor(segmentTrackToken[meso.status]),
               transform: [{ scale: pressScale }]
             },
             isActive ? {
               borderWidth: 2,
-              borderColor: BRAND_PRIMARY8,
+              borderColor: brandPrimary,
               transform: [{ scale: 1.02 }, { scale: pressScale }]
             } : void 0
           ],
@@ -6416,7 +6358,7 @@ function MesoSegment({ meso, isActive, onPress }) {
                 top: 0,
                 bottom: 0,
                 width: `${progress * 100}%`,
-                backgroundColor: BRAND_PRIMARY8
+                backgroundColor: brandPrimary
               },
               testID: `meso-segment-fill-${meso.id}`
             }
@@ -6463,7 +6405,7 @@ var sizeStyles = {
   md: "w-2 h-2",
   lg: "w-2.5 h-2.5"
 };
-var colorStyles = {
+var colorStyles2 = {
   default: "bg-text-tertiary",
   primary: "bg-brand-primary",
   success: "bg-status-success",
@@ -6473,6 +6415,17 @@ var colorStyles = {
   info: "bg-status-info",
   "error-vivid": "bg-status-error-vivid"
 };
+var t5 = getSemanticColors("dark");
+var glowColors2 = {
+  default: greyRamp[500],
+  primary: t5["brand-primary"],
+  success: t5["status-success"],
+  live: t5["status-live"],
+  error: t5["status-error"],
+  warning: t5["status-warning"],
+  info: t5["status-info"],
+  "error-vivid": t5["status-error-vivid"]
+};
 function Indicator({
   size = "sm",
   color = "default",
@@ -6485,7 +6438,7 @@ function Indicator({
   ...props
 }) {
   const pulseMode = pulse === true ? "opacity" : pulse || false;
-  const colorClass = !customColor ? colorStyles[color] : void 0;
+  const colorClass = !customColor ? colorStyles2[color] : void 0;
   const colorStyle = customColor ? { backgroundColor: customColor } : void 0;
   if (pulseMode === "ping") {
     return /* @__PURE__ */ jsxs(View, { className: cn("relative", sizeStyles[size], className), style, ...props, children: [
@@ -6510,11 +6463,7 @@ function Indicator({
       )
     ] });
   }
-  const dynamicStyle = {
-    ...typeof style === "object" ? style : {},
-    ...colorStyle ?? {},
-    ...glow && customColor ? { boxShadow: `0 0 6px ${customColor}` } : {}
-  };
+  const glowStyle = glow ? getGlowShadow(customColor ?? glowColors2[color], "subtle") : null;
   return /* @__PURE__ */ jsx(
     View,
     {
@@ -6524,54 +6473,165 @@ function Indicator({
         colorClass,
         pulseMode === "opacity" && "animate-pulse",
         ring && "border-2 border-background-base",
-        glow && !customColor && (color === "success" || color === "live") && "shadow-[0_0_6px_rgba(46,213,115,0.6)]",
-        glow && !customColor && color === "error" && "shadow-[0_0_6px_rgba(239,68,68,0.6)]",
-        glow && !customColor && color === "warning" && "shadow-[0_0_6px_rgba(245,158,11,0.6)]",
-        glow && !customColor && color === "primary" && "shadow-[0_0_6px_rgba(255,121,0,0.6)]",
-        glow && !customColor && color === "error-vivid" && "shadow-[0_0_6px_rgba(255,71,87,0.6)]",
         className
       ),
-      style: Object.keys(dynamicStyle).length > 0 ? dynamicStyle : style,
+      style: [style, colorStyle, glowStyle],
       ...props
     }
   );
 }
-
-// src/components/ui/badge/Badge.tsx
-var variantColorStyles = {
+var colorToTone = {
+  default: "neutral",
+  primary: "brand",
+  secondary: "brand-secondary",
+  success: "success",
+  error: "error",
+  warning: "warning",
+  info: "info"
+};
+var toneStyles = {
   solid: {
-    default: "bg-hairline-strong text-text-inverse",
-    primary: "bg-brand-primary text-text-inverse",
-    secondary: "bg-brand-secondary text-text-inverse",
-    success: "bg-status-success text-text-inverse",
-    error: "bg-status-error text-text-inverse",
-    warning: "bg-status-warning text-text-inverse",
-    info: "bg-status-info text-text-inverse"
+    neutral: "bg-hairline-strong border-transparent text-text-inverse",
+    brand: "bg-brand-primary border-transparent text-text-inverse",
+    "brand-secondary": "bg-brand-secondary border-transparent text-text-inverse",
+    success: "bg-status-success border-transparent text-text-inverse",
+    warning: "bg-status-warning border-transparent text-text-inverse",
+    error: "bg-status-error border-transparent text-text-inverse",
+    info: "bg-status-info border-transparent text-text-inverse"
   },
   subtle: {
-    default: "bg-surface-raised text-text-secondary",
-    primary: "bg-brand-primary-subtle text-brand-primary",
-    secondary: "bg-brand-secondary-subtle text-brand-secondary",
-    success: "bg-status-success-subtle text-status-success",
-    error: "bg-status-error-subtle text-status-error",
-    warning: "bg-status-warning-subtle text-status-warning",
-    info: "bg-status-info-subtle text-status-info"
+    // Alpha-white rather than a ramp step: a pill sits on whatever plane its
+    // host is, and an alpha fill composites by the same amount on all of them.
+    // A `surface-*` fill would vanish on the plane it names. Borderless like the
+    // six coloured tones — the fill carries the capsule, not a ring.
+    neutral: "bg-hairline-subtle border-transparent text-text-secondary",
+    brand: "bg-brand-primary-subtle border-transparent text-brand-primary",
+    "brand-secondary": "bg-brand-secondary-subtle border-transparent text-brand-secondary",
+    success: "bg-status-success-subtle border-transparent text-status-success",
+    warning: "bg-status-warning-subtle border-transparent text-status-warning",
+    error: "bg-status-error-subtle border-transparent text-status-error",
+    info: "bg-status-info-subtle border-transparent text-status-info"
   },
   outline: {
-    default: "border border-hairline-strong text-text-secondary",
-    primary: "border border-brand-primary text-brand-primary",
-    secondary: "border border-brand-secondary text-brand-secondary",
-    success: "border border-status-success text-status-success",
-    error: "border border-status-error text-status-error",
-    warning: "border border-status-warning text-status-warning",
-    info: "border border-status-info text-status-info"
+    neutral: "border-hairline text-text-secondary",
+    brand: "border-brand-primary text-brand-primary",
+    "brand-secondary": "border-brand-secondary text-brand-secondary",
+    success: "border-status-success text-status-success",
+    warning: "border-status-warning text-status-warning",
+    error: "border-status-error text-status-error",
+    info: "border-status-info text-status-info"
   }
 };
+var dotToneStyles = {
+  neutral: "bg-text-tertiary",
+  brand: "bg-brand-primary",
+  "brand-secondary": "bg-brand-secondary",
+  success: "bg-status-success",
+  warning: "bg-status-warning",
+  error: "bg-status-error",
+  info: "bg-status-info"
+};
 var sizeStyles2 = {
-  sm: "px-1.5 py-0.5 text-xs",
-  md: "px-2 py-0.5 text-xs",
-  lg: "px-2.5 py-1 text-sm"
+  xs: { container: "px-1 py-px", text: "text-3xs" },
+  sm: { container: "px-2 py-0.5", text: "text-2xs" },
+  md: { container: "px-2.5 py-1", text: "text-xs" },
+  lg: { container: "px-3 py-1.5", text: "text-sm" },
+  xl: { container: "px-4 py-2", text: "text-base" }
+};
+function PillDot({ tone, testID }) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn("w-1.5 h-1.5 rounded-full shrink-0", dotToneStyles[tone]),
+      accessibilityElementsHidden: true,
+      testID: testID ? `${testID}-dot` : "pill-dot"
+    }
+  );
+}
+function containerClasses(p, tone) {
+  return cn(
+    "flex-row items-center gap-1 border self-start shrink-0",
+    p.rounded === false ? "rounded" : "rounded-full",
+    toneStyles[p.variant ?? "subtle"][tone],
+    sizeStyles2[p.size ?? "sm"].container,
+    p.isDisabled && "opacity-50",
+    p.className
+  );
+}
+function PillContent({ tone, ...p }) {
+  const textClasses = cn(
+    "font-heading font-semibold text-inherit",
+    sizeStyles2[p.size ?? "sm"].text,
+    p.textClassName
+  );
+  const slot = p.leading ?? p.leftElement;
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    slot === "dot" ? /* @__PURE__ */ jsx(PillDot, { tone: p.dotTone ?? tone, testID: p.testID }) : slot,
+    typeof p.children === "string" ? /* @__PURE__ */ jsx(Text, { className: textClasses, children: p.children }) : p.children,
+    p.trailing
+  ] });
+}
+function Pill(props) {
+  const {
+    variant,
+    tone,
+    color,
+    size,
+    rounded,
+    leading,
+    dotTone: dotTone2,
+    leftElement,
+    trailing,
+    onPress,
+    isDisabled,
+    className,
+    textClassName,
+    children,
+    ...viewProps
+  } = props;
+  const resolvedTone = tone ?? (color ? colorToTone[color] : "neutral");
+  const classes = containerClasses(props, resolvedTone);
+  const content = /* @__PURE__ */ jsx(PillContent, { ...props, tone: resolvedTone });
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress,
+        disabled: isDisabled,
+        accessibilityRole: "button",
+        className: classes,
+        ...viewProps,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { className: classes, ...viewProps, children: content });
+}
+
+// src/components/ui/badge/Badge.tsx
+var colorToTone2 = {
+  default: "neutral",
+  primary: "brand",
+  secondary: "brand-secondary",
+  success: "success",
+  error: "error",
+  warning: "warning",
+  info: "info"
 };
+var sizeStyles3 = {
+  sm: "px-1.5 py-0.5",
+  md: "px-2 py-0.5",
+  lg: "px-2.5 py-1"
+};
+var textSizeStyles = {
+  sm: "text-xs",
+  md: "text-xs",
+  lg: "text-sm"
+};
+function dotIndicatorColor(color, dotColor) {
+  if (dotColor) return dotColor;
+  return color === "default" || color === "secondary" ? "default" : color;
+}
 function Badge({
   variant = "subtle",
   color = "default",
@@ -6582,56 +6642,62 @@ function Badge({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
-    View,
+  return /* @__PURE__ */ jsx(
+    Pill,
     {
+      variant,
+      tone: colorToTone2[color],
+      leading: dot ? /* @__PURE__ */ jsx(Indicator, { size: "xs", color: dotIndicatorColor(color, dotColor), className: "mr-0.5" }) : void 0,
       className: cn(
-        "inline-flex items-center justify-center rounded-full font-medium",
-        variantColorStyles[variant][color],
-        sizeStyles2[size],
+        "justify-center self-auto gap-0",
+        variant === "outline" ? "border" : "border-0",
+        sizeStyles3[size],
         className
       ),
+      textClassName: cn("font-sans font-medium", textSizeStyles[size]),
       ...props,
-      children: [
-        dot && /* @__PURE__ */ jsx(
-          Indicator,
-          {
-            size: "xs",
-            color: dotColor ?? (color === "default" || color === "secondary" ? "default" : color),
-            className: "mr-0.5"
-          }
-        ),
-        typeof children === "string" ? /* @__PURE__ */ jsx(Text, { className: "text-inherit font-medium", children }) : children
-      ]
+      children
     }
   );
 }
-var HAIRLINE_DEFAULT = getSemanticColors("dark")["hairline-default"];
-var t8 = getSemanticColors("dark");
-var statusBgColors = {
-  completed: "rgba(46,213,115,0.15)",
-  current: "rgba(255,121,0,0.15)",
-  next: "transparent",
-  upcoming: t8["surface-raised"],
-  missed: "rgba(209,67,67,0.1)",
-  deload: "rgba(186,41,150,0.15)"
-};
-var statusBorderStyles = {
-  completed: { borderWidth: 1, borderColor: "rgba(46,213,115,0.3)" },
-  current: { borderWidth: 1, borderColor: "rgba(255,121,0,0.3)" },
-  next: { borderWidth: 1, borderColor: "rgba(255,121,0,0.4)" },
-  upcoming: { borderWidth: 1, borderColor: HAIRLINE_DEFAULT },
-  missed: { borderWidth: 1, borderColor: "rgba(209,67,67,0.25)" },
-  deload: { borderWidth: 1, borderColor: "rgba(186,41,150,0.3)" }
-};
-var textColors = {
-  completed: t8["status-success"],
-  current: t8["brand-primary"],
-  next: t8["brand-primary"],
-  upcoming: greyRamp[500],
-  missed: "rgba(209,67,67,0.7)",
-  deload: WORKOUT_PILL_DELOAD
-};
+var DELOAD_WASH = alpha(WORKOUT_PILL_DELOAD, 0.12);
+var DELOAD_RIM = alpha(WORKOUT_PILL_DELOAD, 0.3);
+function paintFor(status) {
+  switch (status) {
+    case "completed":
+      return {
+        background: resolveColor("status-success-subtle"),
+        border: resolveColor("status-success-muted"),
+        text: resolveColor("status-success")
+      };
+    case "current":
+      return {
+        background: resolveColor("brand-primary-subtle"),
+        border: resolveColor("brand-primary-muted"),
+        text: resolveColor("brand-primary")
+      };
+    case "next":
+      return {
+        background: "transparent",
+        border: resolveColor("brand-primary-strong"),
+        text: resolveColor("brand-primary")
+      };
+    case "upcoming":
+      return {
+        background: resolveColor("surface-raised"),
+        border: resolveColor("hairline-default"),
+        text: resolveColor("text-tertiary")
+      };
+    case "missed":
+      return {
+        background: resolveColor("status-error-subtle"),
+        border: resolveColor("status-error-muted"),
+        text: resolveColor("status-error-dark")
+      };
+    case "deload":
+      return { background: DELOAD_WASH, border: DELOAD_RIM, text: WORKOUT_PILL_DELOAD };
+  }
+}
 function usePulse2(enabled) {
   const [opacity] = useState(() => new Animated.Value(1));
   useEffect(() => {
@@ -6673,6 +6739,8 @@ function WorkoutPill({
   const pulseOpacity = usePulse2(shouldPulse);
   const isCompleted = status === "completed";
   const isMissed = status === "missed";
+  const paint = paintFor(status);
+  const labelClass = "font-semibold leading-[normal]";
   const pill = /* @__PURE__ */ jsx(
     Animated.View,
     {
@@ -6689,53 +6757,46 @@ function WorkoutPill({
               paddingHorizontal: 10,
               paddingVertical: 4,
               borderRadius: 6,
-              backgroundColor: statusBgColors[status]
+              backgroundColor: paint.background,
+              borderWidth: 1,
+              borderColor: paint.border
             },
-            statusBorderStyles[status],
             highlighted ? { borderWidth: 2, transform: [{ scale: 1.02 }] } : void 0
           ],
           accessibilityLabel: onPress ? void 0 : `${name} workout, ${status}`,
           ...props,
           children: [
             isCompleted && /* @__PURE__ */ jsx(
-              Text,
+              Typography,
               {
-                style: {
-                  fontWeight: "600",
-                  fontFamily: '"Nunito Sans", sans-serif',
-                  fontSize: 11,
-                  color: textColors[status],
-                  marginRight: 4
-                },
+                variant: "caption",
+                color: "inherit",
+                className: labelClass,
+                style: { color: paint.text, marginRight: 4 },
                 accessibilityElementsHidden: true,
                 testID: "workout-pill-check",
                 children: "\u2713"
               }
             ),
             isMissed && /* @__PURE__ */ jsx(
-              Text,
+              Typography,
               {
-                style: {
-                  fontWeight: "600",
-                  fontFamily: '"Nunito Sans", sans-serif',
-                  fontSize: 11,
-                  color: textColors[status],
-                  marginRight: 4
-                },
+                variant: "caption",
+                color: "inherit",
+                className: labelClass,
+                style: { color: paint.text, marginRight: 4 },
                 accessibilityElementsHidden: true,
                 testID: "workout-pill-dash",
                 children: "\u2014"
               }
             ),
             /* @__PURE__ */ jsx(
-              Text,
+              Typography,
               {
-                style: {
-                  fontWeight: "600",
-                  fontFamily: '"Nunito Sans", sans-serif',
-                  fontSize: 11,
-                  color: textColors[status]
-                },
+                variant: "caption",
+                color: "inherit",
+                className: labelClass,
+                style: { color: paint.text },
                 accessibilityElementsHidden: onPress != null,
                 testID: "workout-pill-name",
                 children: name
@@ -6760,19 +6821,19 @@ function WorkoutPill({
   }
   return pill;
 }
-var t9 = getSemanticColors("dark");
+var t6 = getSemanticColors("dark");
 var TRACK_BG = "#333333";
 var LABEL_COLOR = "#6B7280";
 var TARGET_LINE_COLOR = "rgba(33, 150, 243, 0.5)";
-var AT_TARGET_GLOW = "0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)";
+var AT_TARGET_GLOW = getGlowShadow(t6["status-info"], "subtle");
 var ZONE = {
-  building: t9["status-success"],
+  building: t6["status-success"],
   // below target ramp-up
-  approaching: t9["status-warning"],
+  approaching: t6["status-warning"],
   // nearing target
-  target: t9["brand-primary"],
+  target: t6["brand-primary"],
   // exactly at target
-  over1: t9["status-error"],
+  over1: t6["status-error"],
   // mild over-target
   over2: WORKOUT_TOKENS.intensity.over2,
   // moderate over-target
@@ -6887,7 +6948,7 @@ function IntensityBar({
                     borderRadius: 3,
                     backgroundColor: zone.color,
                     zIndex: 2,
-                    ...atTarget ? { boxShadow: AT_TARGET_GLOW } : null
+                    ...atTarget ? AT_TARGET_GLOW : null
                   },
                   testID: "intensity-fill"
                 }
@@ -6935,7 +6996,7 @@ function IntensityBar({
 }
 
 // src/components/custom/Workout/WeekRow.tsx
-var BRAND_PRIMARY9 = getSemanticColors("dark")["brand-primary"];
+var DELOAD_ROW_WASH = alpha(WORKOUT_PILL_DELOAD, 0.06);
 function WeekRow({
   weekNumber,
   totalWeeks,
@@ -6947,6 +7008,7 @@ function WeekRow({
   className,
   ...props
 }) {
+  const brandPrimary = resolveColor("brand-primary");
   const rowStyle = {
     flexDirection: "row",
     alignItems: "center",
@@ -6955,12 +7017,12 @@ function WeekRow({
     gap: 12
   };
   if (isDeload) {
-    rowStyle.backgroundColor = "rgba(186,41,150,0.06)";
+    rowStyle.backgroundColor = DELOAD_ROW_WASH;
   }
   if (isCurrent) {
-    rowStyle.backgroundColor = "rgba(255,121,0,0.04)";
+    rowStyle.backgroundColor = resolveColor("brand-primary-subtle");
     rowStyle.borderLeftWidth = 2;
-    rowStyle.borderLeftColor = BRAND_PRIMARY9;
+    rowStyle.borderLeftColor = brandPrimary;
   }
   return /* @__PURE__ */ jsxs(
     View,
@@ -6984,22 +7046,18 @@ function WeekRow({
                     width: 6,
                     height: 6,
                     borderRadius: 3,
-                    backgroundColor: BRAND_PRIMARY9
+                    backgroundColor: brandPrimary
                   },
                   accessibilityElementsHidden: true,
                   testID: "week-row-current-dot"
                 }
               ),
               /* @__PURE__ */ jsx(
-                Text,
+                Typography,
                 {
-                  className: isCurrent ? void 0 : "text-text-primary",
-                  style: {
-                    fontSize: 13,
-                    fontWeight: "700",
-                    fontFamily: "Inter, sans-serif",
-                    color: isCurrent ? BRAND_PRIMARY9 : void 0
-                  },
+                  variant: "boldLabel",
+                  color: isCurrent ? "inherit" : "primary",
+                  className: isCurrent ? "text-brand-primary" : void 0,
                   accessibilityElementsHidden: true,
                   children: `W${weekNumber}`
                 }
@@ -7039,12 +7097,12 @@ function WeekRow({
 }
 
 // src/components/custom/Workout/MesoCard.tsx
-var HAIRLINE_DEFAULT2 = getSemanticColors("dark")["hairline-default"];
-var BRAND_PRIMARY10 = getSemanticColors("dark")["brand-primary"];
+var HAIRLINE_DEFAULT = getSemanticColors("dark")["hairline-default"];
+var BRAND_PRIMARY7 = getSemanticColors("dark")["brand-primary"];
 var BRAND_PRIMARY_DARK2 = MESO_ACCENT_GRADIENT_DARK;
 var BRAND_PRIMARY_LIGHT2 = MESO_ACCENT_GRADIENT_LIGHT;
-var BORDER_DEFAULT = HAIRLINE_DEFAULT2;
-var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY10, BRAND_PRIMARY_LIGHT2];
+var BORDER_DEFAULT = HAIRLINE_DEFAULT;
+var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY7, BRAND_PRIMARY_LIGHT2];
 function heatmapColor(percentage) {
   const clamped = Math.max(0, Math.min(100, percentage));
   const opacity = 0.12 + clamped / 100 * 0.78;
@@ -7079,130 +7137,139 @@ function MesoCard({
   }, [highlighted, highlight]);
   const borderColor = highlight.interpolate({
     inputRange: [0, 1],
-    outputRange: [BORDER_DEFAULT, BRAND_PRIMARY10]
+    outputRange: [BORDER_DEFAULT, BRAND_PRIMARY7]
   });
-  const header = /* @__PURE__ */ jsxs(View, { style: { paddingHorizontal: 14, paddingTop: 12, paddingBottom: 10 }, testID: "meso-card-body", children: [
-    /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 8 }, testID: "meso-card-header", children: [
-      /* @__PURE__ */ jsx(
-        Text,
-        {
-          className: "text-text-primary",
-          style: {
-            fontSize: 15,
-            fontFamily: '"Space Grotesk", sans-serif',
-            fontWeight: "700"
-          },
-          testID: "meso-card-name",
-          children: name
-        }
-      ),
-      /* @__PURE__ */ jsx(Badge, { variant: "subtle", color: "primary", size: "sm", testID: "meso-card-goal-badge", children: goal })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Text,
-      {
-        className: "text-text-secondary",
-        style: {
-          marginTop: 4,
-          fontSize: 12,
-          fontFamily: "Inter, sans-serif"
-        },
-        testID: "meso-card-subheader",
-        children: `${split} \xB7 ${weekRange}`
-      }
-    ),
-    volumeHeatmap && volumeHeatmap.length > 0 && /* @__PURE__ */ jsx(
-      View,
-      {
-        className: "flex-row items-center",
-        style: { marginTop: 10, gap: 3 },
-        accessibilityElementsHidden: true,
-        testID: "meso-card-heatmap",
-        children: volumeHeatmap.map((entry) => /* @__PURE__ */ jsx(
-          View,
-          {
-            style: {
-              flex: 1,
-              height: 8,
-              borderRadius: 2,
-              backgroundColor: heatmapColor(entry.percentage)
-            },
-            testID: "meso-card-heatmap-cell"
-          },
-          entry.group
-        ))
-      }
-    )
-  ] });
-  return /* @__PURE__ */ jsx(Animated.View, { style: highlighted ? { transform: [{ scale: 1 }] } : void 0, testID: "meso-card-wrapper", children: /* @__PURE__ */ jsxs(
-    Card,
+  const header = /* @__PURE__ */ jsxs(
+    View,
     {
-      variant: "outline",
-      elevation: 2,
-      borderColor: highlighted ? BRAND_PRIMARY10 : BORDER_DEFAULT,
-      className,
-      style: [
-        { borderColor },
-        highlighted ? { boxShadow: "0 0 12px 2px rgba(255,121,0,0.25)" } : void 0
-      ],
-      testID: "meso-card",
-      ...props,
+      style: { paddingHorizontal: 14, paddingTop: 12, paddingBottom: 10 },
+      testID: "meso-card-body",
       children: [
+        /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 8 }, testID: "meso-card-header", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: "text-text-primary",
+              style: {
+                fontSize: 15,
+                fontFamily: '"Space Grotesk", sans-serif',
+                fontWeight: "700"
+              },
+              testID: "meso-card-name",
+              children: name
+            }
+          ),
+          /* @__PURE__ */ jsx(Badge, { variant: "subtle", color: "primary", size: "sm", testID: "meso-card-goal-badge", children: goal })
+        ] }),
         /* @__PURE__ */ jsx(
-          View,
-          {
-            className: "flex-row",
-            style: { position: "absolute", top: 0, left: 0, right: 0, height: 3, zIndex: 1 },
-            accessibilityElementsHidden: true,
-            testID: "meso-card-accent",
-            children: ACCENT_STOPS2.map((color) => /* @__PURE__ */ jsx(View, { style: { flex: 1, backgroundColor: color } }, color))
-          }
-        ),
-        isExpandable ? /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            onPress: onToggle,
-            accessibilityRole: "button",
-            accessibilityLabel: `${name}, ${goal}, ${weekRange}`,
-            "aria-expanded": expanded,
-            testID: "meso-card-toggle",
-            children: header
-          }
-        ) : /* @__PURE__ */ jsx(
-          View,
+          Text,
           {
-            accessibilityLabel: `${name}, ${goal}, ${weekRange}`,
-            testID: "meso-card-static",
-            children: header
+            className: "text-text-secondary",
+            style: {
+              marginTop: 4,
+              fontSize: 12,
+              fontFamily: "Inter, sans-serif"
+            },
+            testID: "meso-card-subheader",
+            children: `${split} \xB7 ${weekRange}`
           }
         ),
-        expanded && weeks.length > 0 && /* @__PURE__ */ jsx(
+        volumeHeatmap && volumeHeatmap.length > 0 && /* @__PURE__ */ jsx(
           View,
           {
-            style: { borderTopWidth: 1, borderTopColor: BORDER_DEFAULT },
-            testID: "meso-card-weeks",
-            children: weeks.map((week) => /* @__PURE__ */ jsx(
-              WeekRow,
+            className: "flex-row items-center",
+            style: { marginTop: 10, gap: 3 },
+            accessibilityElementsHidden: true,
+            testID: "meso-card-heatmap",
+            children: volumeHeatmap.map((entry) => /* @__PURE__ */ jsx(
+              View,
               {
-                ...week,
-                totalWeeks: week.totalWeeks ?? totalWeeks,
-                isCurrent: week.isCurrent ?? week.weekNumber === currentWeek
+                style: {
+                  flex: 1,
+                  height: 8,
+                  borderRadius: 2,
+                  backgroundColor: heatmapColor(entry.percentage)
+                },
+                testID: "meso-card-heatmap-cell"
               },
-              week.weekNumber
+              entry.group
             ))
           }
         )
       ]
     }
-  ) });
+  );
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: highlighted ? { transform: [{ scale: 1 }] } : void 0,
+      testID: "meso-card-wrapper",
+      children: /* @__PURE__ */ jsxs(
+        Card,
+        {
+          variant: "outline",
+          elevation: 2,
+          borderColor: highlighted ? BRAND_PRIMARY7 : BORDER_DEFAULT,
+          className,
+          style: [
+            { borderColor },
+            // Highlight is emphasis, not depth: a brand glow through the shared builder.
+            highlighted ? getGlowShadow(BRAND_PRIMARY7, "subtle") : void 0
+          ],
+          testID: "meso-card",
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(
+              View,
+              {
+                className: "flex-row",
+                style: { position: "absolute", top: 0, left: 0, right: 0, height: 3, zIndex: 1 },
+                accessibilityElementsHidden: true,
+                testID: "meso-card-accent",
+                children: ACCENT_STOPS2.map((color) => /* @__PURE__ */ jsx(View, { style: { flex: 1, backgroundColor: color } }, color))
+              }
+            ),
+            isExpandable ? /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onPress: onToggle,
+                accessibilityRole: "button",
+                accessibilityLabel: `${name}, ${goal}, ${weekRange}`,
+                "aria-expanded": expanded,
+                testID: "meso-card-toggle",
+                children: header
+              }
+            ) : /* @__PURE__ */ jsx(View, { accessibilityLabel: `${name}, ${goal}, ${weekRange}`, testID: "meso-card-static", children: header }),
+            expanded && weeks.length > 0 && /* @__PURE__ */ jsx(
+              View,
+              {
+                style: { borderTopWidth: 1, borderTopColor: BORDER_DEFAULT },
+                testID: "meso-card-weeks",
+                children: weeks.map((week) => /* @__PURE__ */ jsx(
+                  WeekRow,
+                  {
+                    ...week,
+                    totalWeeks: week.totalWeeks ?? totalWeeks,
+                    isCurrent: week.isCurrent ?? week.weekNumber === currentWeek
+                  },
+                  week.weekNumber
+                ))
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
 }
-var t10 = getSemanticColors("dark");
-var dotColorMap = {
-  untrained: greyRamp[900],
-  behind: t10["brand-secondary"],
-  ontrack: t10["status-success"],
-  target: t10["brand-primary"],
-  over: t10["status-error"]
+
+// src/components/custom/Workout/MuscleGroupChip.tsx
+var dotTone = {
+  untrained: "neutral",
+  behind: "brand-secondary",
+  ontrack: "success",
+  target: "brand",
+  over: "error"
 };
 function MuscleGroupChip({
   name,
@@ -7211,83 +7278,31 @@ function MuscleGroupChip({
   className,
   ...props
 }) {
-  const dotColor = volumeStatus ? dotColorMap[volumeStatus] : greyRamp[900];
   const statusLabel = volumeStatus ?? "no status";
-  const content = /* @__PURE__ */ jsxs(
-    View,
+  return /* @__PURE__ */ jsx(
+    Pill,
     {
-      className: ["bg-surface-raised border-hairline", className].filter(Boolean).join(" "),
-      style: {
-        flexDirection: "row",
-        alignItems: "center",
-        borderRadius: 9999,
-        paddingHorizontal: 9,
-        paddingVertical: 3,
-        borderWidth: 1
-      },
-      accessibilityLabel: onPress ? void 0 : `${name}, volume status: ${statusLabel}`,
-      testID: "muscle-group-chip",
+      tone: "neutral",
+      dotTone: volumeStatus ? dotTone[volumeStatus] : "neutral",
+      variant: "subtle",
+      size: "md",
+      leading: "dot",
+      onPress,
+      className: ["gap-1.5", className].filter(Boolean).join(" "),
+      textClassName: "font-sans font-medium text-text-secondary",
+      accessibilityLabel: `${name}, volume status: ${statusLabel}`,
+      testID: onPress ? "muscle-group-chip-pressable" : "muscle-group-chip",
       ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          View,
-          {
-            style: {
-              width: 6,
-              height: 6,
-              borderRadius: 9999,
-              marginRight: 5,
-              flexShrink: 0,
-              backgroundColor: dotColor
-            },
-            accessibilityElementsHidden: true,
-            testID: "muscle-group-chip-dot"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            className: "text-text-secondary",
-            style: {
-              fontFamily: "Inter, sans-serif",
-              fontWeight: "500",
-              fontSize: 11
-            },
-            accessibilityElementsHidden: true,
-            children: name
-          }
-        )
-      ]
+      children: name
     }
   );
-  if (onPress) {
-    return /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        onPress,
-        accessibilityRole: "button",
-        accessibilityLabel: `${name}, volume status: ${statusLabel}`,
-        testID: "muscle-group-chip-pressable",
-        children: content
-      }
-    );
-  }
-  return content;
 }
 
 // src/components/custom/Workout/WorkoutCard.tsx
-var HAIRLINE_DEFAULT3 = getSemanticColors("dark")["hairline-default"];
-var t11 = getSemanticColors("dark");
-var COLORS = {
-  statusSuccess: t11["status-success"],
-  brandPrimary: t11["brand-primary"],
-  borderDefault: HAIRLINE_DEFAULT3,
-  brandPrimarySubtle: "rgba(255,121,0,0.06)"
-};
-var statusBorderColors = {
-  completed: COLORS.statusSuccess,
-  today: COLORS.brandPrimary,
-  upcoming: COLORS.borderDefault
+var statusAccentToken = {
+  completed: "status-success",
+  today: "brand-primary",
+  upcoming: "hairline-default"
 };
 var volumeStatusMap = {
   under: "behind",
@@ -7322,41 +7337,33 @@ function WorkoutCard({
   const summary = /* @__PURE__ */ jsxs(View, { style: { padding: 14 }, testID: "workout-card-body", children: [
     /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", testID: "workout-card-header", children: [
       /* @__PURE__ */ jsx(
-        Text,
+        Typography,
         {
-          className: "text-text-primary",
-          style: {
-            fontSize: 15,
-            fontFamily: '"Space Grotesk", sans-serif',
-            fontWeight: "700"
-          },
+          variant: "h6",
+          color: "primary",
+          className: "text-base font-bold leading-[normal]",
           testID: "workout-card-name",
           children: name
         }
       ),
       /* @__PURE__ */ jsx(View, { className: "flex-1" }),
       /* @__PURE__ */ jsx(
-        Text,
+        Typography,
         {
-          className: "text-text-tertiary",
-          style: {
-            fontSize: 11,
-            fontFamily: "Inter, sans-serif"
-          },
+          variant: "caption",
+          color: "tertiary",
+          className: "text-2xs leading-[normal]",
           testID: "workout-card-date",
           children: date
         }
       )
     ] }),
     /* @__PURE__ */ jsx(
-      Text,
+      Typography,
       {
-        className: "text-text-secondary",
-        style: {
-          marginTop: 4,
-          fontSize: 12,
-          fontFamily: "Inter, sans-serif"
-        },
+        variant: "caption",
+        color: "secondary",
+        className: "mt-1 leading-[normal]",
         testID: "workout-card-stats",
         children: formatStats(totalSets, totalVolume, unit, duration)
       }
@@ -7385,8 +7392,8 @@ function WorkoutCard({
     {
       variant: "accent",
       elevation: 1,
-      accentColor: statusBorderColors[status],
-      bgColor: isToday ? COLORS.brandPrimarySubtle : void 0,
+      accentColor: resolveColor(statusAccentToken[status]),
+      bgColor: isToday ? resolveColor("brand-primary-subtle") : void 0,
       className,
       style: isUpcoming ? { opacity: 0.6 } : void 0,
       testID: "workout-card",
@@ -7424,7 +7431,7 @@ function WorkoutCard({
 }
 
 // src/components/custom/Workout/ProgramPlanningPage.tsx
-var BRAND_PRIMARY11 = getSemanticColors("dark")["brand-primary"];
+var BRAND_PRIMARY8 = getSemanticColors("dark")["brand-primary"];
 var WORKOUT_PILL_STATUS = {
   completed: "completed",
   today: "current",
@@ -7492,7 +7499,7 @@ function Breadcrumbs({ crumbs, onNavigate }) {
                     fontSize: 12,
                     fontFamily: "Inter, sans-serif",
                     fontWeight: isLast ? "700" : "500",
-                    color: isLast ? void 0 : BRAND_PRIMARY11
+                    color: isLast ? void 0 : BRAND_PRIMARY8
                   },
                   children: crumb.label
                 }