@titan-design/react-ui 0.3.0 → 0.5.0

package/dist/bodymap.mjs

@@ -1,9 +1,409 @@
-import { WORKOUT_TOKENS, jsxs, jsx, cn, Badge, Sparkline, MesoStatusCard } from './chunk-TOD2WQBG.mjs';
-import './chunk-P7TSQUN6.mjs';
-import './chunk-7XPB4NAO.mjs';
-import { useMemo, useState, useEffect } from 'react';
-import { Animated, Easing, View, Text, Pressable, ScrollView } from 'react-native';
+import { useMemo, useState, useEffect, Fragment as Fragment$1, useSyncExternalStore } from 'react';
+import { Platform, Animated, Easing, View, Text, Pressable, ScrollView } from 'react-native';
 import BodyHighlighter from 'react-native-body-highlighter';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Fragment, jsx as jsx$1, jsxs as jsxs$1 } from 'react/jsx-runtime';
+
+// src/components/custom/Workout/BodyMap.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/theme/tokens/primitives.ts
+var primitiveColors = {
+  // Blue scale (primary brand)
+  blue: {
+    400: "#60A5FA",
+    600: "#5048E5",
+    // Primary main
+    700: "#3832A0"},
+  // Teal scale (success)
+  teal: {
+    50: "#F0FDFA",
+    400: "#43C6B7",
+    // Success light
+    500: "#14B8A6",
+    700: "#0E8074"},
+  // Red scale (error)
+  red: {
+    50: "#FEF2F2",
+    400: "#DA6868",
+    // Error light
+    500: "#EF4444",
+    600: "#D14343",
+    // Error main
+    700: "#922E2E"},
+  // Amber scale (warning)
+  amber: {
+    50: "#FFFBEB",
+    400: "#FFBF4C",
+    // Warning light
+    500: "#FFB020",
+    // Warning main
+    600: "#B27B16"},
+  // Sky/Blue scale (info)
+  sky: {
+    50: "#F0F9FF",
+    400: "#64B6F7",
+    // Info light
+    500: "#2196F3",
+    700: "#0B79D0"},
+  // Neutral/Gray scale
+  neutral: {
+    50: "#FAFAFA",
+    100: "#F3F4F6",
+    300: "#D1D5DB",
+    400: "#9CA3AF",
+    500: "#6B7280",
+    600: "#4B5563",
+    900: "#111827"},
+  // Orange scale (accent/brand color)
+  accent: {
+    200: "#FF9630",
+    300: "#FF8500",
+    400: "#FF7900",
+    500: "#F56C00",
+    600: "#E06D10",
+    700: "#D0620C"},
+  // Charcoal scale (dark backgrounds)
+  charcoal: {
+    300: "#2C2C2C",
+    400: "#1F1F1F",
+    500: "#1C1C1C",
+    600: "#191919",
+    700: "#161616",
+    900: "#101010"
+  },
+  // Steel scale (cool accent)
+  steel: {
+    300: "#678498",
+    400: "#557488",
+    500: "#406D87",
+    600: "#39617A",
+    700: "#32556D"},
+  // Pure colors
+  white: "#FFFFFF"};
+var discreteRainbow = [
+  "#E8ECFB",
+  "#D9CCE3",
+  "#D1BBD7",
+  "#CAACCB",
+  "#BA8DB4",
+  "#AE76A3",
+  "#AA6F9E",
+  "#994F88",
+  "#882E72",
+  "#1965B0",
+  "#437DBF",
+  "#5289C7",
+  "#6195CF",
+  "#7BAFDE",
+  "#4EB265",
+  "#90C987",
+  "#CAE0AB",
+  "#F7F056",
+  "#F7CB45",
+  "#F6C141",
+  "#F4A736",
+  "#F1932D",
+  "#EE8026",
+  "#E8601C",
+  "#E65518",
+  "#DC050C",
+  "#A5170E",
+  "#72190E",
+  "#42150A"
+];
+
+// src/theme/tokens/semantic.ts
+var semanticColorsLight = {
+  // Brand colors (brand-*)
+  "brand-primary": primitiveColors.accent[400],
+  // #FF7900
+  "brand-primary-light": primitiveColors.accent[200],
+  // #FF9630
+  "brand-primary-dark": primitiveColors.accent[700],
+  // #D0620C
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
+  "brand-primary-hover": primitiveColors.accent[500],
+  "brand-primary-active": primitiveColors.accent[600],
+  "brand-secondary": primitiveColors.steel[500],
+  // #406D87
+  "brand-secondary-light": primitiveColors.steel[300],
+  // #678498
+  "brand-secondary-dark": primitiveColors.steel[700],
+  // #32556D
+  "brand-secondary-subtle": "rgba(64, 109, 135, 0.08)",
+  "brand-secondary-hover": primitiveColors.steel[600],
+  "brand-secondary-active": primitiveColors.steel[700],
+  // Text on brand backgrounds (on-*)
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors (status-*)
+  "status-success": primitiveColors.teal[500],
+  // #14B8A6
+  "status-success-light": primitiveColors.teal[400],
+  // #43C6B7
+  "status-success-dark": primitiveColors.teal[700],
+  // #0E8074
+  "status-success-subtle": primitiveColors.teal[50],
+  "status-error": primitiveColors.red[600],
+  // #D14343
+  "status-error-light": primitiveColors.red[400],
+  // #DA6868
+  "status-error-dark": primitiveColors.red[700],
+  // #922E2E
+  "status-error-subtle": primitiveColors.red[50],
+  "status-warning": primitiveColors.amber[500],
+  // #FFB020
+  "status-warning-light": primitiveColors.amber[400],
+  // #FFBF4C
+  "status-warning-dark": primitiveColors.amber[600],
+  // #B27B16
+  "status-warning-subtle": primitiveColors.amber[50],
+  "status-info": primitiveColors.sky[500],
+  // #2196F3
+  "status-info-light": primitiveColors.sky[400],
+  // #64B6F7
+  "status-info-dark": primitiveColors.sky[700],
+  // #0B79D0
+  "status-info-subtle": primitiveColors.sky[50],
+  // Text on status backgrounds (on-status-*)
+  "on-status-success": primitiveColors.white,
+  "on-status-error": primitiveColors.white,
+  "on-status-warning": primitiveColors.white,
+  "on-status-info": primitiveColors.white,
+  // Result/outcome indicators (result-*)
+  "result-improve": "#4caf50",
+  // Green - positive outcome
+  "result-improve-light": "rgba(76, 175, 80, 0.12)",
+  "result-improve-dark": "#248a24",
+  "result-degrade": "#ef5350",
+  // Red - negative outcome
+  "result-degrade-light": "rgba(239, 83, 80, 0.12)",
+  "result-degrade-dark": "#b30000",
+  "result-inconclusive": "#9E9A97",
+  // Gray - no clear result
+  "result-inconclusive-light": "rgba(158, 154, 151, 0.12)",
+  "result-neutral": primitiveColors.neutral[500],
+  // Neutral baseline
+  // Text on result backgrounds (on-result-*)
+  "on-result-improve": primitiveColors.white,
+  "on-result-degrade": primitiveColors.white,
+  "on-result-inconclusive": primitiveColors.white,
+  // Data visualization colors (data-*)
+  // First 10 colors from discrete rainbow optimized for charts
+  "data-1": discreteRainbow[9],
+  // #1965B0 - Blue
+  "data-2": discreteRainbow[14],
+  // #4EB265 - Green
+  "data-3": discreteRainbow[17],
+  // #F7F056 - Yellow
+  "data-4": discreteRainbow[25],
+  // #DC050C - Red
+  "data-5": discreteRainbow[8],
+  // #882E72 - Purple
+  "data-6": discreteRainbow[20],
+  // #F4A736 - Orange
+  "data-7": discreteRainbow[13],
+  // #7BAFDE - Light Blue
+  "data-8": discreteRainbow[15],
+  // #90C987 - Light Green
+  "data-9": discreteRainbow[3],
+  // #CAACCB - Lavender
+  "data-10": discreteRainbow[22],
+  // #EE8026 - Dark Orange
+  // Text colors (text-*)
+  "text-primary": "#121828",
+  "text-secondary": "#65748B",
+  "text-tertiary": primitiveColors.neutral[400],
+  "text-disabled": "rgba(55, 65, 81, 0.48)",
+  "text-inverse": primitiveColors.white,
+  "text-link": primitiveColors.blue[600],
+  "text-link-hover": primitiveColors.blue[700],
+  // Surface colors (surface-*) - for elevated containers
+  "surface-base": primitiveColors.white,
+  "surface-elevated": primitiveColors.neutral[50],
+  // #FAFAFA - slightly off-white for elevated cards
+  "surface-raised": primitiveColors.neutral[100],
+  // #F3F4F6 - light gray for raised cards
+  "surface-overlay": primitiveColors.white,
+  "surface-input": primitiveColors.neutral[50],
+  // Input field background (filled variant)
+  // Background colors (background-*)
+  "background-base": "#EBEBEB",
+  "background-default": primitiveColors.white,
+  "background-subtle": primitiveColors.neutral[50],
+  // Border colors (border-*)
+  "border-default": "#E8E9EB",
+  "border-subtle": primitiveColors.neutral[100],
+  "border-strong": primitiveColors.neutral[300],
+  "border-focus": primitiveColors.blue[600],
+  "border-input": primitiveColors.neutral[300],
+  // Input field border
+  "border-input-hover": primitiveColors.neutral[400],
+  // Input field border on hover
+  "border-input-focus": primitiveColors.blue[600],
+  // Input field border on focus
+  "border-input-error": primitiveColors.red[600],
+  // Input field border on error
+  // Interactive states (interactive-*)
+  "interactive-hover": "rgba(55, 65, 81, 0.04)",
+  "interactive-focus": "rgba(55, 65, 81, 0.12)",
+  "interactive-active": "rgba(55, 65, 81, 0.16)",
+  "interactive-selected": "rgba(55, 65, 81, 0.08)",
+  "interactive-disabled": "rgba(55, 65, 81, 0.12)",
+  "interactive-disabled-text": "rgba(55, 65, 81, 0.26)",
+  // Divider
+  "divider": "#E8E9EB",
+  // Avatar default
+  "avatar-background": primitiveColors.neutral[500],
+  "avatar-text": primitiveColors.white
+};
+var semanticColorsDark = {
+  // Brand colors stay the same in dark mode
+  "brand-primary": primitiveColors.accent[400],
+  "brand-primary-light": primitiveColors.accent[200],
+  "brand-primary-dark": primitiveColors.accent[700],
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
+  "brand-primary-hover": primitiveColors.accent[300],
+  "brand-primary-active": primitiveColors.accent[200],
+  "brand-secondary": primitiveColors.steel[500],
+  "brand-secondary-light": primitiveColors.steel[300],
+  "brand-secondary-dark": primitiveColors.steel[700],
+  "brand-secondary-subtle": "rgba(64, 109, 135, 0.12)",
+  "brand-secondary-hover": primitiveColors.steel[400],
+  "brand-secondary-active": primitiveColors.steel[300],
+  // Text on brand backgrounds
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors
+  "status-success": primitiveColors.teal[500],
+  "status-success-light": primitiveColors.teal[400],
+  "status-success-dark": primitiveColors.teal[700],
+  "status-success-subtle": "rgba(20, 184, 166, 0.12)",
+  "status-error": primitiveColors.red[600],
+  "status-error-light": primitiveColors.red[400],
+  "status-error-dark": primitiveColors.red[700],
+  "status-error-subtle": "rgba(209, 67, 67, 0.12)",
+  "status-warning": primitiveColors.amber[500],
+  "status-warning-light": primitiveColors.amber[400],
+  "status-warning-dark": primitiveColors.amber[600],
+  "status-warning-subtle": "rgba(255, 176, 32, 0.12)",
+  "status-info": primitiveColors.sky[500],
+  "status-info-light": primitiveColors.sky[400],
+  "status-info-dark": primitiveColors.sky[700],
+  "status-info-subtle": "rgba(33, 150, 243, 0.12)",
+  // Text on status backgrounds
+  "on-status-success": primitiveColors.white,
+  "on-status-error": primitiveColors.white,
+  "on-status-warning": primitiveColors.white,
+  "on-status-info": primitiveColors.white,
+  // Result/outcome indicators (result-*)
+  "result-improve": "#4caf50",
+  "result-improve-light": "rgba(76, 175, 80, 0.16)",
+  "result-improve-dark": "#248a24",
+  "result-degrade": "#ef5350",
+  "result-degrade-light": "rgba(239, 83, 80, 0.16)",
+  "result-degrade-dark": "#b30000",
+  "result-inconclusive": "#9E9A97",
+  "result-inconclusive-light": "rgba(158, 154, 151, 0.16)",
+  "result-neutral": primitiveColors.neutral[400],
+  // Text on result backgrounds
+  "on-result-improve": primitiveColors.white,
+  "on-result-degrade": primitiveColors.white,
+  "on-result-inconclusive": primitiveColors.white,
+  // Data visualization colors (same in dark mode for consistency)
+  "data-1": discreteRainbow[9],
+  "data-2": discreteRainbow[14],
+  "data-3": discreteRainbow[17],
+  "data-4": discreteRainbow[25],
+  "data-5": discreteRainbow[8],
+  "data-6": discreteRainbow[20],
+  "data-7": discreteRainbow[13],
+  "data-8": discreteRainbow[15],
+  "data-9": discreteRainbow[3],
+  "data-10": discreteRainbow[22],
+  // Text colors - inverted for dark mode
+  "text-primary": primitiveColors.neutral[100],
+  "text-secondary": primitiveColors.neutral[400],
+  "text-tertiary": primitiveColors.neutral[500],
+  "text-disabled": "rgba(255, 255, 255, 0.38)",
+  "text-inverse": primitiveColors.neutral[900],
+  "text-link": "#828DF8",
+  "text-link-hover": primitiveColors.blue[400],
+  // Surface colors - dark backgrounds
+  "surface-base": primitiveColors.charcoal[700],
+  // #161616 - main surface
+  "surface-elevated": primitiveColors.charcoal[600],
+  // #191919 - elevated surface
+  "surface-raised": primitiveColors.charcoal[500],
+  // #1C1C1C - raised surface
+  "surface-overlay": primitiveColors.charcoal[600],
+  // #191919 - overlay surface
+  "surface-input": primitiveColors.charcoal[600],
+  // #191919 - input surface
+  // Background colors
+  "background-base": primitiveColors.charcoal[900],
+  // #101010 - darkest charcoal
+  "background-default": primitiveColors.charcoal[700],
+  // #161616 - main background
+  "background-subtle": primitiveColors.charcoal[500],
+  // #1C1C1C - subtle background
+  // Border colors
+  "border-default": primitiveColors.charcoal[400],
+  // #1F1F1F - default border
+  "border-subtle": primitiveColors.charcoal[500],
+  // #1C1C1C - subtle border
+  "border-strong": primitiveColors.charcoal[300],
+  // #2C2C2C - strong border
+  "border-focus": "#828DF8",
+  "border-input": primitiveColors.neutral[600],
+  "border-input-hover": primitiveColors.neutral[500],
+  "border-input-focus": "#828DF8",
+  "border-input-error": primitiveColors.red[500],
+  // Interactive states
+  "interactive-hover": "rgba(255, 255, 255, 0.04)",
+  "interactive-focus": "rgba(255, 255, 255, 0.12)",
+  "interactive-active": "rgba(255, 255, 255, 0.16)",
+  "interactive-selected": "rgba(255, 255, 255, 0.08)",
+  "interactive-disabled": "rgba(255, 255, 255, 0.12)",
+  "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
+  // Divider
+  "divider": primitiveColors.charcoal[400],
+  // #1F1F1F - divider color
+  // Avatar default
+  "avatar-background": primitiveColors.neutral[600],
+  "avatar-text": primitiveColors.white
+};
+function getSemanticColors(mode) {
+  return mode === "dark" ? semanticColorsDark : semanticColorsLight;
+}
+
+// src/theme/resolve-color.ts
+function resolveColor(token, mode = "dark") {
+  return Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
+}
+
+// src/theme/workout-tokens.ts
+var WORKOUT_TOKENS = {
+  // BodyMap volume heatmap scale (drive dynamic SVG fills, so inline values).
+  // Maps weekly-volume status against MEV/MAV/MRV landmarks to a fill color.
+  heatmap: {
+    none: "#E0E0E0",
+    // gray — no training data
+    under: "#4A90D9",
+    // cool blue — below MEV
+    maintenance: "#F5C842",
+    // warm yellow — MEV to MAV
+    productive: "#4CAF50",
+    // green — MAV to MRV
+    approaching: "#FFA502",
+    // orange — near MRV
+    over: "#FF6B35"
+    // red-orange — over MRV
+  }};
 
 // src/components/custom/Workout/muscleTaxonomy.ts
 var MuscleGroup = /* @__PURE__ */ ((MuscleGroup5) => {
@@ -188,14 +588,29 @@ var SLUG_TO_PRIMARY_MUSCLE = {
   abs: "abs" /* ABS */,
   obliques: "obliques" /* OBLIQUES */
 };
+function wrapJsx(fn) {
+  return function(type, props, ...rest) {
+    if (props && typeof props.className === "string" && props.className) {
+      const cn2 = props.className;
+      const cssStyle = { $$css: true, [cn2]: cn2 };
+      const existing = props.style;
+      props = {
+        ...props,
+        style: existing ? [cssStyle, existing] : cssStyle
+      };
+      delete props.className;
+    }
+    return fn(type, props, ...rest);
+  };
+}
+var jsx = wrapJsx(jsx$1);
+var jsxs = wrapJsx(jsxs$1);
 
 // src/components/custom/Workout/BodyMap.tsx
 var Body = BodyHighlighter.default ?? BodyHighlighter;
 var OUTLINE_FILL = "rgba(255,255,255,0.08)";
 var OUTLINE_BORDER = "rgba(255,255,255,0.12)";
 var BODY_SCALE = 0.8;
-var TEXT_PRIMARY = "var(--color-text-primary)";
-var TEXT_SECONDARY = "var(--color-text-secondary)";
 function buildSlugParts(data) {
   const bySlug = /* @__PURE__ */ new Map();
   for (const d of data) {
@@ -319,10 +734,10 @@ function BodyMap({
     legend.length === 0 ? /* @__PURE__ */ jsx(
       Text,
       {
+        className: "text-text-secondary",
         style: {
           marginTop: 8,
           fontSize: 12,
-          color: TEXT_SECONDARY,
           textAlign: "center",
           fontFamily: "Inter, sans-serif"
         },
@@ -371,7 +786,7 @@ function ViewToggle({ view, onViewChange }) {
               borderRadius: 9999,
               backgroundColor: active ? "rgba(255,121,0,0.16)" : "transparent",
               borderWidth: 1,
-              borderColor: active ? "#FF7900" : "var(--color-border-strong)"
+              borderColor: active ? "#FF7900" : resolveColor("border-strong")
             },
             testID: `body-map-toggle-${side}`,
             children: /* @__PURE__ */ jsx(
@@ -381,7 +796,7 @@ function ViewToggle({ view, onViewChange }) {
                   fontSize: 12,
                   fontFamily: "Inter, sans-serif",
                   fontWeight: active ? "700" : "500",
-                  color: active ? "#FF7900" : TEXT_SECONDARY,
+                  color: active ? "#FF7900" : resolveColor("text-secondary"),
                   textTransform: "capitalize"
                 },
                 children: side
@@ -404,6 +819,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }) {
       accessibilityRole: "button",
       accessibilityLabel: label,
       "aria-pressed": highlighted,
+      className: "bg-surface-raised",
       style: {
         flexDirection: "row",
         alignItems: "center",
@@ -412,8 +828,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }) {
         paddingVertical: 3,
         borderRadius: 9999,
         borderWidth: 1,
-        borderColor: highlighted ? "#FF7900" : "var(--color-border-default)",
-        backgroundColor: "var(--color-surface-raised)"
+        borderColor: highlighted ? "#FF7900" : resolveColor("border-default")
       },
       testID: `body-map-muscle-${entry.key}`,
       children: [
@@ -428,11 +843,11 @@ function MuscleButton({ entry, highlighted, onMusclePress }) {
         /* @__PURE__ */ jsx(
           Text,
           {
+            className: "text-text-primary",
             style: {
               fontSize: 11,
               fontFamily: "Inter, sans-serif",
-              fontWeight: "500",
-              color: TEXT_PRIMARY
+              fontWeight: "500"
             },
             accessibilityElementsHidden: true,
             children: entry.name
@@ -442,14 +857,279 @@ function MuscleButton({ entry, highlighted, onMusclePress }) {
     }
   );
 }
-var SURFACE_ELEVATED = "var(--color-surface-elevated)";
-var SURFACE_RAISED = "var(--color-surface-raised)";
-var BORDER_STRONG = "var(--color-border-strong)";
-var BORDER_DEFAULT = "var(--color-border-default)";
+var sizeStyles = {
+  xs: "w-1 h-1",
+  sm: "w-1.5 h-1.5",
+  md: "w-2 h-2",
+  lg: "w-2.5 h-2.5"
+};
+var colorStyles = {
+  default: "bg-text-tertiary",
+  primary: "bg-brand-primary",
+  success: "bg-status-success",
+  error: "bg-status-error",
+  warning: "bg-status-warning",
+  info: "bg-status-info"
+};
+function Indicator({
+  size = "sm",
+  color = "default",
+  customColor,
+  glow = false,
+  ring = false,
+  className,
+  style,
+  ...props
+}) {
+  const dynamicStyle = {
+    ...typeof style === "object" ? style : {},
+    ...customColor ? { backgroundColor: customColor } : {},
+    ...glow && !customColor ? {} : {},
+    ...glow && customColor ? { boxShadow: `0 0 6px ${customColor}` } : {}
+  };
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn(
+        "rounded-full shrink-0",
+        sizeStyles[size],
+        !customColor && colorStyles[color],
+        ring && "border-2 border-background-base",
+        glow && !customColor && color === "success" && "shadow-[0_0_6px_rgba(20,184,166,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)]",
+        className
+      ),
+      style: Object.keys(dynamicStyle).length > 0 ? dynamicStyle : style,
+      ...props
+    }
+  );
+}
+
+// src/components/ui/badge/Badge.tsx
+var variantColorStyles = {
+  solid: {
+    default: "bg-border-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"
+  },
+  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"
+  },
+  outline: {
+    default: "border border-border-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"
+  }
+};
+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"
+};
+function Badge({
+  variant = "subtle",
+  color = "default",
+  size = "md",
+  dot,
+  dotColor,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      className: cn(
+        "inline-flex items-center justify-center rounded-full font-medium",
+        variantColorStyles[variant][color],
+        sizeStyles2[size],
+        className
+      ),
+      ...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
+      ]
+    }
+  );
+}
 var BRAND_PRIMARY = "#FF7900";
-var TEXT_PRIMARY2 = "var(--color-text-primary)";
-var TEXT_SECONDARY2 = "var(--color-text-secondary)";
-var TEXT_TERTIARY = "var(--color-text-tertiary)";
+function normalizeData(data, height) {
+  if (data.length === 0) return [];
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  return data.map((v) => height - (v - min) / range * height);
+}
+function normalizeValue(value, data, height) {
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  return height - (value - min) / range * height;
+}
+function Sparkline({
+  data,
+  width = 80,
+  height = 30,
+  color,
+  showDots = false,
+  referenceLines,
+  highlightLast = false,
+  className,
+  ...props
+}) {
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        style: { width, height },
+        className,
+        testID: "sparkline-empty",
+        accessibilityLabel: "Sparkline chart, no data",
+        ...props
+      }
+    );
+  }
+  const resolvedColor = color ?? BRAND_PRIMARY;
+  const normalized = normalizeData(data, height);
+  const stepX = data.length > 1 ? width / (data.length - 1) : 0;
+  const dotSize = 3;
+  const highlightSize = 6;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: { width, height, position: "relative" },
+      className: cn(className),
+      accessibilityRole: "image",
+      accessibilityLabel: `Sparkline chart with ${data.length} data points`,
+      testID: "sparkline",
+      ...props,
+      children: [
+        referenceLines?.map((line, i) => {
+          const y = normalizeValue(line.value, data, height);
+          return /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                {
+                  position: "absolute",
+                  top: y,
+                  left: 0,
+                  right: 0,
+                  opacity: 0.6
+                },
+                line.dashed ? {
+                  height: 0,
+                  borderStyle: "dashed",
+                  borderTopWidth: 1,
+                  borderTopColor: line.color
+                } : {
+                  height: 1,
+                  backgroundColor: line.color
+                }
+              ],
+              accessibilityElementsHidden: true,
+              testID: `sparkline-reference-${i}`,
+              children: line.label && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: {
+                    position: "absolute",
+                    right: 0,
+                    top: -10,
+                    fontSize: 7,
+                    color: line.color,
+                    opacity: 1
+                  },
+                  testID: `sparkline-reference-label-${i}`,
+                  children: line.label
+                }
+              )
+            },
+            `ref-${i}`
+          );
+        }),
+        normalized.map((y, i) => {
+          if (i === 0) return null;
+          const prevY = normalized[i - 1];
+          const x1 = (i - 1) * stepX;
+          const x2 = i * stepX;
+          const dx = x2 - x1;
+          const dy = y - prevY;
+          const length = Math.sqrt(dx * dx + dy * dy);
+          const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+          return /* @__PURE__ */ jsx(
+            View,
+            {
+              style: {
+                position: "absolute",
+                left: x1,
+                top: prevY,
+                width: length,
+                height: 1.5,
+                backgroundColor: resolvedColor,
+                transformOrigin: "0 0",
+                transform: [{ rotate: `${angle}deg` }]
+              },
+              accessibilityElementsHidden: true,
+              testID: `sparkline-segment-${i}`
+            },
+            `line-${i}`
+          );
+        }),
+        (showDots || highlightLast) && normalized.map((y, i) => {
+          const isLast = i === data.length - 1;
+          const shouldShow = showDots || highlightLast && isLast;
+          if (!shouldShow) return null;
+          const size = highlightLast && isLast ? highlightSize : dotSize;
+          return /* @__PURE__ */ jsx(
+            View,
+            {
+              style: {
+                position: "absolute",
+                left: i * stepX - size / 2,
+                top: y - size / 2,
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+                backgroundColor: resolvedColor
+              },
+              accessibilityElementsHidden: true,
+              testID: `sparkline-dot-${i}`
+            },
+            `dot-${i}`
+          );
+        })
+      ]
+    }
+  );
+}
+
+// src/components/custom/Workout/BodyMapDetailPanel.tsx
+var BRAND_PRIMARY2 = "#FF7900";
 var VOLUME_GRADIENT = "linear-gradient(90deg, #2196F3 0%, #14B8A6 50%, #D14343 100%)";
 var SLIDE_OFFSET = 400;
 var BACKDROP_OPACITY = 0.4;
