@titan-design/react-ui 0.5.0 → 0.6.0

package/dist/pages.js

@@ -8,22 +8,150 @@ var tailwindMerge = require('tailwind-merge');
 
 // src/components/custom/Workout/ActiveWorkoutPage.tsx
 
+// src/theme/tokens/primitives.ts
+var primitiveColors = {
+  // Blue scale (primary brand)
+  blue: {
+    400: "#60A5FA",
+    600: "#5048E5",
+    // Primary main
+    700: "#3832A0"},
+  // Red scale (error)
+  red: {
+    // Error light
+    500: "#EF4444",
+    600: "#D14343"},
+  // Vivid red scale (alert)
+  redVivid: {
+    400: "#FF6070",
+    // Error vivid light
+    500: "#FF4757",
+    700: "#C42539"},
+  // Neutral/Gray scale
+  neutral: {
+    50: "#FAFAFA",
+    100: "#F3F4F6",
+    300: "#D1D5DB",
+    400: "#9CA3AF",
+    500: "#6B7280",
+    600: "#4B5563",
+    900: "#111827"},
+  // Charcoal scale (dark backgrounds)
+  charcoal: {
+    200: "#3C3C3C",
+    300: "#2C2C2C",
+    400: "#1F1F1F",
+    500: "#1C1C1C",
+    600: "#191919",
+    700: "#161616",
+    900: "#101010"
+  },
+  // Pure colors
+  white: "#FFFFFF"};
+var primitiveRamps = {
+  red: {
+    50: "#FFF4F4",
+    500: "#E05254",
+    600: "#D14343",
+    // pin
+    700: "#A4221C",
+    800: "#7E1002"},
+  orange: {
+    200: "#FFC7A2",
+    300: "#FFA063",
+    400: "#FF7900",
+    // pin
+    500: "#DA5F00",
+    600: "#B94A00"},
+  amber: {
+    50: "#FFF7DD",
+    200: "#FFD352",
+    300: "#F9B415",
+    500: "#C27400"},
+  green: {
+    50: "#E3FFEE",
+    200: "#58F69E",
+    300: "#2ED573",
+    600: "#298732"},
+  cyan: {
+    // pin
+    400: "#01B5D1",
+    500: "#2697B7",
+    600: "#307B9B",
+    700: "#2A617F",
+    800: "#22465F"},
+  blue: {
+    50: "#EFF8FF",
+    300: "#78C2FF",
+    500: "#2196F3",
+    // pin
+    600: "#1072CB"},
+  magenta: {
+    600: "#BA2996"}
+};
+var sequentialEffort = [
+  primitiveRamps.green[300],
+  primitiveRamps.amber[200],
+  primitiveRamps.amber[300],
+  primitiveRamps.orange[400],
+  primitiveRamps.red[600],
+  primitiveRamps.red[700]
+];
+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/workout-tokens.ts
 var WORKOUT_TOKENS = {
   // Canonical 4-band performance scale — the single source for BOTH the
   // VelocityStrip zone bars and the SetRow RPE color (TD-03.43). The direction
   // is intentionally inverted between the two consumers: for velocity, green =
-  // fastest/best; for RPE, green = easiest. Each component maps its own
-  // thresholds onto these four colors. Kept as vivid data-viz values (distinct
-  // from the muted status tokens) and theme-independent, so — like the heatmap
-  // scale below — they are consumed inline as a JS import rather than CSS vars.
-  // A JS import also resolves on native RN, unlike var(--…) strings.
+  // fastest/best; for RPE, green = easiest. This is the [0,1,2,4] subsample of
+  // the canonical `sequentialEffort` primitive. The `orange` key is the band
+  // label. Consumed inline (RN).
   scale: {
-    green: "#2ed573",
-    yellow: "#ffd43b",
-    orange: "#ffa502",
-    red: "#ff4757"
+    green: sequentialEffort[0],
+    yellow: sequentialEffort[1],
+    orange: sequentialEffort[2],
+    // gold band
+    red: sequentialEffort[4]
   },
+  // Surface and border colors were removed here: those flip with the theme, so
+  // components use the CSS custom properties (var(--color-surface-*/border-*))
+  // directly. Only theme-independent data-viz values remain below.
+  // Intensity bar specific — over-target tiers deepen along the red ramp.
+  intensity: {
+    // matches status-error
+    over2: primitiveRamps.red[700],
+    over3: primitiveRamps.red[800]},
   // Placeholder strip
   placeholder: {
     fill: "#3A3A3A"
@@ -489,12 +617,14 @@ function PlaceholderStrip({
   return /* @__PURE__ */ jsx(SingleStrip, { ...props });
 }
 
-// src/components/custom/Workout/icons.tsx
-function DumbbellIcon({
+// src/components/icons/SvgIcon.tsx
+function SvgIcon({
   size = 24,
   color = "currentColor",
+  strokeWidth = 2,
   fill = "none",
-  strokeWidth = 2
+  title,
+  children
 }) {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -507,36 +637,27 @@ function DumbbellIcon({
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
+      ...title ? { role: "img", "aria-label": title } : { "aria-hidden": true },
       children: [
-        /* @__PURE__ */ jsx("path", { d: "M14.4 14.4 9.6 9.6" }),
-        /* @__PURE__ */ jsx("path", { d: "M18.657 21.485a2 2 0 1 1-2.829-2.828l-1.767 1.768a2 2 0 1 1-2.829-2.829l6.364-6.364a2 2 0 1 1 2.829 2.829l-1.768 1.767a2 2 0 1 1 2.828 2.829z" }),
-        /* @__PURE__ */ jsx("path", { d: "m21.5 21.5-1.4-1.4" }),
-        /* @__PURE__ */ jsx("path", { d: "M3.9 3.9 2.5 2.5" }),
-        /* @__PURE__ */ jsx("path", { d: "M6.404 12.768a2 2 0 1 1-2.829-2.829l1.768-1.767a2 2 0 1 1-2.828-2.829l2.828-2.828a2 2 0 1 1 2.829 2.828l1.767-1.768a2 2 0 1 1 2.829 2.829z" })
+        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+        children
       ]
     }
   );
 }
-function StarIcon({
-  size = 24,
-  color = "currentColor",
-  fill = "none",
-  strokeWidth = 2
-}) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill,
-      stroke: color,
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx("path", { d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" })
-    }
-  );
+
+// src/components/icons/icons.tsx
+function DumbbellIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M14.4 14.4 9.6 9.6" }),
+    /* @__PURE__ */ jsx("path", { d: "M18.657 21.485a2 2 0 1 1-2.829-2.828l-1.767 1.768a2 2 0 1 1-2.829-2.829l6.364-6.364a2 2 0 1 1 2.829 2.829l-1.768 1.767a2 2 0 1 1 2.828 2.829z" }),
+    /* @__PURE__ */ jsx("path", { d: "m21.5 21.5-1.4-1.4" }),
+    /* @__PURE__ */ jsx("path", { d: "M3.9 3.9 2.5 2.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M6.404 12.768a2 2 0 1 1-2.829-2.829l1.768-1.767a2 2 0 1 1-2.828-2.829l2.828-2.828a2 2 0 1 1 2.829 2.828l1.767-1.768a2 2 0 1 1 2.829 2.829z" })
+  ] });
+}
+function StarIcon(props) {
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" }) });
 }
 var baseBadgeSizeConfig = {
   sm: { fontSize: 9, paddingH: 6, paddingV: 2, iconSize: 10 },
@@ -616,6 +737,266 @@ function BaseBadge({
   return badge;
 }
 
+// src/theme/tokens/semantic.ts
+var semanticColorsLight = {
+  // Brand colors (brand-*)
+  "brand-primary": primitiveRamps.orange[400],
+  "brand-primary-light": primitiveRamps.orange[300],
+  "brand-primary-dark": primitiveRamps.orange[500],
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
+  "brand-primary-hover": primitiveRamps.orange[500],
+  "brand-primary-active": primitiveRamps.orange[600],
+  "brand-secondary": primitiveRamps.cyan[600],
+  "brand-secondary-light": primitiveRamps.cyan[500],
+  "brand-secondary-dark": primitiveRamps.cyan[700],
+  "brand-secondary-subtle": "rgba(48, 123, 155, 0.08)",
+  "brand-secondary-hover": primitiveRamps.cyan[700],
+  "brand-secondary-active": primitiveRamps.cyan[800],
+  // Text on brand backgrounds (on-*)
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors (status-*)
+  "status-success": primitiveRamps.green[300],
+  "status-success-light": primitiveRamps.green[200],
+  "status-success-dark": primitiveRamps.green[600],
+  "status-success-subtle": primitiveRamps.green[50],
+  "status-error": primitiveRamps.red[600],
+  "status-error-light": primitiveRamps.red[500],
+  "status-error-dark": primitiveRamps.red[700],
+  "status-error-subtle": primitiveRamps.red[50],
+  "status-error-vivid": primitiveColors.redVivid[500],
+  // vivid alert red
+  "status-error-vivid-light": primitiveColors.redVivid[400],
+  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-warning": primitiveRamps.amber[300],
+  "status-warning-light": primitiveRamps.amber[200],
+  "status-warning-dark": primitiveRamps.amber[500],
+  "status-warning-subtle": primitiveRamps.amber[50],
+  "status-info": primitiveRamps.blue[500],
+  "status-info-light": primitiveRamps.blue[300],
+  "status-info-dark": primitiveRamps.blue[600],
+  "status-info-subtle": primitiveRamps.blue[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],
+  // Blue
+  "data-2": discreteRainbow[14],
+  // Green
+  "data-3": discreteRainbow[17],
+  // Yellow
+  "data-4": discreteRainbow[25],
+  // Red
+  "data-5": discreteRainbow[8],
+  // Purple
+  "data-6": discreteRainbow[20],
+  // Orange
+  "data-7": discreteRainbow[13],
+  // Light Blue
+  "data-8": discreteRainbow[15],
+  // Light Green
+  "data-9": discreteRainbow[3],
+  // Lavender
+  "data-10": discreteRainbow[22],
+  // 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],
+  // slightly off-white for elevated cards
+  "surface-raised": primitiveColors.neutral[100],
+  // 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-prominent": primitiveColors.neutral[400],
+  // high-visibility divider
+  "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": primitiveRamps.orange[400],
+  "brand-primary-light": primitiveRamps.orange[300],
+  "brand-primary-dark": primitiveRamps.orange[500],
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
+  "brand-primary-hover": primitiveRamps.orange[300],
+  "brand-primary-active": primitiveRamps.orange[200],
+  "brand-secondary": primitiveRamps.cyan[600],
+  "brand-secondary-light": primitiveRamps.cyan[500],
+  "brand-secondary-dark": primitiveRamps.cyan[700],
+  "brand-secondary-subtle": "rgba(48, 123, 155, 0.12)",
+  "brand-secondary-hover": primitiveRamps.cyan[500],
+  "brand-secondary-active": primitiveRamps.cyan[400],
+  // Text on brand backgrounds
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors
+  "status-success": primitiveRamps.green[300],
+  "status-success-light": primitiveRamps.green[200],
+  "status-success-dark": primitiveRamps.green[600],
+  "status-success-subtle": "rgba(46, 213, 115, 0.12)",
+  "status-error": primitiveRamps.red[600],
+  "status-error-light": primitiveRamps.red[500],
+  "status-error-dark": primitiveRamps.red[700],
+  "status-error-subtle": "rgba(209, 67, 67, 0.12)",
+  "status-error-vivid": primitiveColors.redVivid[500],
+  "status-error-vivid-light": primitiveColors.redVivid[400],
+  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-warning": primitiveRamps.amber[300],
+  "status-warning-light": primitiveRamps.amber[200],
+  "status-warning-dark": primitiveRamps.amber[500],
+  "status-warning-subtle": "rgba(249, 180, 21, 0.12)",
+  "status-info": primitiveRamps.blue[500],
+  "status-info-light": primitiveRamps.blue[300],
+  "status-info-dark": primitiveRamps.blue[600],
+  "status-info-subtle": "rgba(33, 150, 243, 0.12)",
+  // 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],
+  // main surface
+  "surface-elevated": primitiveColors.charcoal[600],
+  // elevated surface
+  "surface-raised": primitiveColors.charcoal[500],
+  // raised surface
+  "surface-overlay": primitiveColors.charcoal[600],
+  // overlay surface
+  "surface-input": primitiveColors.charcoal[600],
+  // input surface
+  // Background colors
+  "background-base": primitiveColors.charcoal[900],
+  // darkest charcoal
+  "background-default": primitiveColors.charcoal[700],
+  // main background
+  "background-subtle": primitiveColors.charcoal[500],
+  // subtle background
+  // Border colors
+  "border-default": primitiveColors.charcoal[400],
+  // default border
+  "border-subtle": primitiveColors.charcoal[500],
+  // subtle border
+  "border-strong": primitiveColors.charcoal[300],
+  // strong border
+  "border-prominent": primitiveColors.charcoal[200],
+  // high-visibility divider
+  "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],
+  // divider color
+  // Avatar default
+  "avatar-background": primitiveColors.neutral[600],
+  "avatar-text": primitiveColors.white
+};
+function getSemanticColors(mode) {
+  return mode === "dark" ? semanticColorsDark : semanticColorsLight;
+}
+
 // src/components/custom/Workout/WeightBadge.tsx
 function WeightBadge({
   value,
@@ -630,7 +1011,7 @@ function WeightBadge({
   ...props
 }) {
   const config = baseBadgeSizeConfig[size];
-  const textColor = isPr ? "#FF7900" : "#9CA3AF";
+  const textColor = isPr ? getSemanticColors("dark")["brand-primary"] : "#9CA3AF";
   const iconColor = textColor;
   const repMaxClause = reps != null ? `${reps} rep max` : "Estimated one rep max";
   const deltaLabel = delta != null ? `, ${delta >= 0 ? "+" : ""}${delta}% change` : "";
@@ -689,7 +1070,7 @@ function WeightBadge({
               fontFamily: '"Space Grotesk", sans-serif',
               fontSize: config.fontSize,
               marginLeft: 4,
-              color: delta >= 0 ? "#4caf50" : "#ef5350"
+              color: delta >= 0 ? getSemanticColors("dark")["result-improve"] : getSemanticColors("dark")["result-degrade"]
             },
             testID: "weight-badge-delta",
             children: [
@@ -703,6 +1084,7 @@ function WeightBadge({
     }
   );
 }
+var BRAND_PRIMARY = getSemanticColors("dark")["brand-primary"];
 var typeLabels = {
   e1rm: "PR e1RM",
   weight: "PR Weight",
@@ -746,7 +1128,7 @@ function PrBadge({
       accessibilityLabel: `Personal record: ${resolvedLabel}`,
       testID: "pr-badge-star",
       ...props,
-      children: /* @__PURE__ */ jsx(StarIcon, { size: 14, color: "#FF7900", fill: "#FF7900", strokeWidth: 2 })
+      children: /* @__PURE__ */ jsx(StarIcon, { size: 14, color: BRAND_PRIMARY, fill: BRAND_PRIMARY, strokeWidth: 2 })
     }
   ) : /* @__PURE__ */ jsx(
     BaseBadge,
@@ -760,7 +1142,7 @@ function PrBadge({
         {
           style: {
             fontSize: 12,
-            color: "#FF7900",
+            color: BRAND_PRIMARY,
             fontWeight: "700",
             fontFamily: "Inter, sans-serif"
           },
@@ -1094,379 +1476,6 @@ function alpha(color, opacity) {
   }
   return color;
 }
-
-// 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/components/custom/Workout/TempoBar.tsx
 var t = getSemanticColors("dark");
 var TEMPO_PACING = {
   behindThresholdPct: 0.15,
@@ -1489,15 +1498,14 @@ function getTempoFillPct(elapsedMs, targetMs) {
 });
 
 // src/components/custom/Workout/TempoDisplay.tsx
+var t2 = getSemanticColors("dark");
 var INTER = "Inter, sans-serif";
 var TEXT_TERTIARY = "#6B7280";
-var STATUS_ERROR = "#D14343";
+var STATUS_ERROR = t2["status-error"];
 var phaseColors = {
-  eccentric: "#FFB020",
-  // status-warning (amber)
+  eccentric: t2["status-warning"],
   pauseBottom: TEXT_TERTIARY,
-  concentric: "#14B8A6",
-  // status-success (teal)
+  concentric: t2["status-success"],
   pauseTop: TEXT_TERTIARY,
   dash: TEXT_TERTIARY
 };
@@ -1827,7 +1835,7 @@ function SetRow({
                   fontSize: 10,
                   fontWeight: "700",
                   fontFamily: "Inter, sans-serif",
-                  color: "#ffa502",
+                  color: WORKOUT_TOKENS.scale.orange,
                   backgroundColor: "rgba(255,165,2,0.12)",
                   paddingVertical: 1,
                   paddingHorizontal: 5,
@@ -2377,7 +2385,7 @@ function ExerciseCard(props) {
       return /* @__PURE__ */ jsx(UpcomingCard, { ...props });
   }
 }
-var BRAND_PRIMARY = "#FF7900";
+var BRAND_PRIMARY2 = getSemanticColors("dark")["brand-primary"];
 var INPUT_CLASSNAME = "bg-surface-raised border-border-strong text-text-primary";
 var inputStyle = {
   fontSize: 14,
@@ -2506,7 +2514,7 @@ function InputBar({
             onPress: onRecord,
             disabled: !canRecord,
             style: ({ pressed }) => ({
-              backgroundColor: BRAND_PRIMARY,
+              backgroundColor: BRAND_PRIMARY2,
               borderRadius: 8,
               paddingVertical: 10,
               paddingHorizontal: 16,
@@ -2533,7 +2541,7 @@ function InputBar({
     }
   );
 }
-var BRAND_PRIMARY2 = "#FF7900";
+var BRAND_PRIMARY3 = getSemanticColors("dark")["brand-primary"];
 function RestTimer({
   totalSeconds,
   elapsedMs,
@@ -2639,7 +2647,7 @@ function RestTimer({
               {
                 style: {
                   height: "100%",
-                  backgroundColor: BRAND_PRIMARY2,
+                  backgroundColor: BRAND_PRIMARY3,
                   borderRadius: 2,
                   width: `${progressPct}%`
                 },
@@ -2696,7 +2704,7 @@ function RestTimer({
                     fontSize: 11,
                     fontFamily: "Inter, sans-serif",
                     fontWeight: "600",
-                    color: BRAND_PRIMARY2
+                    color: BRAND_PRIMARY3
                   },
                   children: "Skip"
                 }
@@ -2710,7 +2718,7 @@ function RestTimer({
 }
 var DEFAULTS = {
   label: "SS",
-  color: "#FF7900",
+  color: getSemanticColors("dark")["brand-primary"],
   bgBase: "#101010"
 };
 function SupersetWrapper({
@@ -2763,7 +2771,7 @@ function SupersetWrapper({
 }
 
 // src/components/custom/Workout/ActiveWorkoutPage.tsx
-var BRAND_PRIMARY3 = "#FF7900";
+var BRAND_PRIMARY4 = getSemanticColors("dark")["brand-primary"];
 function countCompletedSets(exercise) {
   if (exercise.setVelocities != null) return exercise.setVelocities.length;
   if (exercise.status === "completed") return exercise.totalPlannedSets;
@@ -2878,7 +2886,7 @@ function WorkoutHeader({
               fontSize: 15,
               fontFamily: '"Space Grotesk", sans-serif',
               fontWeight: "700",
-              color: BRAND_PRIMARY3,
+              color: BRAND_PRIMARY4,
               fontVariant: ["tabular-nums"]
             },
             children: `${progress.completedExercises}/${progress.totalExercises}`
@@ -2912,7 +2920,7 @@ function WorkoutHeader({
             style: {
               height: "100%",
               width: `${Math.round(progress.fraction * 100)}%`,
-              backgroundColor: BRAND_PRIMARY3,
+              backgroundColor: BRAND_PRIMARY4,
               borderRadius: 2
             },
             testID: "active-workout-page-progress-fill"
@@ -3494,17 +3502,18 @@ function CardContent({ children, className }) {
 function CardFooter({ children, className }) {
   return /* @__PURE__ */ jsx(reactNative.View, { className: cn("px-6 py-4 flex-row items-center gap-2", className), children });
 }
+var t3 = getSemanticColors("dark");
 var solidVariantColors = {
-  success: "#14B8A6",
-  warning: "#FFB020",
-  error: "#D14343",
+  success: t3["status-success"],
+  warning: t3["status-warning"],
+  error: t3["status-error"],
   neutral: "#6B7280"
 };
 var ringVariantStyles = {
   "on-track": {
-    backgroundColor: "rgba(20,184,166,0.15)",
+    backgroundColor: "rgba(46,213,115,0.15)",
     borderWidth: 1,
-    borderColor: "rgba(20,184,166,0.3)"
+    borderColor: "rgba(46,213,115,0.3)"
   },
   deviation: {
     backgroundColor: "rgba(245,158,11,0.15)",
@@ -3519,11 +3528,11 @@ var ringVariantStyles = {
   }
 };
 var glowStyles = {
-  success: { boxShadow: "0 0 4px rgba(20,184,166,0.4)" },
+  success: { boxShadow: "0 0 4px rgba(46,213,115,0.4)" },
   warning: { boxShadow: "0 0 4px rgba(245,158,11,0.4)" },
   error: { boxShadow: "0 0 4px rgba(239,68,68,0.4)" },
   neutral: { boxShadow: "0 0 4px rgba(107,114,128,0.4)" },
-  "on-track": { boxShadow: "0 0 4px rgba(20,184,166,0.4)" },
+  "on-track": { boxShadow: "0 0 4px rgba(46,213,115,0.4)" },
   deviation: { boxShadow: "0 0 4px rgba(245,158,11,0.4)" },
   future: { boxShadow: "0 0 4px rgba(107,114,128,0.4)" }
 };
@@ -3537,8 +3546,8 @@ var iconColors = {
   warning: "#6B4000",
   error: "#5C1A1A",
   neutral: "#D1D5DB",
-  "on-track": "#14B8A6",
-  deviation: "#FFB020",
+  "on-track": t3["status-success"],
+  deviation: t3["status-warning"],
   future: "#6B7280"
 };
 var sizeDimensions = {
@@ -3619,20 +3628,24 @@ function StatusDot({
   }
   return /* @__PURE__ */ jsx(reactNative.View, { className, ...props, children: dot });
 }
+var MESO_ACCENT_GRADIENT_DARK = primitiveRamps.orange[500];
+var MESO_ACCENT_GRADIENT_LIGHT = primitiveRamps.orange[300];
+var WORKOUT_PILL_DELOAD = primitiveRamps.magenta[600];
 
 // src/components/custom/Workout/MesoStatusCard.tsx
-var BRAND_PRIMARY4 = "#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_PRIMARY4, BRAND_PRIMARY_LIGHT];
+var t4 = getSemanticColors("dark");
+var BRAND_PRIMARY5 = t4["brand-primary"];
+var BRAND_PRIMARY_DARK = MESO_ACCENT_GRADIENT_DARK;
+var BRAND_PRIMARY_LIGHT = MESO_ACCENT_GRADIENT_LIGHT;
+var SUCCESS = t4["status-success"];
+var WARNING = t4["status-warning"];
+var ERROR = t4["status-error"];
+var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY5, 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 GAUGE_GRADIENT = "linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(249,180,21,0.25) 50%, rgba(209,67,67,0.25) 100%)";
 var STATUS_VARIANTS = {
-  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 },
+  success: { bg: "rgba(46,213,115,0.15)", border: "rgba(46,213,115,0.3)", text: SUCCESS },
+  warning: { bg: "rgba(249,180,21,0.15)", border: "rgba(249,180,21,0.3)", text: WARNING },
   error: { bg: "rgba(209,67,67,0.15)", border: "rgba(209,67,67,0.25)", text: ERROR }
 };
 function clamp01(value) {
@@ -3924,9 +3937,9 @@ function MesoStatusCard({
             reactNative.View,
             {
               style: {
-                backgroundColor: "rgba(255,176,32,0.06)",
+                backgroundColor: "rgba(249,180,21,0.06)",
                 borderWidth: 1,
-                borderColor: "rgba(255,176,32,0.15)",
+                borderColor: "rgba(249,180,21,0.15)",
                 borderRadius: 8,
                 paddingVertical: 10,
                 paddingHorizontal: 12
@@ -3952,9 +3965,9 @@ function MesoStatusCard({
               className: "flex-row items-center",
               style: {
                 gap: 8,
-                backgroundColor: "rgba(20,184,166,0.06)",
+                backgroundColor: "rgba(46,213,115,0.06)",
                 borderWidth: 1,
-                borderColor: "rgba(20,184,166,0.2)",
+                borderColor: "rgba(46,213,115,0.2)",
                 borderRadius: 8,
                 paddingVertical: 10,
                 paddingHorizontal: 12
@@ -3983,21 +3996,22 @@ function MesoStatusCard({
     }
   );
 }
-var BRAND_PRIMARY5 = "#FF7900";
+var sem = getSemanticColors("dark");
+var BRAND_PRIMARY6 = sem["brand-primary"];
 var PROJECTION_LINE_COLOR = resolveColor("text-tertiary");
-var STATUS_SUCCESS = "#14B8A6";
-var STATUS_ERROR2 = "#D14343";
-var STATUS_WARNING = "#FFB020";
+var STATUS_SUCCESS = sem["status-success"];
+var STATUS_ERROR2 = sem["status-error"];
+var STATUS_WARNING = sem["status-warning"];
 var GRID_LINE = "rgba(255,255,255,0.06)";
-var SUCCESS_PILL_BG = "rgba(20,184,166,0.10)";
-var SUCCESS_PILL_BORDER = "rgba(20,184,166,0.20)";
+var SUCCESS_PILL_BG = "rgba(46,213,115,0.10)";
+var SUCCESS_PILL_BORDER = "rgba(46,213,115,0.20)";
 var ERROR_PILL_BG = "rgba(209,67,67,0.10)";
 var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
 var PLOT_LEFT = 26;
 var TOOLTIP_WIDTH = 124;
 function timeOf(dateStr) {
-  const t2 = Date.parse(dateStr);
-  return Number.isNaN(t2) ? 0 : t2;
+  const t10 = Date.parse(dateStr);
+  return Number.isNaN(t10) ? 0 : t10;
 }
 function formatValue(value) {
   return `${Math.round(value)}`;
@@ -4274,7 +4288,7 @@ function StrengthTrendChart({
                         ChartLine,
                         {
                           coords: geometry.actual,
-                          color: BRAND_PRIMARY5,
+                          color: BRAND_PRIMARY6,
                           strokeWidth: 2.5,
                           testID: "strength-trend-chart-actual-segment"
                         }
@@ -4327,7 +4341,7 @@ function StrengthTrendChart({
                       width: 8,
                       height: 8,
                       borderRadius: 1,
-                      backgroundColor: BRAND_PRIMARY5
+                      backgroundColor: BRAND_PRIMARY6
                     }
                   },
                   `point-${c.index}`
@@ -4457,7 +4471,7 @@ function StrengthTrendChart({
             testID: "strength-trend-chart-legend",
             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_PRIMARY5 } }),
+                /* @__PURE__ */ jsx(reactNative.View, { style: { width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY6 } }),
                 /* @__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: [
@@ -4486,13 +4500,14 @@ function StrengthTrendChart({
     }
   );
 }
-var STATUS_SUCCESS2 = "#14B8A6";
-var STATUS_WARNING2 = "#FFB020";
-var STATUS_INFO = "#2196F3";
+var t5 = getSemanticColors("dark");
+var STATUS_SUCCESS2 = t5["status-success"];
+var STATUS_WARNING2 = t5["status-warning"];
+var STATUS_INFO = t5["status-info"];
 var DOT_BORDER = "#F3F4F6";
-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)";
+var BAND_FILL = "rgba(46,213,115,0.1)";
+var BAND_EDGE = "rgba(46,213,115,0.45)";
+var PROJECTION_FILL = "rgba(46,213,115,0.05)";
 var PADDING_LEFT = 28;
 var PADDING_RIGHT = 10;
 var PADDING_TOP = 8;
@@ -4531,8 +4546,8 @@ function interpEdge(pixels, x, key) {
     const a = pixels[i];
     const b = pixels[i + 1];
     if (x >= a.x && x <= b.x) {
-      const t2 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
-      return a[key] + t2 * (b[key] - a[key]);
+      const t10 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
+      return a[key] + t10 * (b[key] - a[key]);
     }
   }
   return pixels[pixels.length - 1][key];
@@ -4864,7 +4879,7 @@ function CapacityBandChart({
 }
 
 // src/components/custom/Workout/ExerciseDetailPage.tsx
-var BRAND_PRIMARY6 = "#FF7900";
+var BRAND_PRIMARY7 = getSemanticColors("dark")["brand-primary"];
 var CHART_WIDTH = 326;
 var CHART_HEIGHT = 150;
 var EXERCISE_DETAIL_TABS = [
@@ -4928,7 +4943,7 @@ function TabBar({ active, onSelect }) {
               alignItems: "center",
               paddingVertical: 10,
               borderBottomWidth: 2,
-              borderBottomColor: isActive ? BRAND_PRIMARY6 : "transparent"
+              borderBottomColor: isActive ? BRAND_PRIMARY7 : "transparent"
             },
             testID: `exercise-detail-page-tab-${key}`,
             children: /* @__PURE__ */ jsx(
@@ -5250,7 +5265,7 @@ function ExerciseDetailPage({
                           fontSize: 15,
                           fontFamily: '"Space Grotesk", sans-serif',
                           fontWeight: "700",
-                          color: BRAND_PRIMARY6
+                          color: BRAND_PRIMARY7
                         },
                         children: `${exercise.currentE1rm} ${exercise.unit}`
                       }
@@ -5316,9 +5331,9 @@ function ExerciseDetailPage({
     }
   );
 }
-var BRAND_PRIMARY7 = "#FF7900";
+var BRAND_PRIMARY8 = getSemanticColors("dark")["brand-primary"];
 var segmentBgColors = {
-  completed: "rgba(20,184,166,0.3)",
+  completed: "rgba(46,213,115,0.3)",
   current: "rgba(255,121,0,0.5)",
   upcoming: "rgba(255,255,255,0.06)"
 };
@@ -5368,7 +5383,7 @@ function MesoSegment({ meso, isActive, onPress }) {
             },
             isActive ? {
               borderWidth: 2,
-              borderColor: BRAND_PRIMARY7,
+              borderColor: BRAND_PRIMARY8,
               transform: [{ scale: 1.02 }, { scale: pressScale }]
             } : void 0
           ],
@@ -5382,7 +5397,7 @@ function MesoSegment({ meso, isActive, onPress }) {
                 top: 0,
                 bottom: 0,
                 width: `${progress * 100}%`,
-                backgroundColor: BRAND_PRIMARY7
+                backgroundColor: BRAND_PRIMARY8
               },
               testID: `meso-segment-fill-${meso.id}`
             }
@@ -5435,7 +5450,8 @@ var colorStyles = {
   success: "bg-status-success",
   error: "bg-status-error",
   warning: "bg-status-warning",
-  info: "bg-status-info"
+  info: "bg-status-info",
+  "error-vivid": "bg-status-error-vivid"
 };
 function Indicator({
   size = "sm",
@@ -5443,14 +5459,40 @@ function Indicator({
   customColor,
   glow = false,
   ring = false,
+  pulse = false,
   className,
   style,
   ...props
 }) {
+  const pulseMode = pulse === true ? "opacity" : pulse || false;
+  const colorClass = !customColor ? colorStyles[color] : void 0;
+  const colorStyle = customColor ? { backgroundColor: customColor } : void 0;
+  if (pulseMode === "ping") {
+    return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("relative", sizeStyles[size], className), style, ...props, children: [
+      /* @__PURE__ */ jsx(
+        reactNative.View,
+        {
+          className: cn("absolute inset-0 rounded-full animate-ping", colorClass),
+          style: colorStyle
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        reactNative.View,
+        {
+          className: cn(
+            "relative rounded-full",
+            sizeStyles[size],
+            colorClass,
+            ring && "border-2 border-background-base"
+          ),
+          style: colorStyle
+        }
+      )
+    ] });
+  }
   const dynamicStyle = {
     ...typeof style === "object" ? style : {},
-    ...customColor ? { backgroundColor: customColor } : {},
-    ...glow && !customColor ? {} : {},
+    ...colorStyle ?? {},
     ...glow && customColor ? { boxShadow: `0 0 6px ${customColor}` } : {}
   };
   return /* @__PURE__ */ jsx(
@@ -5459,12 +5501,14 @@ function Indicator({
       className: cn(
         "rounded-full shrink-0",
         sizeStyles[size],
-        !customColor && colorStyles[color],
+        colorClass,
+        pulseMode === "opacity" && "animate-pulse",
         ring && "border-2 border-background-base",
-        glow && !customColor && color === "success" && "shadow-[0_0_6px_rgba(20,184,166,0.6)]",
+        glow && !customColor && color === "success" && "shadow-[0_0_6px_rgba(46,213,115,0.6)]",
         glow && !customColor && color === "error" && "shadow-[0_0_6px_rgba(239,68,68,0.6)]",
         glow && !customColor && color === "warning" && "shadow-[0_0_6px_rgba(245,158,11,0.6)]",
         glow && !customColor && color === "primary" && "shadow-[0_0_6px_rgba(255,121,0,0.6)]",
+        glow && !customColor && color === "error-vivid" && "shadow-[0_0_6px_rgba(255,71,87,0.6)]",
         className
       ),
       style: Object.keys(dynamicStyle).length > 0 ? dynamicStyle : style,
@@ -5542,29 +5586,30 @@ function Badge({
     }
   );
 }
+var t6 = getSemanticColors("dark");
 var statusBgColors = {
-  completed: "rgba(20,184,166,0.15)",
+  completed: "rgba(46,213,115,0.15)",
   current: "rgba(255,121,0,0.15)",
   next: "transparent",
   upcoming: "#1C1C1C",
   missed: "rgba(209,67,67,0.1)",
-  deload: "rgba(147,51,234,0.15)"
+  deload: "rgba(186,41,150,0.15)"
 };
 var statusBorderStyles = {
-  completed: { borderWidth: 1, borderColor: "rgba(20,184,166,0.3)" },
+  completed: { borderWidth: 1, borderColor: "rgba(46,213,115,0.3)" },
   current: { borderWidth: 1, borderColor: "rgba(255,121,0,0.3)" },
   next: { borderWidth: 1, borderColor: "rgba(255,121,0,0.4)" },
   upcoming: { borderWidth: 1, borderColor: "#1F1F1F" },
   missed: { borderWidth: 1, borderColor: "rgba(209,67,67,0.25)" },
-  deload: { borderWidth: 1, borderColor: "rgba(147,51,234,0.3)" }
+  deload: { borderWidth: 1, borderColor: "rgba(186,41,150,0.3)" }
 };
 var textColors = {
-  completed: "#14B8A6",
-  current: "#FF7900",
-  next: "#FF7900",
+  completed: t6["status-success"],
+  current: t6["brand-primary"],
+  next: t6["brand-primary"],
   upcoming: "#6B7280",
   missed: "rgba(209,67,67,0.7)",
-  deload: "#9333ea"
+  deload: WORKOUT_PILL_DELOAD
 };
 function usePulse(enabled) {
   const [opacity] = react.useState(() => new reactNative.Animated.Value(1));
@@ -5694,23 +5739,24 @@ function WorkoutPill({
   }
   return pill;
 }
+var t7 = getSemanticColors("dark");
 var TRACK_BG = "#333333";
 var LABEL_COLOR = "#6B7280";
 var TARGET_LINE_COLOR = "rgba(33, 150, 243, 0.5)";
 var AT_TARGET_GLOW = "0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)";
 var ZONE = {
-  building: "#14B8A6",
-  // teal   — below target ramp-up
-  approaching: "#FFB020",
-  // amber  — nearing target
-  target: "#FF7900",
-  // brand  — exactly at target
-  over1: "#D14343",
-  // red    — mild over-target
-  over2: "#A62626",
-  // deep red — moderate over-target
-  over3: "#7A1C1C"
-  // darkest red — severe over-target
+  building: t7["status-success"],
+  // below target ramp-up
+  approaching: t7["status-warning"],
+  // nearing target
+  target: t7["brand-primary"],
+  // exactly at target
+  over1: t7["status-error"],
+  // mild over-target
+  over2: WORKOUT_TOKENS.intensity.over2,
+  // moderate over-target
+  over3: WORKOUT_TOKENS.intensity.over3
+  // severe over-target
 };
 var BULGE_SIZE = { 1: 8, 2: 10, 3: 11 };
 function zoneForPct(pct) {
@@ -5868,7 +5914,7 @@ function IntensityBar({
 }
 
 // src/components/custom/Workout/WeekRow.tsx
-var BRAND_PRIMARY8 = "#FF7900";
+var BRAND_PRIMARY9 = getSemanticColors("dark")["brand-primary"];
 function WeekRow({
   weekNumber,
   totalWeeks,
@@ -5888,12 +5934,12 @@ function WeekRow({
     gap: 12
   };
   if (isDeload) {
-    rowStyle.backgroundColor = "rgba(147,51,234,0.06)";
+    rowStyle.backgroundColor = "rgba(186,41,150,0.06)";
   }
   if (isCurrent) {
     rowStyle.backgroundColor = "rgba(255,121,0,0.04)";
     rowStyle.borderLeftWidth = 2;
-    rowStyle.borderLeftColor = BRAND_PRIMARY8;
+    rowStyle.borderLeftColor = BRAND_PRIMARY9;
   }
   return /* @__PURE__ */ jsxs(
     reactNative.View,
@@ -5917,7 +5963,7 @@ function WeekRow({
                     width: 6,
                     height: 6,
                     borderRadius: 3,
-                    backgroundColor: BRAND_PRIMARY8
+                    backgroundColor: BRAND_PRIMARY9
                   },
                   accessibilityElementsHidden: true,
                   testID: "week-row-current-dot"
@@ -5931,7 +5977,7 @@ function WeekRow({
                     fontSize: 13,
                     fontWeight: "700",
                     fontFamily: "Inter, sans-serif",
-                    color: isCurrent ? BRAND_PRIMARY8 : void 0
+                    color: isCurrent ? BRAND_PRIMARY9 : void 0
                   },
                   accessibilityElementsHidden: true,
                   children: `W${weekNumber}`
@@ -5972,11 +6018,11 @@ function WeekRow({
 }
 
 // src/components/custom/Workout/MesoCard.tsx
-var BRAND_PRIMARY9 = "#FF7900";
-var BRAND_PRIMARY_DARK2 = "#C45E00";
-var BRAND_PRIMARY_LIGHT2 = "#FFB066";
+var BRAND_PRIMARY10 = getSemanticColors("dark")["brand-primary"];
+var BRAND_PRIMARY_DARK2 = MESO_ACCENT_GRADIENT_DARK;
+var BRAND_PRIMARY_LIGHT2 = MESO_ACCENT_GRADIENT_LIGHT;
 var BORDER_DEFAULT = "#1F1F1F";
-var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY9, BRAND_PRIMARY_LIGHT2];
+var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY10, BRAND_PRIMARY_LIGHT2];
 function heatmapColor(percentage) {
   const clamped = Math.max(0, Math.min(100, percentage));
   const opacity = 0.12 + clamped / 100 * 0.78;
@@ -6011,7 +6057,7 @@ function MesoCard({
   }, [highlighted, highlight]);
   const borderColor = highlight.interpolate({
     inputRange: [0, 1],
-    outputRange: [BORDER_DEFAULT, BRAND_PRIMARY9]
+    outputRange: [BORDER_DEFAULT, BRAND_PRIMARY10]
   });
   const header = /* @__PURE__ */ jsxs(reactNative.View, { style: { paddingHorizontal: 14, paddingTop: 12, paddingBottom: 10 }, testID: "meso-card-body", children: [
     /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { gap: 8 }, testID: "meso-card-header", children: [
@@ -6071,7 +6117,7 @@ function MesoCard({
     {
       variant: "outline",
       elevation: 2,
-      borderColor: highlighted ? BRAND_PRIMARY9 : BORDER_DEFAULT,
+      borderColor: highlighted ? BRAND_PRIMARY10 : BORDER_DEFAULT,
       className,
       style: [
         { borderColor },
@@ -6128,12 +6174,13 @@ function MesoCard({
     }
   ) });
 }
+var t8 = getSemanticColors("dark");
 var dotColorMap = {
   untrained: "#2C2C2C",
-  behind: "#406D87",
-  ontrack: "#14B8A6",
-  target: "#FF7900",
-  over: "#D14343"
+  behind: t8["brand-secondary"],
+  ontrack: t8["status-success"],
+  target: t8["brand-primary"],
+  over: t8["status-error"]
 };
 function MuscleGroupChip({
   name,
@@ -6207,9 +6254,10 @@ function MuscleGroupChip({
 }
 
 // src/components/custom/Workout/WorkoutCard.tsx
+var t9 = getSemanticColors("dark");
 var COLORS = {
-  statusSuccess: "#14B8A6",
-  brandPrimary: "#FF7900",
+  statusSuccess: t9["status-success"],
+  brandPrimary: t9["brand-primary"],
   borderDefault: "#1F1F1F",
   brandPrimarySubtle: "rgba(255,121,0,0.06)"
 };
@@ -6353,7 +6401,7 @@ function WorkoutCard({
 }
 
 // src/components/custom/Workout/ProgramPlanningPage.tsx
-var BRAND_PRIMARY10 = "#FF7900";
+var BRAND_PRIMARY11 = getSemanticColors("dark")["brand-primary"];
 var WORKOUT_PILL_STATUS = {
   completed: "completed",
   today: "current",
@@ -6421,7 +6469,7 @@ function Breadcrumbs({ crumbs, onNavigate }) {
                     fontSize: 12,
                     fontFamily: "Inter, sans-serif",
                     fontWeight: isLast ? "700" : "500",
-                    color: isLast ? void 0 : BRAND_PRIMARY10
+                    color: isLast ? void 0 : BRAND_PRIMARY11
                   },
                   children: crumb.label
                 }