@titan-design/react-ui 0.3.0 → 0.4.0

package/dist/index.js

@@ -5,6 +5,7 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var React24 = require('react');
+var nativewind = require('nativewind');
 var lucideReact = require('lucide-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -2160,6 +2161,21 @@ function validateCssPropertyManifest(candidate) {
 function isCssPropertyManifest(candidate) {
   return validateCssPropertyManifest(candidate).valid;
 }
+var MODE_VARS = {
+  dark: nativewind.vars(darkThemeCSSVars),
+  light: nativewind.vars(lightThemeCSSVars)
+};
+function ThemeProvider({
+  mode = "dark",
+  style,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(reactNative.View, { style: [MODE_VARS[mode], { flex: 1 }, style], ...props, children });
+}
+function resolveColor(token, mode = "dark") {
+  return reactNative.Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
+}
 
 // src/theme/presets/apply.ts
 function colorKeyToVar(key) {
@@ -4985,7 +5001,7 @@ function ToastProvider({
     return id;
   }, [defaultDuration, maxToasts]);
   const removeToast = React24.useCallback((id) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
+    setToasts((prev) => prev.filter((t2) => t2.id !== id));
   }, []);
   const removeAllToasts = React24.useCallback(() => {
     setToasts([]);
@@ -7121,14 +7137,13 @@ function SingleStrip({
   return /* @__PURE__ */ jsx(
     reactNative.View,
     {
-      className: cn(className),
+      className: cn("border-border-strong", className),
       style: [
         {
           height: 3,
           backgroundColor: "transparent",
           borderWidth: 1,
           borderStyle: "dashed",
-          borderColor: "var(--color-border-strong)",
           borderRadius: 1,
           opacity: 0.5
         },
@@ -7162,13 +7177,13 @@ function SegmentedStrip({
       children: Array.from({ length: segments }, (_, i) => /* @__PURE__ */ jsx(
         reactNative.View,
         {
+          className: "border-border-strong",
           style: {
             flex: 1,
             height: 3,
             backgroundColor: "transparent",
             borderWidth: 1,
             borderStyle: "dashed",
-            borderColor: "var(--color-border-strong)",
             borderRadius: 1,
             minWidth: 4
           },
@@ -7455,6 +7470,198 @@ function TempoDisplay({
     }
   );
 }
+
+// src/utils/colors.ts
+function getStatusColor(status) {
+  return `var(--color-status-${status})`;
+}
+function getResultColor(result) {
+  return `var(--color-result-${result})`;
+}
+function alpha(color, opacity) {
+  const clampedOpacity = Math.max(0, Math.min(1, opacity));
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    let r, g, b;
+    if (hex.length === 3) {
+      r = parseInt(hex[0] + hex[0], 16);
+      g = parseInt(hex[1] + hex[1], 16);
+      b = parseInt(hex[2] + hex[2], 16);
+    } else if (hex.length === 6) {
+      r = parseInt(hex.slice(0, 2), 16);
+      g = parseInt(hex.slice(2, 4), 16);
+      b = parseInt(hex.slice(4, 6), 16);
+    } else {
+      return color;
+    }
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  }
+  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  if (rgbMatch) {
+    const [, r, g, b] = rgbMatch;
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  }
+  const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/);
+  if (rgbaMatch) {
+    const [, r, g, b] = rgbaMatch;
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  }
+  return color;
+}
+function getLuminance(color) {
+  if (!color.startsWith("#")) return "dark";
+  const hex = color.slice(1);
+  let r, g, b;
+  if (hex.length === 3) {
+    r = parseInt(hex[0] + hex[0], 16);
+    g = parseInt(hex[1] + hex[1], 16);
+    b = parseInt(hex[2] + hex[2], 16);
+  } else if (hex.length === 6) {
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+  } else {
+    return "dark";
+  }
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5 ? "light" : "dark";
+}
+function getContrastText(backgroundColor) {
+  return getLuminance(backgroundColor) === "light" ? "#000000" : "#FFFFFF";
+}
+
+// src/components/custom/Workout/TempoBar.tsx
+var t = getSemanticColors("dark");
+var TEMPO_PACING = {
+  behindThresholdPct: 0.15,
+  minPhaseDurationMs: 500
+};
+function getTempoPacingState(elapsedMs, targetMs) {
+  if (!targetMs || targetMs < TEMPO_PACING.minPhaseDurationMs) return "none";
+  const ratio = elapsedMs / targetMs;
+  if (ratio > 1 + TEMPO_PACING.behindThresholdPct) return "behind";
+  return "on-pace";
+}
+function getTempoFillPct(elapsedMs, targetMs) {
+  if (!targetMs) return 100;
+  return Math.min(100, elapsedMs / targetMs * 100);
+}
+var PHASE_ORDER = ["concentric", "hold", "eccentric"];
+var PHASE_CONFIG = {
+  concentric: { label: "Con", color: t["status-success"], flex: 2 },
+  hold: { label: "Hold", color: t["brand-primary"], flex: 1 },
+  eccentric: { label: "Ecc", color: t["status-warning"], flex: 3 }
+};
+function TempoBar({
+  activePhase,
+  phaseElapsedMs,
+  completed,
+  target,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(reactNative.View, { className, testID: "tempo-bar", ...props, children: [
+    /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", marginBottom: 4 }, children: PHASE_ORDER.map((phase) => {
+      const config = PHASE_CONFIG[phase];
+      return /* @__PURE__ */ jsx(reactNative.View, { style: { flex: config.flex, alignItems: "center" }, children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 10, color: t["text-disabled"] }, children: config.label }) }, phase);
+    }) }),
+    /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", gap: 2, height: 20 }, children: PHASE_ORDER.map((phase) => {
+      const config = PHASE_CONFIG[phase];
+      const isActive = activePhase === phase;
+      const completedMs = completed?.[phase];
+      const targetSec = target?.[phase];
+      const targetMs = targetSec != null ? targetSec * 1e3 : null;
+      return /* @__PURE__ */ jsx(
+        reactNative.View,
+        {
+          style: {
+            flex: config.flex,
+            backgroundColor: alpha("#ffffff", 0.06),
+            borderRadius: 4,
+            overflow: "hidden"
+          },
+          children: isActive ? /* @__PURE__ */ jsx(
+            ActiveSegment,
+            {
+              config,
+              phaseElapsedMs,
+              targetMs
+            }
+          ) : completedMs != null ? /* @__PURE__ */ jsx(CompletedSegment, { config, completedMs, targetMs }) : null
+        },
+        phase
+      );
+    }) })
+  ] });
+}
+function ActiveSegment({
+  config,
+  phaseElapsedMs,
+  targetMs
+}) {
+  const pacing = getTempoPacingState(phaseElapsedMs, targetMs);
+  const barColor = pacing === "behind" ? t["status-error"] : config.color;
+  const fillPct = getTempoFillPct(phaseElapsedMs, targetMs);
+  const label = targetMs ? `${formatDuration(phaseElapsedMs)} / ${formatDuration(targetMs)}` : formatDuration(phaseElapsedMs);
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: { height: "100%", position: "relative" }, testID: `tempo-segment-active-${config.label}`, children: [
+    /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: `${fillPct}%`,
+          backgroundColor: alpha(barColor, 0.3),
+          borderRadius: 4
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        style: {
+          height: "100%",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 12, fontWeight: "700", color: barColor }, children: label })
+      }
+    )
+  ] });
+}
+function CompletedSegment({
+  config,
+  completedMs,
+  targetMs
+}) {
+  const pacing = getTempoPacingState(completedMs, targetMs);
+  const hitTarget = pacing !== "behind";
+  const indicator = targetMs && targetMs >= TEMPO_PACING.minPhaseDurationMs ? hitTarget ? " \u2713" : " \u2717" : "";
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      style: {
+        height: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: alpha(config.color, 0.15)
+      },
+      testID: `tempo-segment-completed-${config.label}`,
+      children: /* @__PURE__ */ jsxs(reactNative.Text, { style: { fontSize: 12, fontWeight: "500", color: alpha(config.color, 0.7) }, children: [
+        formatDuration(completedMs),
+        indicator
+      ] })
+    }
+  );
+}
+function formatDuration(ms) {
+  const s = ms / 1e3;
+  return s < 10 ? s.toFixed(1) : Math.round(s).toString();
+}
 function getDotColor(deviation) {
   const abs = Math.abs(deviation);
   if (deviation < -0.3) return "#14B8A6";
@@ -7937,7 +8144,7 @@ function VelocityStrip({
   const stripContent = /* @__PURE__ */ jsxs(
     reactNative.Animated.View,
     {
-      className,
+      className: [className, expanded ? "bg-surface-raised" : "bg-transparent"].filter(Boolean).join(" "),
       style: [
         {
           height: heightAnim,
@@ -7948,7 +8155,6 @@ function VelocityStrip({
           paddingBottom: expanded ? 24 : 0,
           paddingHorizontal: expanded ? 6 : 0,
           paddingVertical: expanded ? void 0 : 8,
-          backgroundColor: expanded ? "var(--color-surface-raised)" : "transparent",
           overflow: expanded ? "visible" : "hidden"
         }
       ],
@@ -7972,7 +8178,8 @@ function VelocityStrip({
                     expanded && /* @__PURE__ */ jsx(reactNative.Animated.View, { style: { opacity: labelOpacity, alignItems: "center", position: "absolute", top: -13, left: 0, right: 0 }, accessibilityElementsHidden: true, children: /* @__PURE__ */ jsx(
                       reactNative.Text,
                       {
-                        style: { fontSize: 8, fontWeight: "600", color: "var(--color-text-secondary)" },
+                        className: "text-text-secondary",
+                        style: { fontSize: 8, fontWeight: "600" },
                         testID: `velocity-label-${i}`,
                         children: formatVelocity(v)
                       }
@@ -8032,9 +8239,9 @@ function VelocityStrip({
               /* @__PURE__ */ jsxs(
                 reactNative.Text,
                 {
+                  className: "text-text-secondary",
                   style: {
                     fontSize: 10,
-                    color: "var(--color-text-secondary)",
                     fontFamily: "Inter, sans-serif"
                   },
                   children: [
@@ -8050,9 +8257,9 @@ function VelocityStrip({
               /* @__PURE__ */ jsxs(
                 reactNative.Text,
                 {
+                  className: "text-text-secondary",
                   style: {
                     fontSize: 10,
-                    color: "var(--color-text-secondary)",
                     fontFamily: "Inter, sans-serif",
                     ...getLossStyle(loss)
                   },
@@ -8102,16 +8309,14 @@ function MuscleGroupChip({
   const content = /* @__PURE__ */ jsxs(
     reactNative.View,
     {
-      className,
+      className: ["bg-surface-raised border-border", className].filter(Boolean).join(" "),
       style: {
         flexDirection: "row",
         alignItems: "center",
         borderRadius: 9999,
         paddingHorizontal: 9,
         paddingVertical: 3,
-        backgroundColor: "var(--color-surface-raised)",
-        borderWidth: 1,
-        borderColor: "var(--color-border-default)"
+        borderWidth: 1
       },
       accessibilityLabel: onPress ? void 0 : `${name}, volume status: ${statusLabel}`,
       testID: "muscle-group-chip",
@@ -8135,11 +8340,11 @@ function MuscleGroupChip({
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-secondary",
             style: {
               fontFamily: "Inter, sans-serif",
               fontWeight: "500",
-              fontSize: 11,
-              color: "var(--color-text-secondary)"
+              fontSize: 11
             },
             accessibilityElementsHidden: true,
             children: name
@@ -8389,11 +8594,11 @@ function SetRow({
             ) : /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: "text-text-secondary",
                 style: {
                   fontSize: 13,
                   fontWeight: "600",
-                  fontFamily: "Inter, sans-serif",
-                  color: "var(--color-text-secondary)"
+                  fontFamily: "Inter, sans-serif"
                 },
                 children: setNumber
               }
@@ -8408,10 +8613,10 @@ function SetRow({
             children: /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: "text-text-secondary",
                 style: {
                   fontSize: 12,
-                  fontFamily: "Inter, sans-serif",
-                  color: "var(--color-text-secondary)"
+                  fontFamily: "Inter, sans-serif"
                 },
                 children: previous ? `${previous.reps} x ${roundWeight(previous.weight)}` : "\u2014"
               }
@@ -8426,11 +8631,11 @@ function SetRow({
             children: isActive && reps == null && targets ? /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: "text-text-tertiary",
                 style: {
                   fontSize: 13,
                   fontStyle: "italic",
-                  fontFamily: "Inter, sans-serif",
-                  color: "var(--color-text-tertiary)"
+                  fontFamily: "Inter, sans-serif"
                 },
                 testID: "set-row-target-reps",
                 children: targets.reps
@@ -8438,11 +8643,11 @@ function SetRow({
             ) : /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: reps != null ? "text-text-primary" : "text-text-tertiary",
                 style: {
                   fontSize: 14,
                   fontWeight: "600",
-                  fontFamily: "Inter, sans-serif",
-                  color: reps != null ? "var(--color-text-primary)" : "var(--color-text-tertiary)"
+                  fontFamily: "Inter, sans-serif"
                 },
                 children: reps != null ? reps : "\u2014"
               }
@@ -8457,11 +8662,11 @@ function SetRow({
             children: isActive && weight == null && targets ? /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: "text-text-tertiary",
                 style: {
                   fontSize: 13,
                   fontStyle: "italic",
-                  fontFamily: "Inter, sans-serif",
-                  color: "var(--color-text-tertiary)"
+                  fontFamily: "Inter, sans-serif"
                 },
                 testID: "set-row-target-weight",
                 children: roundWeight(targets.weight)
@@ -8469,11 +8674,11 @@ function SetRow({
             ) : /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: weight != null ? "text-text-primary" : "text-text-tertiary",
                 style: {
                   fontSize: 14,
                   fontWeight: "600",
-                  fontFamily: "Inter, sans-serif",
-                  color: weight != null ? "var(--color-text-primary)" : "var(--color-text-tertiary)"
+                  fontFamily: "Inter, sans-serif"
                 },
                 children: weight != null ? roundWeight(weight) : "\u2014"
               }
@@ -8488,11 +8693,14 @@ function SetRow({
             children: /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: rpe != null ? void 0 : "text-text-tertiary",
                 style: {
                   fontSize: 13,
                   fontWeight: "600",
                   fontFamily: "Inter, sans-serif",
-                  color: rpe != null ? rpeColor(rpe) : "var(--color-text-tertiary)"
+                  // rpeColor returns a concrete hex (native-safe); only the tertiary
+                  // fallback needs the className token.
+                  color: rpe != null ? rpeColor(rpe) : void 0
                 },
                 children: rpe != null ? roundRpe(rpe) : "\u2014"
               }
@@ -8538,18 +8746,14 @@ function SetRow({
   );
 }
 var BRAND_PRIMARY2 = "#FF7900";
-var TEXT_PRIMARY = "var(--color-text-primary)";
-var TEXT_TERTIARY2 = "var(--color-text-tertiary)";
+var INPUT_CLASSNAME = "bg-surface-raised border-border-strong text-text-primary";
 var inputStyle = {
   fontSize: 14,
   fontWeight: "600",
   fontFamily: "Inter, sans-serif",
-  backgroundColor: "var(--color-surface-raised)",
   borderWidth: 1,
-  borderColor: "var(--color-border-strong)",
   borderRadius: 6,
   textAlign: "center",
-  color: TEXT_PRIMARY,
   paddingVertical: 5,
   paddingHorizontal: 2
 };
@@ -8571,11 +8775,11 @@ function InputBar({
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
+      className: "bg-surface-elevated",
       style: {
         width: "100%",
-        backgroundColor: "var(--color-surface-elevated)",
         borderTopWidth: 1,
-        borderTopColor: "var(--color-border-default)",
+        borderTopColor: resolveColor("border-default"),
         paddingTop: 10,
         paddingHorizontal: 16,
         paddingBottom: 12,
@@ -8590,11 +8794,11 @@ function InputBar({
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {
+              className: "text-text-primary",
               style: {
                 fontSize: 12,
                 fontWeight: "700",
-                fontFamily: '"Space Grotesk", sans-serif',
-                color: TEXT_PRIMARY
+                fontFamily: '"Space Grotesk", sans-serif'
               },
               testID: "input-bar-exercise-name",
               numberOfLines: 1,
@@ -8604,10 +8808,10 @@ function InputBar({
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {
+              className: "text-text-tertiary",
               style: {
                 fontSize: 10,
-                fontFamily: "Inter, sans-serif",
-                color: TEXT_TERTIARY2
+                fontFamily: "Inter, sans-serif"
               },
               testID: "input-bar-set-info",
               children: setLabel
@@ -8620,6 +8824,7 @@ function InputBar({
             {
               value: reps,
               onChangeText: onRepsChange,
+              className: INPUT_CLASSNAME,
               style: { ...inputStyle, width: 36 },
               accessibilityLabel: "Reps",
               testID: "input-bar-reps",
@@ -8629,10 +8834,10 @@ function InputBar({
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {
+              className: "text-text-tertiary",
               style: {
                 fontSize: 12,
-                fontFamily: "Inter, sans-serif",
-                color: TEXT_TERTIARY2
+                fontFamily: "Inter, sans-serif"
               },
               children: "\xD7"
             }
@@ -8642,6 +8847,7 @@ function InputBar({
             {
               value: weight,
               onChangeText: onWeightChange,
+              className: INPUT_CLASSNAME,
               style: { ...inputStyle, width: 52 },
               accessibilityLabel: `Weight in ${unit}`,
               testID: "input-bar-weight",
@@ -8651,11 +8857,11 @@ function InputBar({
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {
+              className: "text-text-tertiary",
               style: {
                 fontSize: 12,
                 fontWeight: "500",
-                fontFamily: "Inter, sans-serif",
-                color: TEXT_TERTIARY2
+                fontFamily: "Inter, sans-serif"
               },
               testID: "input-bar-unit",
               children: unit
@@ -8715,11 +8921,11 @@ function RestTimer({
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
+      className: "bg-surface-raised",
       style: {
         width: "100%",
-        backgroundColor: "var(--color-surface-raised)",
         borderTopWidth: 1,
-        borderTopColor: "var(--color-border-default)",
+        borderTopColor: resolveColor("border-default"),
         paddingVertical: 12,
         paddingHorizontal: 16
       },
@@ -8741,13 +8947,13 @@ function RestTimer({
                 /* @__PURE__ */ jsx(
                   reactNative.Text,
                   {
+                    className: "text-text-secondary",
                     style: {
                       fontSize: 11,
                       fontFamily: "Inter, sans-serif",
                       fontWeight: "600",
                       textTransform: "uppercase",
-                      letterSpacing: 1,
-                      color: "var(--color-text-secondary)"
+                      letterSpacing: 1
                     },
                     testID: "rest-timer-label",
                     children: "REST"
@@ -8756,10 +8962,10 @@ function RestTimer({
                 nextSetInfo != null && /* @__PURE__ */ jsx(
                   reactNative.Text,
                   {
+                    className: "text-text-tertiary",
                     style: {
                       fontSize: 11,
                       fontFamily: "Inter, sans-serif",
-                      color: "var(--color-text-tertiary)",
                       marginTop: 2
                     },
                     testID: "rest-timer-next-set",
@@ -8770,11 +8976,11 @@ function RestTimer({
               /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-primary",
                   style: {
                     fontSize: 28,
                     fontFamily: '"Space Grotesk", sans-serif',
                     fontWeight: "700",
-                    color: "var(--color-text-primary)",
                     fontVariant: ["tabular-nums"],
                     letterSpacing: -0.5
                   },
@@ -8788,9 +8994,9 @@ function RestTimer({
         /* @__PURE__ */ jsx(
           reactNative.View,
           {
+            className: "bg-border",
             style: {
               height: 3,
-              backgroundColor: "var(--color-border-default)",
               borderRadius: 2,
               marginBottom: 12
             },
@@ -8826,11 +9032,11 @@ function RestTimer({
               children: /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-secondary",
                   style: {
                     fontSize: 11,
                     fontFamily: "Inter, sans-serif",
-                    fontWeight: "600",
-                    color: "var(--color-text-secondary)"
+                    fontWeight: "600"
                   },
                   children: "+30s"
                 }
@@ -8869,19 +9075,6 @@ function RestTimer({
     }
   );
 }
-var COLORS = {
-  // Theme-aware tokens: text foregrounds and this card's own surfaces/borders
-  // must flip together so text stays readable in both light and dark. The
-  // expanded/pressed surfaces are self-owned here (not from a themed Card), so
-  // hardcoding dark values would leave dark-on-dark once the text flips.
-  // react-native-web passes the CSS var through to the inline style.
-  textPrimary: "var(--color-text-primary)",
-  textSecondary: "var(--color-text-secondary)",
-  textTertiary: "var(--color-text-tertiary)",
-  surfaceRaised: "var(--color-surface-raised)",
-  surfaceElevated: "var(--color-surface-elevated)",
-  borderDefault: "var(--color-border-default)"
-};
 function buildColumnHeaders(unit) {
   return ["SET", "PREV", "REPS", unit.toUpperCase(), "RPE"];
 }
@@ -8959,11 +9152,11 @@ function CollapsedCard({
       children: /* @__PURE__ */ jsxs(
         reactNative.View,
         {
+          className: pressed ? "bg-surface-raised" : void 0,
           style: {
             padding: 12,
             paddingHorizontal: 14,
             cursor: "pointer",
-            backgroundColor: pressed ? COLORS.surfaceRaised : "transparent",
             ...borderRadius,
             ...supersetMargin
           },
@@ -8977,11 +9170,11 @@ function CollapsedCard({
                   /* @__PURE__ */ jsx(
                     reactNative.Text,
                     {
+                      className: "text-text-primary",
                       style: {
                         fontSize: 14,
                         fontFamily: '"Space Grotesk", sans-serif',
-                        fontWeight: "700",
-                        color: COLORS.textPrimary
+                        fontWeight: "700"
                       },
                       testID: "exercise-card-name",
                       children: name
@@ -8991,10 +9184,10 @@ function CollapsedCard({
                   summary && /* @__PURE__ */ jsx(
                     reactNative.Text,
                     {
+                      className: "text-text-secondary",
                       style: {
                         fontSize: 12,
                         fontFamily: "Inter, sans-serif",
-                        color: COLORS.textSecondary,
                         marginRight: 8
                       },
                       testID: "exercise-card-summary",
@@ -9064,10 +9257,9 @@ function ExpandedCard({
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
+      className: "bg-surface-elevated border-border",
       style: {
-        backgroundColor: COLORS.surfaceElevated,
         borderWidth: 1,
-        borderColor: COLORS.borderDefault,
         ...borderRadius,
         ...supersetMargin
       },
@@ -9090,17 +9282,17 @@ function ExpandedCard({
                   paddingHorizontal: 14,
                   paddingBottom: 10,
                   borderBottomWidth: 1,
-                  borderBottomColor: COLORS.borderDefault
+                  borderBottomColor: resolveColor("border-default")
                 },
                 children: [
                   /* @__PURE__ */ jsx(
                     reactNative.Text,
                     {
+                      className: "text-text-primary",
                       style: {
                         fontSize: 14,
                         fontFamily: '"Space Grotesk", sans-serif',
-                        fontWeight: "700",
-                        color: COLORS.textPrimary
+                        fontWeight: "700"
                       },
                       testID: "exercise-card-name",
                       children: name
@@ -9110,10 +9302,10 @@ function ExpandedCard({
                   summary && /* @__PURE__ */ jsx(
                     reactNative.Text,
                     {
+                      className: "text-text-secondary",
                       style: {
                         fontSize: 12,
                         fontFamily: "Inter, sans-serif",
-                        color: COLORS.textSecondary,
                         marginRight: 8
                       },
                       testID: "exercise-card-summary",
@@ -9164,13 +9356,13 @@ function ExpandedCard({
                   children: /* @__PURE__ */ jsx(
                     reactNative.Text,
                     {
+                      className: "text-text-tertiary",
                       style: {
                         fontSize: 10,
                         fontWeight: "600",
                         fontFamily: "Inter, sans-serif",
                         textTransform: "uppercase",
-                        letterSpacing: 0.8,
-                        color: COLORS.textTertiary
+                        letterSpacing: 0.8
                       },
                       children: header
                     }
@@ -9210,11 +9402,11 @@ function UpcomingCard({
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-primary",
             style: {
               fontSize: 14,
               fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: "700",
-              color: COLORS.textPrimary
+              fontWeight: "700"
             },
             testID: "exercise-card-name",
             children: name
@@ -9223,10 +9415,10 @@ function UpcomingCard({
         prescription && /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-secondary",
             style: {
               fontSize: 12,
               fontFamily: "Inter, sans-serif",
-              color: COLORS.textSecondary,
               marginLeft: 8
             },
             testID: "exercise-card-prescription",
@@ -9237,10 +9429,10 @@ function UpcomingCard({
         previousBest && /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-tertiary",
             style: {
               fontSize: 11,
-              fontFamily: "Inter, sans-serif",
-              color: COLORS.textTertiary
+              fontFamily: "Inter, sans-serif"
             },
             testID: "exercise-card-previous-best",
             children: previousBest
@@ -9478,11 +9670,12 @@ function WeekRow({
               /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: isCurrent ? void 0 : "text-text-primary",
                   style: {
                     fontSize: 13,
                     fontWeight: "700",
                     fontFamily: "Inter, sans-serif",
-                    color: isCurrent ? BRAND_PRIMARY5 : "var(--color-text-primary)"
+                    color: isCurrent ? BRAND_PRIMARY5 : void 0
                   },
                   accessibilityElementsHidden: true,
                   children: `W${weekNumber}`
@@ -9521,21 +9714,16 @@ function WeekRow({
     }
   );
 }
-var COLORS2 = {
-  // Theme-aware foregrounds: resolve to a readable color in both light and dark
-  // (react-native-web passes the CSS var through to the inline style).
-  textPrimary: "var(--color-text-primary)",
-  textSecondary: "var(--color-text-secondary)",
-  textTertiary: "var(--color-text-tertiary)",
+var COLORS = {
   statusSuccess: "#14B8A6",
   brandPrimary: "#FF7900",
   borderDefault: "#1F1F1F",
   brandPrimarySubtle: "rgba(255,121,0,0.06)"
 };
 var statusBorderColors = {
-  completed: COLORS2.statusSuccess,
-  today: COLORS2.brandPrimary,
-  upcoming: COLORS2.borderDefault
+  completed: COLORS.statusSuccess,
+  today: COLORS.brandPrimary,
+  upcoming: COLORS.borderDefault
 };
 var volumeStatusMap = {
   under: "behind",
@@ -9572,11 +9760,11 @@ function WorkoutCard({
       /* @__PURE__ */ jsx(
         reactNative.Text,
         {
+          className: "text-text-primary",
           style: {
             fontSize: 15,
             fontFamily: '"Space Grotesk", sans-serif',
-            fontWeight: "700",
-            color: COLORS2.textPrimary
+            fontWeight: "700"
           },
           testID: "workout-card-name",
           children: name
@@ -9586,10 +9774,10 @@ function WorkoutCard({
       /* @__PURE__ */ jsx(
         reactNative.Text,
         {
+          className: "text-text-tertiary",
           style: {
             fontSize: 11,
-            fontFamily: "Inter, sans-serif",
-            color: COLORS2.textTertiary
+            fontFamily: "Inter, sans-serif"
           },
           testID: "workout-card-date",
           children: date
@@ -9599,11 +9787,11 @@ function WorkoutCard({
     /* @__PURE__ */ jsx(
       reactNative.Text,
       {
+        className: "text-text-secondary",
         style: {
           marginTop: 4,
           fontSize: 12,
-          fontFamily: "Inter, sans-serif",
-          color: COLORS2.textSecondary
+          fontFamily: "Inter, sans-serif"
         },
         testID: "workout-card-stats",
         children: formatStats(totalSets, totalVolume, unit, duration)
@@ -9634,7 +9822,7 @@ function WorkoutCard({
       variant: "accent",
       elevation: 1,
       accentColor: statusBorderColors[status],
-      bgColor: isToday ? COLORS2.brandPrimarySubtle : void 0,
+      bgColor: isToday ? COLORS.brandPrimarySubtle : void 0,
       className,
       style: isUpcoming ? { opacity: 0.6 } : void 0,
       testID: "workout-card",
@@ -9674,8 +9862,6 @@ var BRAND_PRIMARY6 = "#FF7900";
 var BRAND_PRIMARY_DARK = "#C45E00";
 var BRAND_PRIMARY_LIGHT = "#FFB066";
 var BORDER_DEFAULT = "#1F1F1F";
-var TEXT_PRIMARY2 = "var(--color-text-primary)";
-var TEXT_SECONDARY = "var(--color-text-secondary)";
 var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY6, BRAND_PRIMARY_LIGHT];
 function heatmapColor(percentage) {
   const clamped = Math.max(0, Math.min(100, percentage));
@@ -9718,11 +9904,11 @@ function MesoCard({
       /* @__PURE__ */ jsx(
         reactNative.Text,
         {
+          className: "text-text-primary",
           style: {
             fontSize: 15,
             fontFamily: '"Space Grotesk", sans-serif',
-            fontWeight: "700",
-            color: TEXT_PRIMARY2
+            fontWeight: "700"
           },
           testID: "meso-card-name",
           children: name
@@ -9733,11 +9919,11 @@ function MesoCard({
     /* @__PURE__ */ jsx(
       reactNative.Text,
       {
+        className: "text-text-secondary",
         style: {
           marginTop: 4,
           fontSize: 12,
-          fontFamily: "Inter, sans-serif",
-          color: TEXT_SECONDARY
+          fontFamily: "Inter, sans-serif"
         },
         testID: "meso-card-subheader",
         children: `${split} \xB7 ${weekRange}`
@@ -9831,11 +10017,7 @@ function MesoCard({
 var BRAND_PRIMARY7 = "#FF7900";
 var RECENT_BORDER = "rgba(255,176,32,0.3)";
 var RECENT_GLOW = "0 0 12px rgba(255,176,32,0.06)";
-var SURFACE_RAISED = "var(--color-surface-raised)";
-var BORDER_DEFAULT2 = "var(--color-border-default)";
-var TEXT_PRIMARY3 = "var(--color-text-primary)";
-var TEXT_SECONDARY2 = "var(--color-text-secondary)";
-var TEXT_TERTIARY3 = "var(--color-text-tertiary)";
+var BORDER_DEFAULT2 = resolveColor("border-default");
 var TYPE_LABELS = {
   e1rm: "e1RM",
   weight: "Weight",
@@ -9861,14 +10043,13 @@ function PrRecordRow({ record, index }) {
     {
       accessibilityRole: "text",
       accessibilityLabel: a11yLabel,
-      className: "flex-row items-center",
+      className: "flex-row items-center bg-surface-raised",
       style: {
         gap: 10,
         paddingVertical: 10,
         paddingHorizontal: 12,
         marginBottom: 8,
         borderRadius: 8,
-        backgroundColor: SURFACE_RAISED,
         borderWidth: 1,
         borderColor: record.isRecent ? RECENT_BORDER : BORDER_DEFAULT2,
         ...record.isRecent ? { boxShadow: RECENT_GLOW } : {}
@@ -9879,12 +10060,12 @@ function PrRecordRow({ record, index }) {
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-secondary",
             style: {
               flex: 1,
               fontSize: 13,
               fontFamily: "Inter, sans-serif",
-              fontWeight: "600",
-              color: TEXT_SECONDARY2
+              fontWeight: "600"
             },
             testID: `pr-history-modal-record-${index}-type`,
             children: label
@@ -9893,11 +10074,11 @@ function PrRecordRow({ record, index }) {
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-primary",
             style: {
               fontSize: 14,
               fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: "700",
-              color: TEXT_PRIMARY3
+              fontWeight: "700"
             },
             testID: `pr-history-modal-record-${index}-value`,
             children: valueText
@@ -9906,12 +10087,12 @@ function PrRecordRow({ record, index }) {
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-tertiary",
             style: {
               minWidth: 64,
               textAlign: "right",
               fontSize: 11,
-              fontFamily: "Inter, sans-serif",
-              color: TEXT_TERTIARY3
+              fontFamily: "Inter, sans-serif"
             },
             testID: `pr-history-modal-record-${index}-date`,
             children: record.date
@@ -9949,13 +10130,13 @@ function PrHistoryModal({
           reactNative.View,
           {
             accessibilityElementsHidden: true,
+            className: "bg-border",
             style: {
               alignSelf: "center",
               width: 40,
               height: 4,
               borderRadius: 2,
-              marginTop: 8,
-              backgroundColor: BORDER_DEFAULT2
+              marginTop: 8
             },
             testID: "pr-history-modal-handle"
           }
@@ -9971,11 +10152,11 @@ function PrHistoryModal({
                 reactNative.Text,
                 {
                   accessibilityRole: "header",
+                  className: "text-text-primary",
                   style: {
                     fontSize: 16,
                     fontFamily: '"Space Grotesk", sans-serif',
-                    fontWeight: "700",
-                    color: TEXT_PRIMARY3
+                    fontWeight: "700"
                   },
                   testID: "pr-history-modal-title",
                   children: dialogLabel
@@ -9990,7 +10171,7 @@ function PrHistoryModal({
                   hitSlop: 8,
                   style: { padding: 4, margin: -4 },
                   testID: "pr-history-modal-close",
-                  children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 22, lineHeight: 22, color: TEXT_SECONDARY2 }, children: "\xD7" })
+                  children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary", style: { fontSize: 22, lineHeight: 22 }, children: "\xD7" })
                 }
               )
             ]
@@ -9999,11 +10180,11 @@ function PrHistoryModal({
         /* @__PURE__ */ jsx(DrawerBody, { className: "px-4 pt-0 pb-4", children: records.length === 0 ? /* @__PURE__ */ jsx(reactNative.View, { style: { paddingVertical: 24 }, testID: "pr-history-modal-empty", children: /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-tertiary",
             style: {
               textAlign: "center",
               fontSize: 13,
-              fontFamily: "Inter, sans-serif",
-              color: TEXT_TERTIARY3
+              fontFamily: "Inter, sans-serif"
             },
             children: "No personal records yet"
           }
@@ -10024,8 +10205,6 @@ var BRAND_PRIMARY_SUBTLE = "rgba(255,121,0,0.12)";
 var STATUS_SUCCESS = "#14B8A6";
 var STATUS_WARNING = "#FFB020";
 var STATUS_ERROR = "#D14343";
-var TEXT_PRIMARY4 = "var(--color-text-primary)";
-var TEXT_SECONDARY3 = "var(--color-text-secondary)";
 var EMOJI_SETS = {
   sleep: ["\u{1F634}", "\u{1F610}", "\u{1F642}", "\u{1F60A}", "\u{1F929}"],
   soreness: ["\u{1F635}", "\u{1F623}", "\u{1F610}", "\u{1F642}", "\u{1F4AA}"],
@@ -10057,7 +10236,8 @@ function EmojiSlider({ factor }) {
     /* @__PURE__ */ jsx(
       reactNative.Text,
       {
-        style: { fontSize: 12, fontWeight: "500", fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY3 },
+        className: "text-text-secondary",
+        style: { fontSize: 12, fontWeight: "500", fontFamily: "Inter, sans-serif" },
         testID: "readiness-check-factor-label",
         children: factor.label
       }
@@ -10081,14 +10261,15 @@ function EmojiSlider({ factor }) {
               accessibilityLabel: `${factor.label} level ${level} of 5`,
               "aria-checked": selected,
               testID: "readiness-check-emoji",
+              className: selected ? void 0 : "border-border bg-surface-raised",
               style: ({ pressed }) => ({
                 flex: 1,
                 alignItems: "center",
                 paddingVertical: 8,
                 borderRadius: 8,
                 borderWidth: 1,
-                borderColor: selected ? BRAND_PRIMARY8 : "var(--color-border-default)",
-                backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : "var(--color-surface-raised)",
+                borderColor: selected ? BRAND_PRIMARY8 : void 0,
+                backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : void 0,
                 opacity: selected ? 1 : pressed ? 0.8 : 0.55,
                 transform: [{ scale: selected ? 1.06 : 1 }]
               }),
@@ -10109,13 +10290,13 @@ function ScoreGauge({ score }) {
       accessibilityRole: "image",
       accessibilityLabel: `Readiness score: ${score} out of 100`,
       testID: "readiness-check-score",
+      className: "bg-surface-raised",
       style: {
         width: 60,
         height: 60,
         borderRadius: 30,
         borderWidth: 4,
         borderColor: color,
-        backgroundColor: "var(--color-surface-raised)",
         alignItems: "center",
         justifyContent: "center"
       },
@@ -10135,13 +10316,12 @@ function WarmUpCard({ validation }) {
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
+      className: "border-border bg-surface-raised",
       style: {
         marginTop: 16,
         padding: 12,
         borderRadius: 8,
-        borderWidth: 1,
-        borderColor: "var(--color-border-default)",
-        backgroundColor: "var(--color-surface-raised)"
+        borderWidth: 1
       },
       testID: "readiness-check-warmup",
       children: [
@@ -10149,7 +10329,8 @@ function WarmUpCard({ validation }) {
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {
-              style: { fontSize: 12, fontWeight: "600", fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY3 },
+              className: "text-text-secondary",
+              style: { fontSize: 12, fontWeight: "600", fontFamily: "Inter, sans-serif" },
               testID: "readiness-check-warmup-deficit",
               children: velocityDeficitText(validation.velocityDeficit)
             }
@@ -10159,7 +10340,8 @@ function WarmUpCard({ validation }) {
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
-            style: { marginTop: 6, fontSize: 13, fontFamily: "Inter, sans-serif", color: TEXT_PRIMARY4 },
+            className: "text-text-primary",
+            style: { marginTop: 6, fontSize: 13, fontFamily: "Inter, sans-serif" },
             testID: "readiness-check-warmup-recommendation",
             children: validation.recommendation
           }
@@ -10181,7 +10363,8 @@ function ReadinessCheck({
       /* @__PURE__ */ jsx(
         reactNative.Text,
         {
-          style: { fontSize: 18, fontWeight: "700", fontFamily: '"Space Grotesk", sans-serif', color: TEXT_PRIMARY4 },
+          className: "text-text-primary",
+          style: { fontSize: 18, fontWeight: "700", fontFamily: '"Space Grotesk", sans-serif' },
           testID: "readiness-check-title",
           children: "How are you feeling?"
         }
@@ -10214,14 +10397,11 @@ function ReadinessCheck({
 var BRAND_PRIMARY9 = "#FF7900";
 var BRAND_PRIMARY_DARK2 = "#C45E00";
 var BRAND_PRIMARY_LIGHT2 = "#FFB066";
-var TEXT_PRIMARY5 = "var(--color-text-primary)";
-var TEXT_SECONDARY4 = "var(--color-text-secondary)";
-var TEXT_TERTIARY4 = "var(--color-text-tertiary)";
 var SUCCESS = "#14B8A6";
 var WARNING = "#FFB020";
 var ERROR = "#D14343";
 var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY9, BRAND_PRIMARY_LIGHT2];
-var CARD_GRADIENT = "linear-gradient(135deg, var(--color-surface-elevated) 0%, var(--color-surface-raised) 100%)";
+var CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor("surface-elevated")} 0%, ${resolveColor("surface-raised")} 100%)`;
 var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(20,184,166,0.25) 0%, rgba(255,176,32,0.25) 50%, rgba(209,67,67,0.25) 100%)";
 var STATUS_VARIANTS = {
   success: { bg: "rgba(20,184,166,0.15)", border: "rgba(20,184,166,0.3)", text: SUCCESS },
@@ -10248,7 +10428,8 @@ function renderCoachingText(text, highlights) {
     (part, index) => highlights.includes(part) ? /* @__PURE__ */ jsx(
       reactNative.Text,
       {
-        style: { fontWeight: "700", color: TEXT_PRIMARY5 },
+        className: "text-text-primary",
+        style: { fontWeight: "700" },
         children: part
       },
       `${part}-${index}`
@@ -10295,13 +10476,13 @@ function MetricCell({ metric }) {
     /* @__PURE__ */ jsx(
       reactNative.Text,
       {
+        className: "text-text-tertiary",
         style: {
           fontSize: 10,
           fontFamily: "Inter, sans-serif",
           fontWeight: "600",
           letterSpacing: 0.5,
-          textTransform: "uppercase",
-          color: TEXT_TERTIARY4
+          textTransform: "uppercase"
         },
         children: metric.label
       }
@@ -10309,12 +10490,12 @@ function MetricCell({ metric }) {
     /* @__PURE__ */ jsx(
       reactNative.Text,
       {
+        className: "text-text-primary",
         style: {
           marginTop: 2,
           fontSize: 13,
           fontFamily: "Inter, sans-serif",
-          fontWeight: "600",
-          color: TEXT_PRIMARY5
+          fontWeight: "600"
         },
         children: metric.value
       }
@@ -10346,13 +10527,13 @@ function Gauge({ gauge }) {
               /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-secondary",
                   style: {
                     fontSize: 10,
                     fontFamily: "Inter, sans-serif",
                     fontWeight: "500",
                     letterSpacing: 0.5,
-                    textTransform: "uppercase",
-                    color: TEXT_SECONDARY4
+                    textTransform: "uppercase"
                   },
                   children: gauge.label
                 }
@@ -10360,11 +10541,11 @@ function Gauge({ gauge }) {
               gauge.sublabel != null && /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-tertiary",
                   style: {
                     fontSize: 10,
                     fontFamily: "Inter, sans-serif",
-                    fontWeight: "500",
-                    color: TEXT_TERTIARY4
+                    fontWeight: "500"
                   },
                   children: gauge.sublabel
                 }
@@ -10401,6 +10582,7 @@ function Gauge({ gauge }) {
               /* @__PURE__ */ jsx(
                 reactNative.View,
                 {
+                  className: "border-text-primary",
                   style: {
                     position: "absolute",
                     left: `${percentage}%`,
@@ -10410,7 +10592,6 @@ function Gauge({ gauge }) {
                     height: 14,
                     borderRadius: 9999,
                     borderWidth: 2,
-                    borderColor: TEXT_PRIMARY5,
                     backgroundColor: markerColor,
                     boxShadow: "0 0 4px rgba(0,0,0,0.5)"
                   },
@@ -10473,12 +10654,12 @@ function MesoStatusCard({
                   /* @__PURE__ */ jsx(
                     reactNative.Text,
                     {
+                      className: "text-text-primary",
                       style: {
                         flexShrink: 1,
                         fontSize: 15,
                         fontFamily: '"Space Grotesk", sans-serif',
-                        fontWeight: "700",
-                        color: TEXT_PRIMARY5
+                        fontWeight: "700"
                       },
                       testID: "meso-status-card-name",
                       children: mesoName
@@ -10491,11 +10672,11 @@ function MesoStatusCard({
             /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: "text-text-secondary",
                 style: {
                   marginTop: 4,
                   fontSize: 12,
-                  fontFamily: "Inter, sans-serif",
-                  color: TEXT_SECONDARY4
+                  fontFamily: "Inter, sans-serif"
                 },
                 testID: "meso-status-card-subtitle",
                 children: mesoSubtitle
@@ -10527,11 +10708,11 @@ function MesoStatusCard({
               children: /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-secondary",
                   style: {
                     fontSize: 12,
                     lineHeight: 17,
-                    fontFamily: "Inter, sans-serif",
-                    color: TEXT_SECONDARY4
+                    fontFamily: "Inter, sans-serif"
                   },
                   children: renderCoachingText(coaching.text, coaching.highlights)
                 }
@@ -10576,15 +10757,11 @@ function MesoStatusCard({
   );
 }
 var BRAND_PRIMARY10 = "#FF7900";
-var TEXT_PRIMARY6 = "var(--color-text-primary)";
-var TEXT_SECONDARY5 = "var(--color-text-secondary)";
-var TEXT_TERTIARY5 = "var(--color-text-tertiary)";
-var BORDER_STRONG = "var(--color-border-strong)";
+var PROJECTION_LINE_COLOR = resolveColor("text-tertiary");
 var STATUS_SUCCESS2 = "#14B8A6";
 var STATUS_ERROR2 = "#D14343";
 var STATUS_WARNING2 = "#FFB020";
 var GRID_LINE = "rgba(255,255,255,0.06)";
-var TOOLTIP_BG = "var(--color-surface-elevated)";
 var SUCCESS_PILL_BG = "rgba(20,184,166,0.10)";
 var SUCCESS_PILL_BORDER = "rgba(20,184,166,0.20)";
 var ERROR_PILL_BG = "rgba(209,67,67,0.10)";
@@ -10592,8 +10769,8 @@ var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
 var PLOT_LEFT = 26;
 var TOOLTIP_WIDTH = 124;
 function timeOf(dateStr) {
-  const t = Date.parse(dateStr);
-  return Number.isNaN(t) ? 0 : t;
+  const t2 = Date.parse(dateStr);
+  return Number.isNaN(t2) ? 0 : t2;
 }
 function formatValue(value) {
   return `${Math.round(value)}`;
@@ -10765,7 +10942,7 @@ function StrengthTrendChart({
               alignItems: "center",
               justifyContent: "center"
             },
-            children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_TERTIARY5 }, children: "No strength data yet" })
+            children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-tertiary", style: { fontSize: 12, fontFamily: "Inter, sans-serif" }, children: "No strength data yet" })
           }
         )
       }
@@ -10809,6 +10986,7 @@ function StrengthTrendChart({
                     children: /* @__PURE__ */ jsx(
                       reactNative.Text,
                       {
+                        className: "text-text-tertiary",
                         style: {
                           position: "absolute",
                           left: -PLOT_LEFT,
@@ -10816,8 +10994,7 @@ function StrengthTrendChart({
                           width: PLOT_LEFT - 4,
                           textAlign: "right",
                           fontSize: 9,
-                          fontFamily: "Inter, sans-serif",
-                          color: TEXT_TERTIARY5
+                          fontFamily: "Inter, sans-serif"
                         },
                         children: line.label
                       }
@@ -10860,7 +11037,7 @@ function StrengthTrendChart({
                         ChartLine,
                         {
                           coords: geometry.projection,
-                          color: TEXT_TERTIARY5,
+                          color: PROJECTION_LINE_COLOR,
                           strokeWidth: 2,
                           dashed: true,
                           testID: "strength-trend-chart-projection-segment"
@@ -10936,6 +11113,7 @@ function StrengthTrendChart({
             {
               testID: "strength-trend-chart-tooltip",
               accessibilityElementsHidden: true,
+              className: "bg-surface-elevated border-border-strong",
               style: {
                 position: "absolute",
                 left: Math.max(
@@ -10944,9 +11122,7 @@ function StrengthTrendChart({
                 ),
                 top: Math.max(0, selectedCoord.y - 52),
                 maxWidth: TOOLTIP_WIDTH,
-                backgroundColor: TOOLTIP_BG,
                 borderWidth: 1,
-                borderColor: BORDER_STRONG,
                 borderRadius: 8,
                 paddingVertical: 8,
                 paddingHorizontal: 10
@@ -10955,10 +11131,10 @@ function StrengthTrendChart({
                 /* @__PURE__ */ jsx(
                   reactNative.Text,
                   {
+                    className: "text-text-tertiary",
                     style: {
                       fontSize: 10,
-                      fontFamily: "Inter, sans-serif",
-                      color: TEXT_TERTIARY5
+                      fontFamily: "Inter, sans-serif"
                     },
                     children: selectedCoord.point.sessionLabel ?? selectedCoord.point.date
                   }
@@ -10966,12 +11142,12 @@ function StrengthTrendChart({
                 /* @__PURE__ */ jsx(
                   reactNative.Text,
                   {
+                    className: "text-text-primary",
                     style: {
                       marginTop: 2,
                       fontSize: 13,
                       fontFamily: "Inter, sans-serif",
-                      fontWeight: "700",
-                      color: TEXT_PRIMARY6
+                      fontWeight: "700"
                     },
                     children: `${formatValue(selectedCoord.point.e1rm)} ${unit}`
                   }
@@ -11004,14 +11180,14 @@ function StrengthTrendChart({
               reactNative.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",
-                  color: TEXT_TERTIARY5
+                  fontFamily: "Inter, sans-serif"
                 },
                 children: boundary.label
               },
@@ -11055,7 +11231,7 @@ function StrengthTrendChart({
             children: [
               /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { gap: 5 }, children: [
                 /* @__PURE__ */ jsx(reactNative.View, { style: { width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY10 } }),
-                /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY5 }, children: "Actual" })
+                /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "Actual" })
               ] }),
               /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { gap: 5 }, children: [
                 /* @__PURE__ */ jsx(
@@ -11066,15 +11242,15 @@ function StrengthTrendChart({
                       height: 0,
                       borderTopWidth: 2,
                       borderStyle: "dashed",
-                      borderTopColor: TEXT_TERTIARY5
+                      borderTopColor: PROJECTION_LINE_COLOR
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY5 }, children: "Projected" })
+                /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "Projected" })
               ] }),
               /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { gap: 5 }, children: [
                 /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 12, color: STATUS_WARNING2 }, children: "\u2605" }),
-                /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY5 }, children: "PR" })
+                /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "PR" })
               ] })
             ]
           }
@@ -11087,7 +11263,6 @@ var STATUS_SUCCESS3 = "#14B8A6";
 var STATUS_WARNING3 = "#FFB020";
 var STATUS_INFO = "#2196F3";
 var DOT_BORDER = "#F3F4F6";
-var TEXT_TERTIARY6 = "var(--color-text-tertiary)";
 var BAND_FILL = "rgba(20,184,166,0.1)";
 var BAND_EDGE = "rgba(20,184,166,0.45)";
 var PROJECTION_FILL = "rgba(20,184,166,0.05)";
@@ -11129,8 +11304,8 @@ function interpEdge(pixels, x, key) {
     const a = pixels[i];
     const b = pixels[i + 1];
     if (x >= a.x && x <= b.x) {
-      const t = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
-      return a[key] + t * (b[key] - a[key]);
+      const t2 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
+      return a[key] + t2 * (b[key] - a[key]);
     }
   }
   return pixels[pixels.length - 1][key];
@@ -11368,6 +11543,7 @@ function CapacityBandChart({
               /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-tertiary",
                   style: {
                     position: "absolute",
                     left: PADDING_LEFT / 2 - 14,
@@ -11376,7 +11552,6 @@ function CapacityBandChart({
                     textAlign: "center",
                     fontSize: 9,
                     fontFamily: "Inter, sans-serif",
-                    color: TEXT_TERTIARY6,
                     transform: [{ rotate: "-90deg" }]
                   },
                   accessibilityElementsHidden: true,
@@ -11390,6 +11565,7 @@ function CapacityBandChart({
                 return /* @__PURE__ */ jsx(
                   reactNative.Text,
                   {
+                    className: "text-text-tertiary",
                     style: {
                       position: "absolute",
                       left: toX(point.date) - 14,
@@ -11397,8 +11573,7 @@ function CapacityBandChart({
                       width: 28,
                       textAlign: "center",
                       fontSize: 10,
-                      fontFamily: "Inter, sans-serif",
-                      color: TEXT_TERTIARY6
+                      fontFamily: "Inter, sans-serif"
                     },
                     accessibilityElementsHidden: true,
                     importantForAccessibility: "no-hide-descendants",
@@ -11460,12 +11635,7 @@ function CapacityBandChart({
     }
   );
 }
-var SURFACE_ELEVATED = "var(--color-surface-elevated)";
-var BORDER_DEFAULT3 = "var(--color-border-default)";
 var BRAND_PRIMARY11 = "#FF7900";
-var TEXT_PRIMARY7 = "var(--color-text-primary)";
-var TEXT_TERTIARY7 = "var(--color-text-tertiary)";
-var PAGE_BG = "var(--color-background-base)";
 var WORKOUT_PILL_STATUS = {
   completed: "completed",
   today: "current",
@@ -11517,7 +11687,7 @@ function Breadcrumbs2({ crumbs, onNavigate }) {
       children: crumbs.map((crumb, index) => {
         const isLast = index === crumbs.length - 1;
         return /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { gap: 4 }, children: [
-          index > 0 && /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 12, color: TEXT_TERTIARY7 }, children: "\u203A" }),
+          index > 0 && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-tertiary", style: { fontSize: 12 }, children: "\u203A" }),
           /* @__PURE__ */ jsx(
             reactNative.Pressable,
             {
@@ -11528,11 +11698,12 @@ function Breadcrumbs2({ crumbs, onNavigate }) {
               children: /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: isLast ? "text-text-primary" : void 0,
                   style: {
                     fontSize: 12,
                     fontFamily: "Inter, sans-serif",
                     fontWeight: isLast ? "700" : "500",
-                    color: isLast ? TEXT_PRIMARY7 : BRAND_PRIMARY11
+                    color: isLast ? void 0 : BRAND_PRIMARY11
                   },
                   children: crumb.label
                 }
@@ -11661,8 +11832,8 @@ function ProgramPlanningPage({
   return /* @__PURE__ */ jsx(
     reactNative.View,
     {
-      className,
-      style: { width: 390, backgroundColor: PAGE_BG },
+      className: cn(className, "bg-background-base"),
+      style: { width: 390 },
       accessibilityRole: "main",
       "aria-label": title,
       testID: "program-planning-page",
@@ -11672,11 +11843,11 @@ function ProgramPlanningPage({
           reactNative.Text,
           {
             accessibilityRole: "header",
+            className: "text-text-primary",
             style: {
               fontSize: 20,
               fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: "700",
-              color: TEXT_PRIMARY7
+              fontWeight: "700"
             },
             testID: "program-planning-page-title",
             children: title
@@ -11700,10 +11871,9 @@ function ProgramPlanningPage({
         /* @__PURE__ */ jsxs(
           reactNative.View,
           {
+            className: "bg-surface-elevated border-border",
             style: {
-              backgroundColor: SURFACE_ELEVATED,
               borderWidth: 1,
-              borderColor: BORDER_DEFAULT3,
               borderRadius: 12,
               padding: 12
             },
@@ -11734,13 +11904,7 @@ function ProgramPlanningPage({
     }
   );
 }
-var SURFACE_ELEVATED2 = "var(--color-surface-elevated)";
-var BORDER_DEFAULT4 = "var(--color-border-default)";
 var BRAND_PRIMARY12 = "#FF7900";
-var TEXT_PRIMARY8 = "var(--color-text-primary)";
-var TEXT_SECONDARY6 = "var(--color-text-secondary)";
-var TEXT_TERTIARY8 = "var(--color-text-tertiary)";
-var PAGE_BG2 = "var(--color-background-base)";
 var CHART_WIDTH = 326;
 var CHART_HEIGHT = 150;
 var EXERCISE_DETAIL_TABS = [
@@ -11787,7 +11951,7 @@ function TabBar({ active, onSelect }) {
       className: "flex-row",
       style: {
         borderBottomWidth: 1,
-        borderBottomColor: BORDER_DEFAULT4
+        borderBottomColor: resolveColor("border-default")
       },
       accessibilityRole: "tablist",
       testID: "exercise-detail-page-tabs",
@@ -11810,11 +11974,11 @@ function TabBar({ active, onSelect }) {
             children: /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: isActive ? "text-text-primary" : "text-text-tertiary",
                 style: {
                   fontSize: 13,
                   fontFamily: "Inter, sans-serif",
-                  fontWeight: isActive ? "700" : "500",
-                  color: isActive ? TEXT_PRIMARY8 : TEXT_TERTIARY8
+                  fontWeight: isActive ? "700" : "500"
                 },
                 children: label
               }
@@ -11838,24 +12002,23 @@ function StatStrip({ stats, unit }) {
     return /* @__PURE__ */ jsxs(
       reactNative.View,
       {
+        className: "bg-surface-elevated border-border",
         style: {
           flex: 1,
           padding: 12,
           borderRadius: 10,
-          backgroundColor: SURFACE_ELEVATED2,
-          borderWidth: 1,
-          borderColor: BORDER_DEFAULT4
+          borderWidth: 1
         },
         testID: `exercise-detail-page-stat-${key}`,
         children: [
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {
+              className: "text-text-primary",
               style: {
                 fontSize: 18,
                 fontFamily: '"Space Grotesk", sans-serif',
-                fontWeight: "700",
-                color: TEXT_PRIMARY8
+                fontWeight: "700"
               },
               children: value
             }
@@ -11863,14 +12026,14 @@ function StatStrip({ stats, unit }) {
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {
+              className: "text-text-tertiary",
               style: {
                 marginTop: 2,
                 fontSize: 10,
                 fontFamily: "Inter, sans-serif",
                 fontWeight: "600",
                 letterSpacing: 0.4,
-                textTransform: "uppercase",
-                color: TEXT_TERTIARY8
+                textTransform: "uppercase"
               },
               children: label
             }
@@ -11889,10 +12052,9 @@ function SectionCard({
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
+      className: "bg-surface-elevated border-border",
       style: {
-        backgroundColor: SURFACE_ELEVATED2,
         borderWidth: 1,
-        borderColor: BORDER_DEFAULT4,
         borderRadius: 12,
         padding: 12,
         gap: 10
@@ -11902,13 +12064,13 @@ function SectionCard({
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-tertiary",
             style: {
               fontSize: 11,
               fontFamily: "Inter, sans-serif",
               fontWeight: "600",
               letterSpacing: 0.6,
-              textTransform: "uppercase",
-              color: TEXT_TERTIARY8
+              textTransform: "uppercase"
             },
             children: title
           }
@@ -11923,7 +12085,8 @@ function EntryList({ entries, expandedId, onToggle, emptyLabel, testID }) {
     return /* @__PURE__ */ jsx(
       reactNative.Text,
       {
-        style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_TERTIARY8 },
+        className: "text-text-tertiary",
+        style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
         testID: `${testID}-empty`,
         children: emptyLabel
       }
@@ -11951,12 +12114,12 @@ function VbtBreakdown({ sets }) {
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {
+              className: "text-text-secondary",
               style: {
                 width: 44,
                 fontSize: 11,
                 fontFamily: "Inter, sans-serif",
-                fontWeight: "600",
-                color: TEXT_SECONDARY6
+                fontWeight: "600"
               },
               children: set.label
             }
@@ -11965,11 +12128,11 @@ function VbtBreakdown({ sets }) {
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {
+              className: "text-text-tertiary",
               style: {
                 fontSize: 11,
                 fontFamily: "Inter, sans-serif",
-                fontVariant: ["tabular-nums"],
-                color: TEXT_TERTIARY8
+                fontVariant: ["tabular-nums"]
               },
               children: `${mean.toFixed(2)} \xB7 -${loss}%`
             }
@@ -11988,23 +12151,22 @@ function VbtSummaryRow({ summary }) {
   return /* @__PURE__ */ jsx(reactNative.View, { className: "flex-row", style: { gap: 8 }, testID: "exercise-detail-page-vbt-summary", children: cells.map((cell) => /* @__PURE__ */ jsxs(
     reactNative.View,
     {
+      className: "bg-surface-elevated border-border",
       style: {
         flex: 1,
         padding: 12,
         borderRadius: 10,
-        backgroundColor: SURFACE_ELEVATED2,
-        borderWidth: 1,
-        borderColor: BORDER_DEFAULT4
+        borderWidth: 1
       },
       children: [
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-primary",
             style: {
               fontSize: 16,
               fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: "700",
-              color: TEXT_PRIMARY8
+              fontWeight: "700"
             },
             children: cell.value
           }
@@ -12012,14 +12174,14 @@ function VbtSummaryRow({ summary }) {
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-tertiary",
             style: {
               marginTop: 2,
               fontSize: 10,
               fontFamily: "Inter, sans-serif",
               fontWeight: "600",
               letterSpacing: 0.4,
-              textTransform: "uppercase",
-              color: TEXT_TERTIARY8
+              textTransform: "uppercase"
             },
             children: cell.label
           }
@@ -12048,8 +12210,8 @@ function ExerciseDetailPage({
   return /* @__PURE__ */ jsx(
     reactNative.View,
     {
-      className,
-      style: { width: 390, backgroundColor: PAGE_BG2 },
+      className: cn("bg-background-base", className),
+      style: { width: 390 },
       accessibilityRole: "main",
       "aria-label": exercise.name,
       testID: "exercise-detail-page",
@@ -12067,11 +12229,11 @@ function ExerciseDetailPage({
                   reactNative.Text,
                   {
                     accessibilityRole: "header",
+                    className: "text-text-primary",
                     style: {
                       fontSize: 20,
                       fontFamily: '"Space Grotesk", sans-serif',
-                      fontWeight: "700",
-                      color: TEXT_PRIMARY8
+                      fontWeight: "700"
                     },
                     testID: "exercise-detail-page-title",
                     children: exercise.name
@@ -12080,11 +12242,11 @@ function ExerciseDetailPage({
                 /* @__PURE__ */ jsx(
                   reactNative.Text,
                   {
+                    className: "text-text-secondary",
                     style: {
                       marginTop: 2,
                       fontSize: 12,
-                      fontFamily: "Inter, sans-serif",
-                      color: TEXT_SECONDARY6
+                      fontFamily: "Inter, sans-serif"
                     },
                     testID: "exercise-detail-page-subtitle",
                     children: exercise.subtitle
@@ -12107,13 +12269,13 @@ function ExerciseDetailPage({
                     /* @__PURE__ */ jsx(
                       reactNative.Text,
                       {
+                        className: "text-text-tertiary",
                         style: {
                           fontSize: 9,
                           fontFamily: "Inter, sans-serif",
                           fontWeight: "600",
                           letterSpacing: 0.4,
-                          textTransform: "uppercase",
-                          color: TEXT_TERTIARY8
+                          textTransform: "uppercase"
                         },
                         children: "e1RM"
                       }
@@ -12191,13 +12353,7 @@ function ExerciseDetailPage({
     }
   );
 }
-var SURFACE_ELEVATED3 = "var(--color-surface-elevated)";
-var BORDER_DEFAULT5 = "var(--color-border-default)";
 var BRAND_PRIMARY13 = "#FF7900";
-var TEXT_PRIMARY9 = "var(--color-text-primary)";
-var TEXT_SECONDARY7 = "var(--color-text-secondary)";
-var TEXT_TERTIARY9 = "var(--color-text-tertiary)";
-var PAGE_BG3 = "var(--color-background-base)";
 function countCompletedSets(exercise) {
   if (exercise.setVelocities != null) return exercise.setVelocities.length;
   if (exercise.status === "completed") return exercise.totalPlannedSets;
@@ -12280,11 +12436,11 @@ function WorkoutHeader({
           reactNative.Text,
           {
             accessibilityRole: "header",
+            className: "text-text-primary",
             style: {
               fontSize: 20,
               fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: "700",
-              color: TEXT_PRIMARY9
+              fontWeight: "700"
             },
             testID: "active-workout-page-title",
             children: title
@@ -12293,11 +12449,11 @@ function WorkoutHeader({
         subtitle != null && /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-secondary",
             style: {
               marginTop: 2,
               fontSize: 12,
-              fontFamily: "Inter, sans-serif",
-              color: TEXT_SECONDARY7
+              fontFamily: "Inter, sans-serif"
             },
             testID: "active-workout-page-subtitle",
             children: subtitle
@@ -12321,13 +12477,13 @@ function WorkoutHeader({
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-tertiary",
             style: {
               fontSize: 10,
               fontFamily: "Inter, sans-serif",
               fontWeight: "600",
               letterSpacing: 0.4,
-              textTransform: "uppercase",
-              color: TEXT_TERTIARY9
+              textTransform: "uppercase"
             },
             children: `${progress.completedSets}/${progress.totalSets} sets`
           }
@@ -12337,7 +12493,8 @@ function WorkoutHeader({
     /* @__PURE__ */ jsx(
       reactNative.View,
       {
-        style: { height: 4, backgroundColor: BORDER_DEFAULT5, borderRadius: 2 },
+        className: "bg-border",
+        style: { height: 4, borderRadius: 2 },
         testID: "active-workout-page-progress-track",
         children: /* @__PURE__ */ jsx(
           reactNative.View,
@@ -12361,10 +12518,9 @@ function ExerciseList({ groups, focusedId, onToggle }) {
       return /* @__PURE__ */ jsx(
         reactNative.View,
         {
+          className: "bg-surface-elevated border-border",
           style: {
-            backgroundColor: SURFACE_ELEVATED3,
             borderWidth: 1,
-            borderColor: BORDER_DEFAULT5,
             borderRadius: 12
           },
           children: /* @__PURE__ */ jsx(
@@ -12430,8 +12586,8 @@ function ActiveWorkoutPage({
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
-      className,
-      style: { position: "relative", width: 390, backgroundColor: PAGE_BG3 },
+      className: ["bg-background-base", className].filter(Boolean).join(" "),
+      style: { position: "relative", width: 390 },
       accessibilityRole: "main",
       "aria-label": title,
       testID: "active-workout-page",
@@ -12444,7 +12600,7 @@ function ActiveWorkoutPage({
         (showRest || showInput) && /* @__PURE__ */ jsx(
           reactNative.View,
           {
-            style: { borderTopWidth: 1, borderTopColor: BORDER_DEFAULT5 },
+            style: { borderTopWidth: 1, borderTopColor: resolveColor("border-default") },
             testID: "active-workout-page-bottom-bar",
             children: showRest && rest != null ? /* @__PURE__ */ jsx(
               RestTimer,
@@ -12704,28 +12860,28 @@ function Scatter({
         testID: "scatter-canvas",
         style: { position: "absolute", top: 0, left: 0, width, height, overflow: "hidden" },
         children: [
-          ticksOf(yd, TICK_COUNT).map((t, i) => {
-            const y = toY(t);
+          ticksOf(yd, TICK_COUNT).map((t2, i) => {
+            const y = toY(t2);
             return /* @__PURE__ */ jsx(
               reactNative.View,
               {
                 accessibilityElementsHidden: true,
                 testID: "scatter-gridline-y",
                 style: { position: "absolute", left: PLOT_LEFT2, width: innerW, top: y, height: 1, backgroundColor: GRID_LINE2 },
-                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", left: -PLOT_LEFT2, top: -6, width: PLOT_LEFT2 - 6, textAlign: "right" }, children: formatTick(t) })
+                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", left: -PLOT_LEFT2, top: -6, width: PLOT_LEFT2 - 6, textAlign: "right" }, children: formatTick(t2) })
               },
               `y-${i}`
             );
           }),
-          ticksOf(xd, TICK_COUNT).map((t, i) => {
-            const x = toX(t);
+          ticksOf(xd, TICK_COUNT).map((t2, i) => {
+            const x = toX(t2);
             return /* @__PURE__ */ jsx(
               reactNative.View,
               {
                 accessibilityElementsHidden: true,
                 testID: "scatter-gridline-x",
                 style: { position: "absolute", top: PLOT_TOP, height: innerH, left: x, width: 1, backgroundColor: GRID_LINE2 },
-                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t) })
+                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t2) })
               },
               `x-${i}`
             );
@@ -12859,23 +13015,23 @@ function Gauge2({
       testID: "gauge",
       ...props,
       children: [
-        ticks.map((t) => /* @__PURE__ */ jsx(
+        ticks.map((t2) => /* @__PURE__ */ jsx(
           reactNative.View,
           {
             accessibilityElementsHidden: true,
             testID: "gauge-segment",
             style: {
               position: "absolute",
-              left: t.left - tickThickness / 2,
-              top: t.top - tickLength / 2,
+              left: t2.left - tickThickness / 2,
+              top: t2.top - tickLength / 2,
               width: tickThickness,
               height: tickLength,
               borderRadius: tickThickness / 2,
-              backgroundColor: t.color,
-              transform: [{ rotate: t.rotate }]
+              backgroundColor: t2.color,
+              transform: [{ rotate: t2.rotate }]
             }
           },
-          t.key
+          t2.key
         )),
         /* @__PURE__ */ jsxs(reactNative.View, { style: { position: "absolute", top: 0, left: 0, width: size, height: size }, className: "items-center justify-center", children: [
           /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-baseline gap-0.5", children: [
@@ -12889,65 +13045,6 @@ function Gauge2({
   );
 }
 
-// src/utils/colors.ts
-function getStatusColor(status) {
-  return `var(--color-status-${status})`;
-}
-function getResultColor(result) {
-  return `var(--color-result-${result})`;
-}
-function alpha(color, opacity) {
-  const clampedOpacity = Math.max(0, Math.min(1, opacity));
-  if (color.startsWith("#")) {
-    const hex = color.slice(1);
-    let r, g, b;
-    if (hex.length === 3) {
-      r = parseInt(hex[0] + hex[0], 16);
-      g = parseInt(hex[1] + hex[1], 16);
-      b = parseInt(hex[2] + hex[2], 16);
-    } else if (hex.length === 6) {
-      r = parseInt(hex.slice(0, 2), 16);
-      g = parseInt(hex.slice(2, 4), 16);
-      b = parseInt(hex.slice(4, 6), 16);
-    } else {
-      return color;
-    }
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-  if (rgbMatch) {
-    const [, r, g, b] = rgbMatch;
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/);
-  if (rgbaMatch) {
-    const [, r, g, b] = rgbaMatch;
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  return color;
-}
-function getLuminance(color) {
-  if (!color.startsWith("#")) return "dark";
-  const hex = color.slice(1);
-  let r, g, b;
-  if (hex.length === 3) {
-    r = parseInt(hex[0] + hex[0], 16);
-    g = parseInt(hex[1] + hex[1], 16);
-    b = parseInt(hex[2] + hex[2], 16);
-  } else if (hex.length === 6) {
-    r = parseInt(hex.slice(0, 2), 16);
-    g = parseInt(hex.slice(2, 4), 16);
-    b = parseInt(hex.slice(4, 6), 16);
-  } else {
-    return "dark";
-  }
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return luminance > 0.5 ? "light" : "dark";
-}
-function getContrastText(backgroundColor) {
-  return getLuminance(backgroundColor) === "light" ? "#000000" : "#FFFFFF";
-}
-
 // src/utils/form.ts
 function getFieldValidationProps(state) {
   return {
@@ -13175,6 +13272,7 @@ exports.StrengthTrendChart = StrengthTrendChart;
 exports.SupersetWrapper = SupersetWrapper;
 exports.Surface = Surface;
 exports.Switch = Switch;
+exports.TEMPO_PACING = TEMPO_PACING;
 exports.Tab = Tab;
 exports.TabList = TabList;
 exports.TabPanel = TabPanel;
@@ -13187,7 +13285,9 @@ exports.TableHeaderCell = TableHeaderCell;
 exports.TablePagination = TablePagination;
 exports.TableRow = TableRow;
 exports.Tabs = Tabs;
+exports.TempoBar = TempoBar;
 exports.TempoDisplay = TempoDisplay;
+exports.ThemeProvider = ThemeProvider;
 exports.Toast = Toast;
 exports.ToastProvider = ToastProvider;
 exports.ToolbarButton = ToolbarButton;
@@ -13248,6 +13348,8 @@ exports.getLuminance = getLuminance;
 exports.getResultColor = getResultColor;
 exports.getSemanticColors = getSemanticColors;
 exports.getStatusColor = getStatusColor;
+exports.getTempoFillPct = getTempoFillPct;
+exports.getTempoPacingState = getTempoPacingState;
 exports.getThemeCSSVars = getThemeCSSVars;
 exports.getValidatedElevation = getValidatedElevation;
 exports.getVelocityZoneColor = getVelocityZoneColor;
@@ -13272,6 +13374,7 @@ exports.primitiveShadows = primitiveShadows;
 exports.primitiveSpacing = primitiveSpacing;
 exports.primitiveTypography = primitiveTypography;
 exports.primitiveZIndex = primitiveZIndex;
+exports.resolveColor = resolveColor;
 exports.rgbToHex = rgbToHex;
 exports.rgbToHsv = rgbToHsv;
 exports.roundRpe = roundRpe;