@@ -549,8 +1229,8 @@ function BodyMapDetailPanel({
             accessibilityRole: "dialog",
             accessibilityLabel: dialogLabel,
             "aria-label": dialogLabel,
+            className: "bg-surface-elevated",
             style: {
-              backgroundColor: SURFACE_ELEVATED,
               borderTopLeftRadius: 16,
               borderTopRightRadius: 16,
               maxHeight: "88%",
@@ -571,7 +1251,8 @@ function BodyMapDetailPanel({
                   children: /* @__PURE__ */ jsx(
                     View,
                     {
-                      style: { width: 40, height: 4, borderRadius: 2, backgroundColor: BORDER_STRONG },
+                      className: "bg-border-strong",
+                      style: { width: 40, height: 4, borderRadius: 2 },
                       accessibilityElementsHidden: true
                     }
                   )
@@ -596,11 +1277,11 @@ function BodyMapDetailPanel({
                               Text,
                               {
                                 accessibilityRole: "header",
+                                className: "text-text-primary",
                                 style: {
                                   fontSize: 16,
                                   fontFamily: '"Space Grotesk", sans-serif',
-                                  fontWeight: "700",
-                                  color: TEXT_PRIMARY2
+                                  fontWeight: "700"
                                 },
                                 testID: "body-map-detail-panel-title",
                                 children: displayName
@@ -626,7 +1307,7 @@ function BodyMapDetailPanel({
                               hitSlop: 8,
                               style: { padding: 4, margin: -4 },
                               testID: "body-map-detail-panel-close",
-                              children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 22, lineHeight: 22, color: TEXT_SECONDARY2 }, children: "\xD7" })
+                              children: /* @__PURE__ */ jsx(Text, { className: "text-text-secondary", style: { fontSize: 22, lineHeight: 22 }, children: "\xD7" })
                             }
                           )
                         ]
@@ -635,7 +1316,8 @@ function BodyMapDetailPanel({
                     lastTrained != null && /* @__PURE__ */ jsx(
                       Text,
                       {
-                        style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY2 },
+                        className: "text-text-secondary",
+                        style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
                         testID: "body-map-detail-panel-last-trained",
                         children: `Last trained ${lastTrained}`
                       }
@@ -648,8 +1330,8 @@ function BodyMapDetailPanel({
                           style: { marginBottom: 6 },
                           accessibilityElementsHidden: true,
                           children: [
-                            /* @__PURE__ */ jsx(Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_TERTIARY }, children: `MEV ${landmarks.mev}` }),
-                            /* @__PURE__ */ jsx(Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_TERTIARY }, children: `MRV ${landmarks.mrv}` })
+                            /* @__PURE__ */ jsx(Text, { className: "text-text-tertiary", style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600" }, children: `MEV ${landmarks.mev}` }),
+                            /* @__PURE__ */ jsx(Text, { className: "text-text-tertiary", style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600" }, children: `MRV ${landmarks.mrv}` })
                           ]
                         }
                       ),
@@ -675,6 +1357,7 @@ function BodyMapDetailPanel({
                             /* @__PURE__ */ jsx(
                               View,
                               {
+                                className: "border-text-primary bg-surface-elevated",
                                 style: {
                                   position: "absolute",
                                   left: `${markerLeft}%`,
@@ -683,8 +1366,6 @@ function BodyMapDetailPanel({
                                   height: 14,
                                   borderRadius: 7,
                                   borderWidth: 2,
-                                  borderColor: TEXT_PRIMARY2,
-                                  backgroundColor: SURFACE_ELEVATED,
                                   boxShadow: "0 0 4px rgba(0,0,0,0.5)"
                                 },
                                 accessibilityElementsHidden: true,
@@ -699,11 +1380,11 @@ function BodyMapDetailPanel({
                       /* @__PURE__ */ jsx(
                         Text,
                         {
+                          className: "text-text-primary",
                           style: {
                             fontSize: 24,
                             fontFamily: '"Space Grotesk", sans-serif',
-                            fontWeight: "700",
-                            color: TEXT_PRIMARY2
+                            fontWeight: "700"
                           },
                           testID: "body-map-detail-panel-set-count",
                           children: weeklySets
@@ -712,7 +1393,8 @@ function BodyMapDetailPanel({
                       /* @__PURE__ */ jsx(
                         Text,
                         {
-                          style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY2 },
+                          className: "text-text-secondary",
+                          style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
                           testID: "body-map-detail-panel-mrv-suffix",
                           children: `/ ${landmarks.mrv} MRV`
                         }
@@ -722,11 +1404,11 @@ function BodyMapDetailPanel({
                       /* @__PURE__ */ jsx(
                         Text,
                         {
+                          className: "text-text-tertiary",
                           style: {
                             fontSize: 10,
                             fontFamily: "Inter, sans-serif",
                             fontWeight: "600",
-                            color: TEXT_TERTIARY,
                             marginBottom: 6
                           },
                           accessibilityElementsHidden: true,
@@ -739,11 +1421,11 @@ function BodyMapDetailPanel({
                       /* @__PURE__ */ jsx(
                         Text,
                         {
+                          className: "text-text-tertiary",
                           style: {
                             fontSize: 10,
                             fontFamily: "Inter, sans-serif",
                             fontWeight: "600",
-                            color: TEXT_TERTIARY,
                             marginBottom: 8
                           },
                           children: "CONTRIBUTING EXERCISES"
@@ -752,23 +1434,22 @@ function BodyMapDetailPanel({
                       contributingExercises.map((exercise, index) => /* @__PURE__ */ jsxs(
                         View,
                         {
-                          className: "flex-row items-center justify-between",
+                          className: "flex-row items-center justify-between bg-surface-raised border-border",
                           style: {
                             gap: 10,
                             paddingVertical: 8,
                             paddingHorizontal: 12,
                             marginBottom: 6,
                             borderRadius: 8,
-                            backgroundColor: SURFACE_RAISED,
-                            borderWidth: 1,
-                            borderColor: BORDER_DEFAULT
+                            borderWidth: 1
                           },
                           testID: `body-map-detail-panel-contributing-${index}`,
                           children: [
                             /* @__PURE__ */ jsx(
                               Text,
                               {
-                                style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_PRIMARY2 },
+                                className: "text-text-primary",
+                                style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600" },
                                 testID: `body-map-detail-panel-contributing-${index}-name`,
                                 children: exercise.name
                               }
@@ -776,7 +1457,8 @@ function BodyMapDetailPanel({
                             /* @__PURE__ */ jsx(
                               Text,
                               {
-                                style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY2 },
+                                className: "text-text-secondary",
+                                style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
                                 testID: `body-map-detail-panel-contributing-${index}-detail`,
                                 children: `${exercise.sets} sets \xB7 ${Math.round(exercise.contributionWeight * 100)}%`
                               }
@@ -790,11 +1472,11 @@ function BodyMapDetailPanel({
                       /* @__PURE__ */ jsx(
                         Text,
                         {
+                          className: "text-text-tertiary",
                           style: {
                             fontSize: 10,
                             fontFamily: "Inter, sans-serif",
                             fontWeight: "600",
-                            color: TEXT_TERTIARY,
                             marginBottom: 8
                           },
                           children: "UPCOMING"
@@ -810,7 +1492,8 @@ function BodyMapDetailPanel({
                             /* @__PURE__ */ jsx(
                               Text,
                               {
-                                style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_PRIMARY2 },
+                                className: "text-text-primary",
+                                style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600" },
                                 testID: `body-map-detail-panel-upcoming-${index}-name`,
                                 children: exercise.name
                               }
@@ -818,7 +1501,8 @@ function BodyMapDetailPanel({
                             /* @__PURE__ */ jsx(
                               Text,
                               {
-                                style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_TERTIARY },
+                                className: "text-text-tertiary",
+                                style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
                                 testID: `body-map-detail-panel-upcoming-${index}-detail`,
                                 children: `${exercise.workoutName} \xB7 ${exercise.sets} sets`
                               }
@@ -844,7 +1528,7 @@ function BodyMapDetailPanel({
                           borderColor: "rgba(255,121,0,0.3)"
                         },
                         testID: "body-map-detail-panel-view-exercises",
-                        children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "700", color: BRAND_PRIMARY }, children: "View exercises" })
+                        children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "700", color: BRAND_PRIMARY2 }, children: "View exercises" })
                       }
                     )
                   ]
@@ -857,12 +1541,1222 @@ function BodyMapDetailPanel({
     }
   );
 }
-var SURFACE_ELEVATED2 = "var(--color-surface-elevated)";
-var BORDER_DEFAULT2 = "var(--color-border-default)";
-var TEXT_PRIMARY3 = "var(--color-text-primary)";
-var TEXT_SECONDARY3 = "var(--color-text-secondary)";
-var TEXT_TERTIARY2 = "var(--color-text-tertiary)";
-var PAGE_BG = "var(--color-background-base)";
+function hexToRgb(hex) {
+  const cleaned = hex.replace("#", "");
+  let r, g, b;
+  if (cleaned.length === 3) {
+    r = parseInt(cleaned[0] + cleaned[0], 16);
+    g = parseInt(cleaned[1] + cleaned[1], 16);
+    b = parseInt(cleaned[2] + cleaned[2], 16);
+  } else if (cleaned.length === 6) {
+    r = parseInt(cleaned.slice(0, 2), 16);
+    g = parseInt(cleaned.slice(2, 4), 16);
+    b = parseInt(cleaned.slice(4, 6), 16);
+  } else {
+    return null;
+  }
+  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 c = v * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = v - c;
+  let rPrime, gPrime, bPrime;
+  if (h >= 0 && h < 60) {
+    rPrime = c;
+    gPrime = x;
+    bPrime = 0;
+  } else if (h >= 60 && h < 120) {
+    rPrime = x;
+    gPrime = c;
+    bPrime = 0;
+  } else if (h >= 120 && h < 180) {
+    rPrime = 0;
+    gPrime = c;
+    bPrime = x;
+  } else if (h >= 180 && h < 240) {
+    rPrime = 0;
+    gPrime = x;
+    bPrime = c;
+  } else if (h >= 240 && h < 300) {
+    rPrime = x;
+    gPrime = 0;
+    bPrime = c;
+  } else {
+    rPrime = c;
+    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);
+}
+var shadowColors = {
+  // For charcoal surfaces (~#2C2C2C to #3C3C3C)
+  charcoal: {
+    dark: "rgba(0, 0, 0, 0.5)",
+    light: "rgba(255, 255, 255, 0.12)",
+    // brighter for crisp rim light
+    darker: "rgba(0, 0, 0, 0.6)"
+  },
+  // For neutral dark surfaces (~#1F2937)
+  neutralDark: {
+    dark: "rgba(0, 0, 0, 0.4)",
+    light: "rgba(255, 255, 255, 0.08)",
+    darker: "rgba(0, 0, 0, 0.5)"
+  },
+  // For light surfaces (white/light gray backgrounds)
+  neutralLight: {
+    dark: "rgba(0, 0, 0, 0.15)",
+    // Visible dark shadow for depth on light backgrounds
+    light: "rgba(255, 255, 255, 1)",
+    // Bright highlight for raised effect (visible on light gray)
+    darker: "rgba(0, 0, 0, 0.2)"
+    // Deeper shadow for pressed states
+  }
+};
+var intensityConfig = {
+  subtle: { offset: 1, blur: 2 },
+  // very light, barely visible
+  medium: { offset: 2, blur: 4 },
+  // noticeable but restrained
+  strong: { offset: 2, blur: 5 }
+  // slightly deeper blur, same offset as medium
+};
+function createRaisedShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const rimBlur = 1;
+  return Platform.select({
+    web: {
+      boxShadow: `${offset}px ${offset}px ${blur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      // React Native shadow approximation (limited compared to web)
+      shadowColor: "#000",
+      shadowOffset: { width: offset, height: offset },
+      shadowOpacity: 0.3,
+      shadowRadius: blur / 2,
+      elevation: offset
+    }
+  });
+}
+function createPressedShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const rimOffset = 1;
+  const rimBlur = 1;
+  return Platform.select({
+    web: {
+      boxShadow: `inset ${offset}px ${offset}px ${blur}px ${colors.darker}, inset -${rimOffset}px -${rimOffset}px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      // React Native doesn't support inset shadows, approximate with darker bg
+      shadowOpacity: 0,
+      elevation: 0
+    }
+  });
+}
+function createFlatShadow() {
+  return Platform.select({
+    web: {
+      boxShadow: "none"
+    },
+    default: {
+      shadowOpacity: 0,
+      elevation: 0
+    }
+  });
+}
+function createRaisedHoverShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const hoverOffset = Math.max(1, Math.round(offset / 2));
+  const hoverBlur = Math.max(1, Math.round(blur / 2));
+  const rimBlur = 1;
+  return Platform.select({
+    web: {
+      // Keep same offsets as normal state for rim to prevent "shrinking" effect
+      boxShadow: `${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      shadowColor: "#000",
+      shadowOffset: { width: hoverOffset, height: hoverOffset },
+      shadowOpacity: 0.2,
+      shadowRadius: hoverBlur / 2,
+      elevation: hoverOffset
+    }
+  });
+}
+function createPressedHoverShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const hoverOffset = Math.max(1, Math.round(offset / 2));
+  const hoverBlur = Math.max(1, Math.round(blur / 2));
+  const rimBlur = 1;
+  return Platform.select({
+    web: {
+      // Keep rim offset at 1px (same as pressed normal) to prevent "shrinking" effect
+      boxShadow: `inset ${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.darker}, inset -1px -1px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      shadowOpacity: 0,
+      elevation: 0
+    }
+  });
+}
+({
+  // Charcoal surface shadows (for dark toolbars, cards)
+  charcoal: {
+    raised: {
+      subtle: createRaisedShadow("charcoal", "subtle"),
+      medium: createRaisedShadow("charcoal", "medium"),
+      strong: createRaisedShadow("charcoal", "strong")
+    },
+    raisedHover: {
+      subtle: createRaisedHoverShadow("charcoal", "subtle"),
+      medium: createRaisedHoverShadow("charcoal", "medium"),
+      strong: createRaisedHoverShadow("charcoal", "strong")
+    },
+    pressed: {
+      subtle: createPressedShadow("charcoal", "subtle"),
+      medium: createPressedShadow("charcoal", "medium"),
+      strong: createPressedShadow("charcoal", "strong")
+    },
+    pressedHover: {
+      subtle: createPressedHoverShadow("charcoal", "subtle"),
+      medium: createPressedHoverShadow("charcoal", "medium"),
+      strong: createPressedHoverShadow("charcoal", "strong")
+    },
+    flat: createFlatShadow()
+  },
+  // Neutral dark surface shadows
+  neutralDark: {
+    raised: {
+      subtle: createRaisedShadow("neutralDark", "subtle"),
+      medium: createRaisedShadow("neutralDark", "medium"),
+      strong: createRaisedShadow("neutralDark", "strong")
+    },
+    raisedHover: {
+      subtle: createRaisedHoverShadow("neutralDark", "subtle"),
+      medium: createRaisedHoverShadow("neutralDark", "medium"),
+      strong: createRaisedHoverShadow("neutralDark", "strong")
+    },
+    pressed: {
+      subtle: createPressedShadow("neutralDark", "subtle"),
+      medium: createPressedShadow("neutralDark", "medium"),
+      strong: createPressedShadow("neutralDark", "strong")
+    },
+    pressedHover: {
+      subtle: createPressedHoverShadow("neutralDark", "subtle"),
+      medium: createPressedHoverShadow("neutralDark", "medium"),
+      strong: createPressedHoverShadow("neutralDark", "strong")
+    },
+    flat: createFlatShadow()
+  },
+  // Neutral light surface shadows
+  neutralLight: {
+    raised: {
+      subtle: createRaisedShadow("neutralLight", "subtle"),
+      medium: createRaisedShadow("neutralLight", "medium"),
+      strong: createRaisedShadow("neutralLight", "strong")
+    },
+    raisedHover: {
+      subtle: createRaisedHoverShadow("neutralLight", "subtle"),
+      medium: createRaisedHoverShadow("neutralLight", "medium"),
+      strong: createRaisedHoverShadow("neutralLight", "strong")
+    },
+    pressed: {
+      subtle: createPressedShadow("neutralLight", "subtle"),
+      medium: createPressedShadow("neutralLight", "medium"),
+      strong: createPressedShadow("neutralLight", "strong")
+    },
+    pressedHover: {
+      subtle: createPressedHoverShadow("neutralLight", "subtle"),
+      medium: createPressedHoverShadow("neutralLight", "medium"),
+      strong: createPressedHoverShadow("neutralLight", "strong")
+    },
+    flat: createFlatShadow()
+  }
+});
+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",
+    colorAdjustment: 0.01,
+    shadowIntensity: "subtle",
+    shadowStyle: "raised",
+    description: "Subtle elevation (outline cards, subtle containers)"
+  },
+  // Level 2: Standard elevation (default cards, buttons)
+  [2]: {
+    name: "standard",
+    colorAdjustment: 0.02,
+    shadowIntensity: "medium",
+    shadowStyle: "raised",
+    description: "Standard elevation (default cards, raised buttons)"
+  },
+  // Level 3: Prominent elevation (important cards, modals)
+  [3]: {
+    name: "prominent",
+    colorAdjustment: 0.04,
+    shadowIntensity: "strong",
+    shadowStyle: "raised",
+    description: "Prominent elevation (important cards, modals, dropdowns)"
+  },
+  // Level 4: High elevation (overlays, popovers)
+  [4]: {
+    name: "high",
+    colorAdjustment: 0.06,
+    shadowIntensity: "strong",
+    shadowStyle: "raised",
+    description: "High elevation (overlays, popovers, tooltips)"
+  },
+  // Level 5: Floating (toasts, floating action buttons)
+  [5]: {
+    name: "floating",
+    colorAdjustment: 0.08,
+    shadowIntensity: "strong",
+    shadowStyle: "raised",
+    description: "Floating elevation (toasts, floating action buttons, highest z-index)"
+  }
+};
+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)})`;
+  }
+}
+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 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);
+}
+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 intensityConfig2 = {
+    subtle: { offset: 1, blur: 2 },
+    medium: { offset: 2, blur: 4 },
+    strong: { offset: 2, blur: 5 }
+  };
+  const { offset, blur } = intensityConfig2[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
+        }
+      });
+    }
+    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
+      }
+    });
+  }
+}
+function getElevationShadow(baseColor, level, theme, isHovered = false) {
+  const cacheKey = getShadowCacheKey(baseColor, level, theme, isHovered);
+  if (elevationShadowCache.has(cacheKey)) {
+    return elevationShadowCache.get(cacheKey);
+  }
+  const result = 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 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
+  );
+}
+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 = {
+  elevated: "",
+  // Will be set dynamically via elevation system
+  outline: "border-2 border-border-strong",
+  // Thicker border with stronger contrast
+  filled: "",
+  // Will be set dynamically via elevation system
+  accent: "border border-border",
+  subtle: "border border-border-subtle"
+};
+function Card({
+  variant = "elevated",
+  elevation = 2,
+  isInteractive = false,
+  isLoading = false,
+  onPress,
+  borderColor,
+  bgColor,
+  accentColor,
+  accentWidth,
+  className,
+  children,
+  style,
+  skeletonHasHeader = true,
+  skeletonHasFooter = false,
+  skeletonContentLines = 3,
+  ...props
+}) {
+  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 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
+    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,
+      borderRadius: 8,
+      overflow: "hidden",
+      ...shadowStyle,
+      ...accentStyle
+    };
+    if (borderColor) {
+      elevationStyle.borderColor = borderColor;
+    }
+    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 });
+}
+function CardHeader({ children, className }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("px-6 py-6", className), children });
+}
+function CardContent({ children, className }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("px-6 py-4", className), children });
+}
+function CardFooter({ children, className }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("px-6 py-4 flex-row items-center gap-2", className), children });
+}
+var solidVariantColors = {
+  success: "#14B8A6",
+  warning: "#FFB020",
+  error: "#D14343",
+  neutral: "#6B7280"
+};
+var ringVariantStyles = {
+  "on-track": {
+    backgroundColor: "rgba(20,184,166,0.15)",
+    borderWidth: 1,
+    borderColor: "rgba(20,184,166,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 glowStyles = {
+  success: { boxShadow: "0 0 4px rgba(20,184,166,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(20,184,166,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 iconChars = {
+  check: "\u2713",
+  exclamation: "!",
+  dash: "\u2014"
+};
+var iconColors = {
+  success: "#0A5C52",
+  warning: "#6B4000",
+  error: "#5C1A1A",
+  neutral: "#D1D5DB",
+  "on-track": "#14B8A6",
+  deviation: "#FFB020",
+  future: "#6B7280"
+};
+var sizeDimensions = {
+  sm: { size: 8, showIcon: false },
+  md: { size: 18, showIcon: true }
+};
+function isSolidVariant(variant) {
+  return variant in solidVariantColors;
+}
+function StatusDot({
+  variant,
+  icon,
+  size = "sm",
+  glow,
+  label,
+  className,
+  ...props
+}) {
+  const config = sizeDimensions[size];
+  const solid = isSolidVariant(variant);
+  const ring = ringVariantStyles[variant];
+  const glowStyle = glow ? glowStyles[variant] : null;
+  const dot = /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        {
+          width: config.size,
+          height: config.size,
+          borderRadius: 9999,
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0
+        },
+        solid ? { backgroundColor: solidVariantColors[variant] } : void 0,
+        ring ? ring : void 0,
+        glowStyle ? glowStyle : void 0
+      ],
+      accessibilityRole: "image",
+      accessibilityLabel: `${variant} status`,
+      testID: "status-dot",
+      children: config.showIcon && icon && /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: {
+            fontSize: 11,
+            lineHeight: 11,
+            fontWeight: "900",
+            color: iconColors[variant]
+          },
+          accessibilityElementsHidden: true,
+          children: iconChars[icon]
+        }
+      )
+    }
+  );
+  if (label) {
+    return /* @__PURE__ */ jsxs(
+      View,
+      {
+        className,
+        style: { flexDirection: "row", alignItems: "center", gap: 6 },
+        accessibilityLabel: `${variant} status: ${label}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(View, { accessibilityElementsHidden: true, children: dot }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: { fontSize: 12, lineHeight: 16, color: "#9CA3AF" },
+              accessibilityElementsHidden: true,
+              children: label
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { className, ...props, children: dot });
+}
+
+// src/components/custom/Workout/MesoStatusCard.tsx
+var BRAND_PRIMARY3 = "#FF7900";
+var BRAND_PRIMARY_DARK = "#C45E00";
+var BRAND_PRIMARY_LIGHT = "#FFB066";
+var SUCCESS = "#14B8A6";
+var WARNING = "#FFB020";
+var ERROR = "#D14343";
+var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY3, BRAND_PRIMARY_LIGHT];
+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 },
+  warning: { bg: "rgba(255,176,32,0.15)", border: "rgba(255,176,32,0.3)", text: WARNING },
+  error: { bg: "rgba(209,67,67,0.15)", border: "rgba(209,67,67,0.25)", text: ERROR }
+};
+function clamp012(value) {
+  if (!Number.isFinite(value)) return 0;
+  if (value < 0) return 0;
+  if (value > 1) return 1;
+  return value;
+}
+function getGaugeZoneColor(level) {
+  if (level >= 0.7) return ERROR;
+  if (level >= 0.4) return WARNING;
+  return SUCCESS;
+}
+function renderCoachingText(text, highlights) {
+  if (!highlights || highlights.length === 0) return text;
+  const escaped = highlights.filter(Boolean).map((h) => h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+  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}`)
+  );
+}
+function StatusPill({ badge }) {
+  const colors = STATUS_VARIANTS[badge.variant];
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      className: "flex-row items-center",
+      style: {
+        gap: 5,
+        paddingVertical: 3,
+        paddingHorizontal: 8,
+        borderRadius: 4,
+        borderWidth: 1,
+        backgroundColor: colors.bg,
+        borderColor: colors.border
+      },
+      testID: "meso-status-card-badge",
+      children: [
+        /* @__PURE__ */ jsx(View, { accessibilityElementsHidden: true, children: /* @__PURE__ */ jsx(StatusDot, { variant: badge.variant, size: "sm" }) }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              fontSize: 10,
+              fontFamily: "Inter, sans-serif",
+              fontWeight: "700",
+              letterSpacing: 0.3,
+              color: colors.text
+            },
+            children: badge.label
+          }
+        )
+      ]
+    }
+  );
+}
+function MetricCell({ metric }) {
+  return /* @__PURE__ */ jsxs(View, { style: { width: "48%" }, testID: "meso-status-card-metric", children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        className: "text-text-tertiary",
+        style: {
+          fontSize: 10,
+          fontFamily: "Inter, sans-serif",
+          fontWeight: "600",
+          letterSpacing: 0.5,
+          textTransform: "uppercase"
+        },
+        children: metric.label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        className: "text-text-primary",
+        style: {
+          marginTop: 2,
+          fontSize: 13,
+          fontFamily: "Inter, sans-serif",
+          fontWeight: "600"
+        },
+        children: metric.value
+      }
+    )
+  ] });
+}
+function Gauge({ gauge }) {
+  const level = clamp012(gauge.level);
+  const percentage = Math.round(level * 100);
+  const markerColor = getGaugeZoneColor(level);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: { gap: 6 },
+      accessibilityRole: "progressbar",
+      accessibilityValue: { min: 0, max: 100, now: percentage },
+      accessibilityLabel: `${gauge.label}: ${percentage}%`,
+      "aria-valuenow": percentage,
+      "aria-valuemin": 0,
+      "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,
+          {
+            style: {
+              height: 8,
+              borderRadius: 4,
+              position: "relative",
+              backgroundImage: GAUGE_GRADIENT
+            },
+            accessibilityElementsHidden: true,
+            children: [
+              /* @__PURE__ */ jsx(
+                View,
+                {
+                  style: {
+                    position: "absolute",
+                    left: "50%",
+                    top: 0,
+                    bottom: 0,
+                    width: 1,
+                    marginLeft: -0.5,
+                    backgroundColor: "rgba(255,255,255,0.3)"
+                  },
+                  testID: "meso-status-card-gauge-center"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                View,
+                {
+                  className: "border-text-primary",
+                  style: {
+                    position: "absolute",
+                    left: `${percentage}%`,
+                    top: -3,
+                    marginLeft: -7,
+                    width: 14,
+                    height: 14,
+                    borderRadius: 9999,
+                    borderWidth: 2,
+                    backgroundColor: markerColor,
+                    boxShadow: "0 0 4px rgba(0,0,0,0.5)"
+                  },
+                  testID: "meso-status-card-gauge-marker"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function MesoStatusCard({
+  mesoName,
+  mesoSubtitle,
+  statusBadge,
+  metrics,
+  gauges,
+  coaching,
+  nextTarget,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant: "outline",
+      elevation: 1,
+      borderColor: BRAND_PRIMARY_DARK,
+      className,
+      style: {
+        borderColor: BRAND_PRIMARY_DARK,
+        borderWidth: 1,
+        backgroundImage: CARD_GRADIENT
+      },
+      role: "article",
+      "aria-label": `Mesocycle status for ${mesoName}`,
+      testID: "meso-status-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-status-card-accent",
+            children: ACCENT_STOPS.map((color) => /* @__PURE__ */ jsx(View, { style: { flex: 1, backgroundColor: color } }, color))
+          }
+        ),
+        /* @__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__ */ jsx(
+              Text,
+              {
+                className: "text-text-secondary",
+                style: {
+                  marginTop: 4,
+                  fontSize: 12,
+                  fontFamily: "Inter, sans-serif"
+                },
+                testID: "meso-status-card-subtitle",
+                children: mesoSubtitle
+              }
+            )
+          ] }),
+          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(MetricCell, { 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,
+            {
+              style: {
+                backgroundColor: "rgba(255,176,32,0.06)",
+                borderWidth: 1,
+                borderColor: "rgba(255,176,32,0.15)",
+                borderRadius: 8,
+                paddingVertical: 10,
+                paddingHorizontal: 12
+              },
+              testID: "meso-status-card-coaching",
+              children: /* @__PURE__ */ jsx(
+                Text,
+                {
+                  className: "text-text-secondary",
+                  style: {
+                    fontSize: 12,
+                    lineHeight: 17,
+                    fontFamily: "Inter, sans-serif"
+                  },
+                  children: renderCoachingText(coaching.text, coaching.highlights)
+                }
+              )
+            }
+          ),
+          nextTarget != null && /* @__PURE__ */ jsxs(
+            View,
+            {
+              className: "flex-row items-center",
+              style: {
+                gap: 8,
+                backgroundColor: "rgba(20,184,166,0.06)",
+                borderWidth: 1,
+                borderColor: "rgba(20,184,166,0.2)",
+                borderRadius: 8,
+                paddingVertical: 10,
+                paddingHorizontal: 12
+              },
+              testID: "meso-status-card-next-target",
+              children: [
+                /* @__PURE__ */ jsx(Text, { style: { fontSize: 14, color: SUCCESS }, accessibilityElementsHidden: true, children: nextTarget.icon }),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    style: {
+                      flexShrink: 1,
+                      fontSize: 12,
+                      fontFamily: "Inter, sans-serif",
+                      fontWeight: "600",
+                      color: SUCCESS
+                    },
+                    children: nextTarget.text
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/custom/Workout/TrainingStatusPage.tsx
 var STATUS_ORDER = ["under", "maintenance", "productive", "over"];
 function deriveTrainingSummary(muscles) {
   const statusCounts = {
@@ -898,25 +2792,24 @@ function SummaryCards({ summary }) {
     return /* @__PURE__ */ jsxs(
       View,
       {
+        className: "bg-surface-elevated border-border",
         style: {
           flexGrow: 1,
           flexBasis: "46%",
           padding: 12,
           borderRadius: 10,
-          backgroundColor: SURFACE_ELEVATED2,
-          borderWidth: 1,
-          borderColor: BORDER_DEFAULT2
+          borderWidth: 1
         },
         testID: `training-status-page-summary-${key}`,
         children: [
           /* @__PURE__ */ jsx(
             Text,
             {
+              className: "text-text-primary",
               style: {
                 fontSize: 22,
                 fontFamily: '"Space Grotesk", sans-serif',
-                fontWeight: "700",
-                color: TEXT_PRIMARY3
+                fontWeight: "700"
               },
               children: value
             }
@@ -924,14 +2817,14 @@ function SummaryCards({ summary }) {
           /* @__PURE__ */ jsx(
             Text,
             {
+              className: "text-text-tertiary",
               style: {
                 marginTop: 2,
                 fontSize: 11,
                 fontFamily: "Inter, sans-serif",
                 fontWeight: "600",
                 letterSpacing: 0.4,
-                textTransform: "uppercase",
-                color: TEXT_TERTIARY2
+                textTransform: "uppercase"
               },
               children: label
             }
@@ -971,10 +2864,10 @@ function StatusLegend() {
             /* @__PURE__ */ jsx(
               Text,
               {
+                className: "text-text-secondary",
                 style: {
                   fontSize: 11,
                   fontFamily: "Inter, sans-serif",
-                  color: TEXT_SECONDARY3,
                   textTransform: "capitalize"
                 },
                 children: VOLUME_STATUS_LABELS[status]
@@ -1013,8 +2906,8 @@ function TrainingStatusPage({
   return /* @__PURE__ */ jsxs(
     View,
     {
-      className,
-      style: { position: "relative", width: 390, backgroundColor: PAGE_BG },
+      className: ["bg-background-base", className].filter(Boolean).join(" "),
+      style: { position: "relative", width: 390 },
       accessibilityRole: "main",
       "aria-label": title,
       testID: "training-status-page",
@@ -1025,11 +2918,11 @@ function TrainingStatusPage({
             Text,
             {
               accessibilityRole: "header",
+              className: "text-text-primary",
               style: {
                 fontSize: 20,
                 fontFamily: '"Space Grotesk", sans-serif',
-                fontWeight: "700",
-                color: TEXT_PRIMARY3
+                fontWeight: "700"
               },
               testID: "training-status-page-title",
               children: title
@@ -1040,10 +2933,9 @@ function TrainingStatusPage({
           /* @__PURE__ */ jsxs(
             View,
             {
+              className: "bg-surface-elevated border-border",
               style: {
-                backgroundColor: SURFACE_ELEVATED2,
                 borderWidth: 1,
-                borderColor: BORDER_DEFAULT2,
                 borderRadius: 12,
                 padding: 12,
                 gap: 12