@titan-design/react-ui 0.11.0 → 0.12.0

package/dist/pages.mjs

@@ -8,53 +8,37 @@ import { twMerge } from 'tailwind-merge';
 
 // src/theme/tokens/primitives.ts
 var primitiveColors = {
-  // Blue scale
-  blue: {
-    400: "#60A5FA",
-    600: "#5048E5",
-    700: "#3832A0"},
-  // Red scale
-  red: {
-    500: "#EF4444",
-    600: "#D14343"},
-  // Vivid red scale
-  redVivid: {
-    400: "#FF6070",
-    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: {
-    0: "#6E6E6E",
-    200: "#3C3C3C",
-    300: "#2C2C2C",
-    400: "#1F1F1F",
-    500: "#1C1C1C"},
-  // Pure colors
   white: "#FFFFFF"};
-var surfaceRampDark = {
-  inset: "#13100D",
-  // L*4.5  — sub-shell well / pressed
-  background: "#1C1916",
-  // L*9    — shell / frame
-  base: "#252321",
-  // L*13.5 — main content plane
-  elevated: "#2C2A28",
-  // L*17   — nav / rail
-  raised: "#31302F",
-  // L*20   — cards
-  overlay: "#373635"
-  // L*22.5 — hero / popover
+var greyRamp = {
+  50: "#F9F6F3",
+  //  L*97.0  W6
+  100: "#EDEAE7",
+  // L*92.8  W6
+  200: "#D4D1CE",
+  // L*75.7  W6
+  400: "#A29F9D",
+  // L*65.7  W5
+  500: "#888684",
+  // L*56.0  W4
+  600: "#72716F",
+  // L*47.7  W3
+  700: "#5A5958",
+  // L*37.9  W2
+  800: "#424140",
+  // L*27.6  W2  — generated bridge
+  850: "#373635",
+  // L*22.7  W2  — surface overlay
+  875: "#31302F",
+  // L*19.9  W2  — surface raised
+  900: "#2C2A28",
+  // L*17.2  W4  — surface elevated
+  925: "#252321",
+  // L*13.9  W4  — surface base
+  950: "#1C1916",
+  // L*9.0   W6  — background base / shell
+  975: "#100D0A"
+  // L*3.8   W6  — background frame / bezel
 };
-var backgroundFrameDark = "#100D0A";
 var primitiveRamps = {
   red: {
     50: "#FFF4F4",
@@ -97,9 +81,11 @@ var primitiveRamps = {
   blue: {
     50: "#EFF8FF",
     300: "#78C2FF",
+    400: "#3CA8FF",
     500: "#2196F3",
     // pin
-    600: "#1072CB"},
+    600: "#1072CB",
+    700: "#135AA8"},
   magenta: {
     400: "#ED69C3",
     600: "#BA2996"}
@@ -209,10 +195,10 @@ var semanticColorsLight = {
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
   "status-error-subtle": primitiveRamps.red[50],
-  "status-error-vivid": primitiveColors.redVivid[500],
+  "status-error-vivid": primitiveRamps.red[600],
   // vivid alert red
-  "status-error-vivid-light": primitiveColors.redVivid[400],
-  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid-light": primitiveRamps.red[500],
+  "status-error-vivid-dark": primitiveRamps.red[700],
   "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
   "status-warning": primitiveRamps.amber[300],
   "status-warning-light": primitiveRamps.amber[200],
@@ -239,7 +225,7 @@ var semanticColorsLight = {
   "result-inconclusive": "#9E9A97",
   // Gray - no clear result
   "result-inconclusive-light": "rgba(158, 154, 151, 0.12)",
-  "result-neutral": primitiveColors.neutral[500],
+  "result-neutral": greyRamp[600],
   // Neutral baseline
   // Text on result backgrounds (on-result-*)
   "on-result-improve": primitiveColors.white,
@@ -270,47 +256,38 @@ var semanticColorsLight = {
   // Text colors (text-*)
   "text-primary": "#121828",
   "text-secondary": "#65748B",
-  "text-tertiary": primitiveColors.neutral[400],
+  "text-tertiary": greyRamp[400],
   "text-disabled": "rgba(55, 65, 81, 0.48)",
   "text-inverse": primitiveColors.white,
-  "text-link": primitiveColors.blue[600],
-  "text-link-hover": primitiveColors.blue[700],
+  "text-link": primitiveRamps.blue[600],
+  "text-link-hover": primitiveRamps.blue[700],
   // Surface colors (surface-*) - for elevated containers
   "surface-base": primitiveColors.white,
-  "surface-elevated": primitiveColors.neutral[50],
+  "surface-elevated": greyRamp[50],
   // slightly off-white for elevated cards
-  "surface-raised": primitiveColors.neutral[100],
+  "surface-raised": greyRamp[100],
   // light gray for raised cards
   "surface-overlay": primitiveColors.white,
-  "surface-input": primitiveColors.neutral[50],
+  "surface-input": greyRamp[50],
   // Input field background (filled variant)
-  // Deepest pressed pit (TD-surface-tokens, S-3) — light-mode counterpart of
-  // the dark ramp's `inset` plane; a placeholder pairing, not part of the
-  // dark-ramp investigation (surface.contract.test.ts is dark-mode only).
-  "surface-inset": primitiveColors.neutral[300],
   // Background colors (background-*)
   "background-base": "#EBEBEB",
   "background-default": primitiveColors.white,
-  "background-subtle": primitiveColors.neutral[50],
-  // Frame/bezel chrome (TD-surface-tokens, S-3) — top bar + side nav shell,
-  // one step below `background-base` (darker still than `surface-inset`
-  // above, mirroring the dark-mode ordering). Placeholder pairing for light
-  // mode (see dark-mode note on `surface-inset` above).
-  "background-frame": primitiveColors.neutral[400],
+  "background-subtle": greyRamp[50],
+  // Frame/bezel chrome — top bar + side nav shell, one step below
+  // `background-base`. Placeholder pairing for light mode, which is deferred.
+  "background-frame": greyRamp[400],
   // Border colors (border-*)
-  "border-default": "#E8E9EB",
-  "border-subtle": primitiveColors.neutral[100],
-  "border-strong": primitiveColors.neutral[300],
-  "border-prominent": primitiveColors.neutral[400],
+  "border-prominent": greyRamp[400],
   // high-visibility divider
-  "border-focus": primitiveColors.blue[600],
-  "border-input": primitiveColors.neutral[300],
+  "border-focus": primitiveRamps.blue[600],
+  "border-input": greyRamp[200],
   // Input field border
-  "border-input-hover": primitiveColors.neutral[400],
+  "border-input-hover": greyRamp[400],
   // Input field border on hover
-  "border-input-focus": primitiveColors.blue[600],
+  "border-input-focus": primitiveRamps.blue[600],
   // Input field border on focus
-  "border-input-error": primitiveColors.red[600],
+  "border-input-error": primitiveRamps.red[600],
   // Input field border on error
   // Alpha hairline separators (surface-independent — composite toward black on
   // light surfaces, mirroring the dark-mode white-alpha family). See §4/S-2.
@@ -327,7 +304,7 @@ var semanticColorsLight = {
   // Divider
   "divider": "#E8E9EB",
   // Avatar default
-  "avatar-background": primitiveColors.neutral[500],
+  "avatar-background": greyRamp[600],
   "avatar-text": primitiveColors.white
 };
 var semanticColorsDark = {
@@ -359,9 +336,9 @@ var semanticColorsDark = {
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
   "status-error-subtle": "rgba(209, 67, 67, 0.12)",
-  "status-error-vivid": primitiveColors.redVivid[500],
-  "status-error-vivid-light": primitiveColors.redVivid[400],
-  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid": primitiveRamps.red[600],
+  "status-error-vivid-light": primitiveRamps.red[500],
+  "status-error-vivid-dark": primitiveRamps.red[700],
   "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
   "status-warning": primitiveRamps.amber[300],
   "status-warning-light": primitiveRamps.amber[200],
@@ -385,7 +362,7 @@ var semanticColorsDark = {
   "result-degrade-dark": "#b30000",
   "result-inconclusive": "#9E9A97",
   "result-inconclusive-light": "rgba(158, 154, 151, 0.16)",
-  "result-neutral": primitiveColors.neutral[400],
+  "result-neutral": greyRamp[400],
   // Text on result backgrounds
   "on-result-improve": primitiveColors.white,
   "on-result-degrade": primitiveColors.white,
@@ -402,74 +379,106 @@ var semanticColorsDark = {
   "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-primary": greyRamp[50],
+  "text-secondary": greyRamp[400],
+  // Deliberately ONE step lighter than the L*-nearest match (`greyRamp[600]`).
+  // The colour this replaced failed WCAG large-text outright on the three
+  // lightest planes — 2.96 / 2.72 / 2.49 against elevated / raised / overlay —
+  // and `600` carried that failure forward almost exactly (2.93 / 2.70 / 2.47).
+  // `500` clears 3:1 everywhere (3.32–5.34). Contrast beats colour fidelity for
+  // text roles; borders and surfaces still use strict L*-nearest. See
+  // semantic-contrast.test.ts, which fails if this is moved back down.
+  "text-tertiary": greyRamp[500],
   "text-disabled": "rgba(255, 255, 255, 0.38)",
-  "text-inverse": primitiveColors.neutral[900],
+  "text-inverse": greyRamp[950],
   "text-link": "#828DF8",
-  "text-link-hover": primitiveColors.blue[400],
+  "text-link-hover": primitiveRamps.blue[400],
   // Surface colors - dark backgrounds — warm-tapered DERIVED ramp (TD-surface-tokens,
   // S-1, re-spaced S-3). Shipped verbatim from `deriveSurfaceRamp()` — see
   // `surfaceRampDark` in primitives.ts for the full derivation note. `surface-overlay`
   // and `surface-elevated` are distinct (were both #191919 pre-S-1); `surface-input`
   // tracks one plane above `surface-base`, same relative position as before the remap.
   // `background-base` backs `Surface level="background"` (SurfaceContext.SURFACE_LEVEL_TOKEN),
-  // so it takes the ramp's `background` (shell/frame) role, NOT `inset`. The ramp's
-  // deepest `inset` plane is now promoted to `surface-inset` below (S-3) — still no
-  // `SurfaceLevel` member for it (follow-up, alongside the elevation.ts -1/-2 pressed
-  // levels — parallel workstream, not this branch).
-  "surface-base": surfaceRampDark.base,
-  // main surface        (#252321, L*13.5)
-  "surface-elevated": surfaceRampDark.elevated,
-  // elevated surface     (#2C2A28, L*17   — nav/rail)
-  "surface-raised": surfaceRampDark.raised,
-  // raised surface       (#31302F, L*20   — cards)
-  "surface-overlay": surfaceRampDark.overlay,
-  // overlay surface      (#373635, L*22.5 — hero/popover)
-  "surface-input": surfaceRampDark.elevated,
+  // so it takes the ramp's shell role. The deepest plane is `background-frame`,
+  // which is also the `SurfaceLevel` floor a pressed surface clamps at.
+  "surface-base": greyRamp[925],
+  // main surface        (#252321, L*13.9)
+  "surface-elevated": greyRamp[900],
+  // elevated surface     (#2C2A28, L*17.2 — nav/rail)
+  "surface-raised": greyRamp[875],
+  // raised surface       (#31302F, L*19.9 — cards)
+  "surface-overlay": greyRamp[850],
+  // overlay surface      (#373635, L*22.7 — hero/popover)
+  "surface-input": greyRamp[900],
   // input surface        (#2C2A28 — one plane above base)
-  "surface-inset": surfaceRampDark.inset,
-  // deepest pressed pit  (#13100D, L*4.5  — sub-shell well)
   // Background colors — same ramp, the frame/shell end of it.
-  "background-base": surfaceRampDark.background,
-  // shell / frame        (#1C1916, L*9 — Surface level="background")
-  "background-default": surfaceRampDark.base,
-  // main background      (#252321, L*13.5 — matches surface-base)
-  "background-subtle": surfaceRampDark.elevated,
-  // subtle background    (#2C2A28, L*17 — matches surface-elevated)
-  // Frame/bezel chrome (S-3) — the top bar + side nav shell; one step BELOW
-  // `background-base`, darker even than `surface-inset` — it exits the content
-  // ramp entirely rather than sitting in it. See `backgroundFrameDark` in
-  // primitives.ts.
-  "background-frame": backgroundFrameDark,
-  // frame / bezel        (#100D0A, L*3.79)
-  // Border colors — `border-subtle` (#1C1C1C) previously collided with
-  // `surface-raised` (also #1C1C1C, an invisible border on raised cards). The
-  // re-spaced ramp above moved `surface-raised` to #2D2C2B, so this value is now
-  // distinct from every surface hex without needing to change it — see
-  // `surface.contract.test.ts` R2/R4.
-  "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],
+  "background-base": greyRamp[950],
+  // shell                (#1C1916, L*9   — Surface level="background")
+  "background-default": greyRamp[925],
+  // main background      (#252321, L*13.9 — matches surface-base)
+  "background-subtle": greyRamp[900],
+  // subtle background    (#2C2A28, L*17.2 — matches surface-elevated)
+  // Frame/bezel chrome — the top bar + side nav shell, one step BELOW
+  // `background-base`. It used to be described as sitting OUTSIDE the ramp; it
+  // is simply the ramp's last step now, and the floor `<Surface pressed>` clamps at.
+  "background-frame": greyRamp[975],
+  // frame / bezel        (#100D0A, L*3.8)
+  // Border colors — solid dark borders are RETIRED (TD-07.14). Not a preference — a structural
+  // consequence of one ramp. Every step from 850 to 975 is now a surface plane,
+  // so a solid border dark enough to read as a border necessarily equals some
+  // plane's fill, which is exactly the collision `surface.contract.test.ts` R2
+  // forbids. The only non-plane steps left in that band are 800 and 700, and
+  // borders there jump from L*~10-25 to L*~28-38 — a restyle, not a migration.
+  //
+  // So separation moves to the alpha hairlines, which dark mode already called
+  // "the primary separation cue". Being alpha, they composite against whatever
+  // plane they land on and cannot collide with any of them — the problem stops
+  // existing rather than being re-solved per plane. The three solid tokens were
+  // deleted outright; consumers point at the `hairline-*` family below.
+  //
+  // `border-prominent` stays SOLID: it is the one border meant to be seen
+  // outright (4 call sites, high-visibility dividers), and grey-800 is not a
+  // plane, so it keeps its job without collision.
+  "border-prominent": greyRamp[800],
   // high-visibility divider
   "border-focus": "#828DF8",
-  "border-input": primitiveColors.neutral[600],
-  "border-input-hover": primitiveColors.neutral[500],
+  "border-input": greyRamp[700],
+  "border-input-hover": greyRamp[600],
   "border-input-focus": "#828DF8",
-  "border-input-error": primitiveColors.red[500],
+  "border-input-error": primitiveRamps.red[500],
   // Alpha hairline separators — the primary separation cue (§4/S-2). Self-
   // normalizing: composites toward white by ~the same amount on ANY plane, so
   // one family works at every elevation instead of per-surface border tokens.
   // Shadows are demoted to floating-overlay use only (not shipped as a fill
   // separator here — see elevation.ts, follow-up S-4).
-  "hairline-subtle": "rgba(255, 255, 255, 0.06)",
-  "hairline-default": "rgba(255, 255, 255, 0.09)",
-  "hairline-strong": "rgba(255, 255, 255, 0.14)",
+  //
+  // RETUNED on the wall (VW-99, S-6). The original .06/.09/.14 were set at a
+  // desk. On the panel at ~3 m `subtle` rendered but was indiscernible, and
+  // `default` — the load-bearing one, with no solid-border fallback since
+  // TD-07.14 — went weak on the lightest plane. `strong` read cleanly with room
+  // to spare, which is what made raising the whole family viable.
+  //
+  // Each tier steps up onto the next MEASURED-GOOD rung rather than an
+  // interpolated one: the new `subtle` is the old `default`, and the new
+  // `default` is the old `strong` — a value just confirmed legible on all four
+  // planes. Spacing goes 1 : 1.56 : 2.33, against the original 1 : 1.5 : 2.33.
+  //
+  // RUN 2 (VW-99): all three tiers were seen on all four planes — the retune
+  // worked — but `subtle` was still "a bit hard to read", so the whole family
+  // took a further +.01. That is a comfort margin on a passing row, not a fix
+  // for a failing one, which is why it is a flat offset: the 1 : 1.56 : 2.33
+  // spacing that the run validated is preserved rather than re-derived.
+  //
+  // Keep these to TWO decimals. react-native-web quantises alpha to 8 bits, so
+  // a 3-decimal value silently rounds on the way to the DOM (.135 renders as
+  // .13) — the token would say one thing and paint another.
+  //
+  // DARK ONLY. The light family above composites toward BLACK on light planes,
+  // which this run says nothing about — do not mirror these numbers into it
+  // without its own verification.
+  "hairline-subtle": "rgba(255, 255, 255, 0.10)",
+  "hairline-default": "rgba(255, 255, 255, 0.15)",
+  "hairline-strong": "rgba(255, 255, 255, 0.22)",
   // Interactive states
   "interactive-hover": "rgba(255, 255, 255, 0.04)",
   "interactive-focus": "rgba(255, 255, 255, 0.12)",
@@ -478,15 +487,16 @@ var semanticColorsDark = {
   "interactive-disabled": "rgba(255, 255, 255, 0.12)",
   "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
   // Divider
-  "divider": primitiveColors.charcoal[400],
-  // divider color
+  "divider": "rgba(255, 255, 255, 0.09)",
   // Avatar default
-  "avatar-background": primitiveColors.neutral[600],
+  "avatar-background": greyRamp[700],
   "avatar-text": primitiveColors.white
 };
 function getSemanticColors(mode) {
   return mode === "dark" ? semanticColorsDark : semanticColorsLight;
 }
+
+// src/theme/color-utils.ts
 function hexToRgb(hex) {
   const cleaned = hex.replace("#", "");
   let r, g, b;
@@ -526,32 +536,32 @@ function rgbToHsv(r, g, b) {
   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;
+  const c2 = v * s;
+  const x = c2 * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = v - c2;
   let rPrime, gPrime, bPrime;
   if (h >= 0 && h < 60) {
-    rPrime = c;
+    rPrime = c2;
     gPrime = x;
     bPrime = 0;
   } else if (h >= 60 && h < 120) {
     rPrime = x;
-    gPrime = c;
+    gPrime = c2;
     bPrime = 0;
   } else if (h >= 120 && h < 180) {
     rPrime = 0;
-    gPrime = c;
+    gPrime = c2;
     bPrime = x;
   } else if (h >= 180 && h < 240) {
     rPrime = 0;
     gPrime = x;
-    bPrime = c;
+    bPrime = c2;
   } else if (h >= 240 && h < 300) {
     rPrime = x;
     gPrime = 0;
-    bPrime = c;
+    bPrime = c2;
   } else {
-    rPrime = c;
+    rPrime = c2;
     gPrime = 0;
     bPrime = x;
   }
@@ -576,194 +586,6 @@ function lighten(hex, amount = 0.1) {
   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()
-  }
-});
 
 // src/utils/colors.ts
 function alpha(color, opacity) {
@@ -810,29 +632,37 @@ function formatVelocity(velocity) {
 function roundTempo(tempo) {
   return tempo.map((v) => Math.round(v * 10) / 10);
 }
-
-// src/theme/bar-paper.ts
-function grainOpacityForColor(hex) {
+function parseHex(hex) {
   const h = hex.replace("#", "");
   const full = h.length === 3 ? h.split("").map((ch) => ch + ch).join("") : h;
-  const r = parseInt(full.slice(0, 2), 16);
-  const g = parseInt(full.slice(2, 4), 16);
-  const b = parseInt(full.slice(4, 6), 16);
-  if ([r, g, b].some(Number.isNaN)) return 0.14;
-  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return Math.min(0.24, Math.max(0.04, 0.02 + 0.31 * lum));
-}
-function barGrain(color) {
-  const op = grainOpacityForColor(color).toFixed(3);
+  const rgb = [
+    parseInt(full.slice(0, 2), 16),
+    parseInt(full.slice(2, 4), 16),
+    parseInt(full.slice(4, 6), 16)
+  ];
+  return rgb.some(Number.isNaN) ? null : rgb;
+}
+function perceivedLuminance(hex) {
+  const rgb = parseHex(hex);
+  if (!rgb) return 0.5;
+  const [r, g, b] = rgb;
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+}
+function grainOpacityForTone(baseColor) {
+  return Math.min(0.24, Math.max(0.04, 0.02 + 0.31 * perceivedLuminance(baseColor)));
+}
+function grainForTone(baseColor) {
+  const op = grainOpacityForTone(baseColor).toFixed(3);
   return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='${op}'/%3E%3C/svg%3E")`;
 }
 function barPaper(color, flip = false) {
   return {
-    backgroundImage: barGrain(color),
+    backgroundImage: grainForTone(color),
     boxShadow: flip ? "0 -6px 16px rgba(0,0,0,0.45)" : "inset 0 1.5px 0 rgba(255,255,255,0.22), 0 6px 16px rgba(0,0,0,0.45)"
   };
 }
 var SURFACE_LEVEL_TOKEN = {
+  frame: "background-frame",
   background: "background-base",
   base: "surface-base",
   elevated: "surface-elevated",
@@ -855,12 +685,7 @@ function useSurfaceMode() {
 function useOnSurfaceColor(role = "primary") {
   return getSemanticColors(useSurfaceMode())[ON_SURFACE_TOKEN[role]];
 }
-function insetFloor(mode) {
-  const colors = getSemanticColors(mode);
-  return colors["surface-inset"] ?? surfaceRampDark.inset;
-}
 function surfaceBackground(level, mode) {
-  if (level === "inset") return insetFloor(mode);
   return getSemanticColors(mode)[SURFACE_LEVEL_TOKEN[level]];
 }
 var ANIMATION_EASING = Easing.bezier(0.22, 1, 0.36, 1);
@@ -1419,7 +1244,7 @@ function setAccessibilityLabel(set, repCount) {
 }
 var EXPANDED_HEIGHT = 60;
 var COMPACT_HEIGHT = 8;
-var HERO_REFERENCE_COLOR = primitiveColors.charcoal[0];
+var HERO_REFERENCE_COLOR = greyRamp[600];
 function DashedReferenceLine({
   anchor,
   offset,
@@ -1989,7 +1814,7 @@ var baseBadgeSizeConfig = {
   lg: { fontSize: 12, paddingH: 10, paddingV: 4, iconSize: 14 }
 };
 var variantColors = {
-  plain: { backgroundColor: t["surface-raised"], borderColor: "#1F1F1F" },
+  plain: { backgroundColor: t["surface-raised"], borderColor: t["hairline-default"] },
   pr: {
     backgroundColor: "rgba(255, 121, 0, 0.12)",
     borderColor: "rgba(255, 121, 0, 0.3)"
@@ -2428,7 +2253,7 @@ function LiveTempoCell({
     alignItems: "center",
     justifyContent: "center"
   };
-  const num = (c, text) => /* @__PURE__ */ jsx(Text, { style: { fontFamily: MONO, fontSize, color: c, fontWeight: "700" }, children: text });
+  const num = (c2, text) => /* @__PURE__ */ jsx(Text, { style: { fontFamily: MONO, fontSize, color: c2, fontWeight: "700" }, children: text });
   if (status === "upcoming") {
     const targetText = targetMs != null ? (targetMs / 1e3).toFixed(1) : String(value);
     return /* @__PURE__ */ jsx(View, { style: wrap, children: num(color, targetText) });
@@ -2839,7 +2664,7 @@ var SET_STRIP_ZONES = {
   fast: primitiveRamps.amber[300],
   fastest: primitiveRamps.green[300]
 };
-var TODO_COLOR = primitiveColors.charcoal[300];
+var TODO_COLOR = greyRamp[900];
 var SET_STRIP_VARIABLE_COLOR = primitiveRamps.cyan[900];
 var NOTCH_GAP = 2;
 var CLUSTER_GAP = 3;
@@ -3131,7 +2956,7 @@ function CollapsedCard({
   );
 }
 var DARK2 = getSemanticColors("dark");
-var BODY_DIVIDER = DARK2["border-subtle"];
+var BODY_DIVIDER = DARK2["hairline-subtle"];
 function deriveHeaderSetStates(sets) {
   return sets.map((set) => {
     switch (set.state) {
@@ -3165,7 +2990,7 @@ function ExpandedCard({
   return /* @__PURE__ */ jsxs(
     View,
     {
-      className: "bg-surface-elevated border-border",
+      className: "bg-surface-elevated border-hairline",
       style: {
         borderWidth: 1,
         ...borderRadius,
@@ -3298,7 +3123,7 @@ function resolveColor(token, mode = "dark") {
 
 // src/components/custom/Workout/InputBar.tsx
 var BRAND_PRIMARY2 = getSemanticColors("dark")["brand-primary"];
-var INPUT_CLASSNAME = "bg-surface-raised border-border-strong text-text-primary";
+var INPUT_CLASSNAME = "bg-surface-raised border-hairline-strong text-text-primary";
 var inputStyle = {
   fontSize: 14,
   fontWeight: "600",
@@ -3331,7 +3156,7 @@ function InputBar({
       style: {
         width: "100%",
         borderTopWidth: 1,
-        borderTopColor: resolveColor("border-default"),
+        borderTopColor: resolveColor("hairline-default"),
         paddingTop: 10,
         paddingHorizontal: 16,
         paddingBottom: 12,
@@ -3546,7 +3371,7 @@ function CircularProgress({
                   cy: center,
                   r: radius,
                   fill: "none",
-                  stroke: "var(--color-border-default)",
+                  stroke: "var(--color-hairline-default)",
                   strokeWidth
                 }
               ),
@@ -3801,7 +3626,7 @@ function RestTimer({
       style: {
         width: "100%",
         borderTopWidth: 1,
-        borderTopColor: resolveColor("border-default"),
+        borderTopColor: resolveColor("hairline-default"),
         paddingVertical: 12,
         paddingHorizontal: 16
       },
@@ -3870,7 +3695,7 @@ function RestTimer({
         /* @__PURE__ */ jsx(
           View,
           {
-            className: "bg-border",
+            className: "bg-hairline",
             style: {
               height: 3,
               borderRadius: 2,
@@ -4090,7 +3915,7 @@ function WorkoutHeader({
     /* @__PURE__ */ jsx(
       View,
       {
-        className: "bg-border",
+        className: "bg-hairline",
         style: { height: 4, borderRadius: 2 },
         testID: "active-workout-page-progress-track",
         children: /* @__PURE__ */ jsx(
@@ -4115,7 +3940,7 @@ function ExerciseList({ groups, focusedId, onToggle }) {
       return /* @__PURE__ */ jsx(
         View,
         {
-          className: "bg-surface-elevated border-border",
+          className: "bg-surface-elevated border-hairline",
           style: {
             borderWidth: 1,
             borderRadius: 12
@@ -4197,7 +4022,7 @@ function ActiveWorkoutPage({
         (showRest || showInput) && /* @__PURE__ */ jsx(
           View,
           {
-            style: { borderTopWidth: 1, borderTopColor: resolveColor("border-default") },
+            style: { borderTopWidth: 1, borderTopColor: resolveColor("hairline-default") },
             testID: "active-workout-page-bottom-bar",
             children: showRest && rest != null ? /* @__PURE__ */ jsx(
               RestTimer,
@@ -4261,7 +4086,13 @@ var elevationSystem = {
   // Level 1: Subtle elevation (outline cards, subtle containers)
   [1]: {
     name: "subtle",
-    colorAdjustment: 0.01,
+    // The whole ladder was re-spaced in TD-07.16. It used to run
+    // 0.01/0.02/0.04/0.06/0.08, where the first step was ~2 RGB values — under
+    // the perceptual floor, so level 1 existed in the type system and nowhere on
+    // screen. With drop-shadow now gated off below FLOATING_ELEVATION_MIN, TONE
+    // is the only thing separating 0-3, so every step has to actually land.
+    // Even 0.025 spacing, verified in elevation.test.ts as ΔL* > 1 per step.
+    colorAdjustment: 0.025,
     shadowIntensity: "subtle",
     shadowStyle: "raised",
     description: "Subtle elevation (outline cards, subtle containers)"
@@ -4269,7 +4100,7 @@ var elevationSystem = {
   // Level 2: Standard elevation (default cards, buttons)
   [2]: {
     name: "standard",
-    colorAdjustment: 0.02,
+    colorAdjustment: 0.05,
     shadowIntensity: "medium",
     shadowStyle: "raised",
     description: "Standard elevation (default cards, raised buttons)"
@@ -4277,7 +4108,7 @@ var elevationSystem = {
   // Level 3: Prominent elevation (important cards, modals)
   [3]: {
     name: "prominent",
-    colorAdjustment: 0.04,
+    colorAdjustment: 0.075,
     shadowIntensity: "strong",
     shadowStyle: "raised",
     description: "Prominent elevation (important cards, modals, dropdowns)"
@@ -4285,7 +4116,7 @@ var elevationSystem = {
   // Level 4: High elevation (overlays, popovers)
   [4]: {
     name: "high",
-    colorAdjustment: 0.06,
+    colorAdjustment: 0.1,
     shadowIntensity: "strong",
     shadowStyle: "raised",
     description: "High elevation (overlays, popovers, tooltips)"
@@ -4293,7 +4124,7 @@ var elevationSystem = {
   // Level 5: Floating (toasts, floating action buttons)
   [5]: {
     name: "floating",
-    colorAdjustment: 0.08,
+    colorAdjustment: 0.13,
     shadowIntensity: "strong",
     shadowStyle: "raised",
     description: "Floating elevation (toasts, floating action buttons, highest z-index)"
@@ -4409,12 +4240,12 @@ function calculateElevationShadow(baseColor, level, theme, isHovered = false) {
   const elevatedSurfaceColor = calculateElevationSurface(baseColor, level);
   const rimLightColor = calculateRimLightColor(baseColor, level);
   const darkShadowColors = calculateDarkShadowColors(elevatedSurfaceColor);
-  const intensityConfig2 = {
+  const intensityConfig = {
     subtle: { offset: 1, blur: 2 },
     medium: { offset: 2, blur: 4 },
     strong: { offset: 2, blur: 5 }
   };
-  const { offset, blur } = intensityConfig2[config.shadowIntensity];
+  const { offset, blur } = intensityConfig[config.shadowIntensity];
   const rimConfig = getRimLightConfig();
   if (config.shadowStyle === "pressed") {
     if (isHovered) {
@@ -4470,12 +4301,13 @@ function calculateElevationShadow(baseColor, level, theme, isHovered = false) {
     });
   }
 }
+var FLOATING_ELEVATION_MIN = 4;
 function getElevationShadow(baseColor, level, theme, isHovered = false) {
   const cacheKey = getShadowCacheKey(baseColor, level, theme, isHovered);
   if (elevationShadowCache.has(cacheKey)) {
     return elevationShadowCache.get(cacheKey);
   }
-  const result = calculateElevationShadow(baseColor, level, theme, isHovered);
+  const result = level > 0 && level < FLOATING_ELEVATION_MIN ? {} : calculateElevationShadow(baseColor, level, theme, isHovered);
   if (elevationShadowCache.size >= MAX_SHADOW_CACHE_SIZE) {
     const firstKey = elevationShadowCache.keys().next().value;
     elevationShadowCache.delete(firstKey);
@@ -4561,12 +4393,12 @@ function useTheme() {
 var variantStyles = {
   elevated: "",
   // Will be set dynamically via elevation system
-  outline: "border-2 border-border-strong",
+  outline: "border-2 border-hairline-strong",
   // Thicker border with stronger contrast
   filled: "",
   // Will be set dynamically via elevation system
-  accent: "border border-border",
-  subtle: "border border-border-subtle"
+  accent: "border border-hairline",
+  subtle: "border border-hairline-subtle"
 };
 function Card({
   variant = "elevated",
@@ -4686,7 +4518,7 @@ var solidVariantColors = {
   success: t5["status-success"],
   warning: t5["status-warning"],
   error: t5["status-error"],
-  neutral: "#6B7280"
+  neutral: greyRamp[500]
 };
 var ringVariantStyles = {
   "on-track": {
@@ -4724,10 +4556,10 @@ var iconColors = {
   success: "#0A5C52",
   warning: "#6B4000",
   error: "#5C1A1A",
-  neutral: "#D1D5DB",
+  neutral: greyRamp[200],
   "on-track": t5["status-success"],
   deviation: t5["status-warning"],
-  future: "#6B7280"
+  future: greyRamp[500]
 };
 var sizeDimensions = {
   sm: { size: 8, showIcon: false },
@@ -4796,7 +4628,7 @@ function StatusDot({
           /* @__PURE__ */ jsx(
             Text,
             {
-              style: { fontSize: 12, lineHeight: 16, color: "#9CA3AF" },
+              style: { fontSize: 12, lineHeight: 16, color: greyRamp[400] },
               accessibilityElementsHidden: true,
               children: label
             }
@@ -5269,11 +5101,11 @@ function ChartLine({
   dashed,
   testID
 }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: coords.map((c, i) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: coords.map((c2, i) => {
     if (i === 0) return null;
     const prev = coords[i - 1];
-    const dx = c.x - prev.x;
-    const dy = c.y - prev.y;
+    const dx = c2.x - prev.x;
+    const dy = c2.y - prev.y;
     const length = Math.sqrt(dx * dx + dy * dy);
     const angle = Math.atan2(dy, dx) * (180 / Math.PI);
     return /* @__PURE__ */ jsx(
@@ -5476,21 +5308,21 @@ function StrengthTrendChart({
                   }
                 ),
                 geometry.actual.map(
-                  (c) => c.point.isPR ? /* @__PURE__ */ jsx(
+                  (c2) => c2.point.isPR ? /* @__PURE__ */ jsx(
                     Text,
                     {
                       accessibilityElementsHidden: true,
                       testID: "strength-trend-chart-pr-star",
                       style: {
                         position: "absolute",
-                        left: c.x - 7,
-                        top: c.y - 20,
+                        left: c2.x - 7,
+                        top: c2.y - 20,
                         fontSize: 12,
                         color: STATUS_WARNING2
                       },
                       children: "\u2605"
                     },
-                    `star-${c.index}`
+                    `star-${c2.index}`
                   ) : null
                 )
               ]
@@ -5501,29 +5333,29 @@ function StrengthTrendChart({
             {
               style: { position: "absolute", top: 0, left: 0, width, height },
               testID: "strength-trend-chart-points",
-              children: geometry.actual.map((c) => {
-                const label = c.point.sessionLabel ?? c.point.date;
+              children: geometry.actual.map((c2) => {
+                const label = c2.point.sessionLabel ?? c2.point.date;
                 return /* @__PURE__ */ jsx(
                   Pressable,
                   {
                     testID: "strength-trend-chart-point",
                     accessibilityRole: "button",
-                    accessibilityLabel: `${label}: ${formatValue(c.point.e1rm)} ${unit}${c.point.isPR ? ", personal record" : ""}`,
+                    accessibilityLabel: `${label}: ${formatValue(c2.point.e1rm)} ${unit}${c2.point.isPR ? ", personal record" : ""}`,
                     onPress: () => {
-                      setSelected(c.index);
-                      onPointPress?.(c.point);
+                      setSelected(c2.index);
+                      onPointPress?.(c2.point);
                     },
                     style: {
                       position: "absolute",
-                      left: c.x - 4,
-                      top: c.y - 4,
+                      left: c2.x - 4,
+                      top: c2.y - 4,
                       width: 8,
                       height: 8,
                       borderRadius: 1,
                       backgroundColor: BRAND_PRIMARY6
                     }
                   },
-                  `point-${c.index}`
+                  `point-${c2.index}`
                 );
               })
             }
@@ -5533,7 +5365,7 @@ function StrengthTrendChart({
             {
               testID: "strength-trend-chart-tooltip",
               accessibilityElementsHidden: true,
-              className: "bg-surface-elevated border-border-strong",
+              className: "bg-surface-elevated border-hairline-strong",
               style: {
                 position: "absolute",
                 left: Math.max(
@@ -6104,7 +5936,7 @@ function TabBar({ active, onSelect }) {
       className: "flex-row",
       style: {
         borderBottomWidth: 1,
-        borderBottomColor: resolveColor("border-default")
+        borderBottomColor: resolveColor("hairline-default")
       },
       accessibilityRole: "tablist",
       testID: "exercise-detail-page-tabs",
@@ -6155,7 +5987,7 @@ function StatStrip({ stats, unit }) {
     return /* @__PURE__ */ jsxs(
       View,
       {
-        className: "bg-surface-elevated border-border",
+        className: "bg-surface-elevated border-hairline",
         style: {
           flex: 1,
           padding: 12,
@@ -6205,7 +6037,7 @@ function SectionCard({
   return /* @__PURE__ */ jsxs(
     View,
     {
-      className: "bg-surface-elevated border-border",
+      className: "bg-surface-elevated border-hairline",
       style: {
         borderWidth: 1,
         borderRadius: 12,
@@ -6316,7 +6148,7 @@ function VbtSummaryRow({ summary }) {
   return /* @__PURE__ */ jsx(View, { className: "flex-row", style: { gap: 8 }, testID: "exercise-detail-page-vbt-summary", children: cells.map((cell) => /* @__PURE__ */ jsxs(
     View,
     {
-      className: "bg-surface-elevated border-border",
+      className: "bg-surface-elevated border-hairline",
       style: {
         flex: 1,
         padding: 12,
@@ -6708,7 +6540,7 @@ function Indicator({
 // src/components/ui/badge/Badge.tsx
 var variantColorStyles = {
   solid: {
-    default: "bg-border-strong text-text-inverse",
+    default: "bg-hairline-strong text-text-inverse",
     primary: "bg-brand-primary text-text-inverse",
     secondary: "bg-brand-secondary text-text-inverse",
     success: "bg-status-success text-text-inverse",
@@ -6726,7 +6558,7 @@ var variantColorStyles = {
     info: "bg-status-info-subtle text-status-info"
   },
   outline: {
-    default: "border border-border-strong text-text-secondary",
+    default: "border border-hairline-strong text-text-secondary",
     primary: "border border-brand-primary text-brand-primary",
     secondary: "border border-brand-secondary text-brand-secondary",
     success: "border border-status-success text-status-success",
@@ -6774,6 +6606,7 @@ function Badge({
     }
   );
 }
+var HAIRLINE_DEFAULT = getSemanticColors("dark")["hairline-default"];
 var t8 = getSemanticColors("dark");
 var statusBgColors = {
   completed: "rgba(46,213,115,0.15)",
@@ -6787,7 +6620,7 @@ var statusBorderStyles = {
   completed: { borderWidth: 1, borderColor: "rgba(46,213,115,0.3)" },
   current: { borderWidth: 1, borderColor: "rgba(255,121,0,0.3)" },
   next: { borderWidth: 1, borderColor: "rgba(255,121,0,0.4)" },
-  upcoming: { borderWidth: 1, borderColor: "#1F1F1F" },
+  upcoming: { borderWidth: 1, borderColor: HAIRLINE_DEFAULT },
   missed: { borderWidth: 1, borderColor: "rgba(209,67,67,0.25)" },
   deload: { borderWidth: 1, borderColor: "rgba(186,41,150,0.3)" }
 };
@@ -6795,7 +6628,7 @@ var textColors = {
   completed: t8["status-success"],
   current: t8["brand-primary"],
   next: t8["brand-primary"],
-  upcoming: "#6B7280",
+  upcoming: greyRamp[500],
   missed: "rgba(209,67,67,0.7)",
   deload: WORKOUT_PILL_DELOAD
 };
@@ -7206,10 +7039,11 @@ function WeekRow({
 }
 
 // src/components/custom/Workout/MesoCard.tsx
+var HAIRLINE_DEFAULT2 = getSemanticColors("dark")["hairline-default"];
 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 BORDER_DEFAULT = HAIRLINE_DEFAULT2;
 var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY10, BRAND_PRIMARY_LIGHT2];
 function heatmapColor(percentage) {
   const clamped = Math.max(0, Math.min(100, percentage));
@@ -7364,7 +7198,7 @@ function MesoCard({
 }
 var t10 = getSemanticColors("dark");
 var dotColorMap = {
-  untrained: "#2C2C2C",
+  untrained: greyRamp[900],
   behind: t10["brand-secondary"],
   ontrack: t10["status-success"],
   target: t10["brand-primary"],
@@ -7377,12 +7211,12 @@ function MuscleGroupChip({
   className,
   ...props
 }) {
-  const dotColor = volumeStatus ? dotColorMap[volumeStatus] : "#2C2C2C";
+  const dotColor = volumeStatus ? dotColorMap[volumeStatus] : greyRamp[900];
   const statusLabel = volumeStatus ?? "no status";
   const content = /* @__PURE__ */ jsxs(
     View,
     {
-      className: ["bg-surface-raised border-border", className].filter(Boolean).join(" "),
+      className: ["bg-surface-raised border-hairline", className].filter(Boolean).join(" "),
       style: {
         flexDirection: "row",
         alignItems: "center",
@@ -7442,11 +7276,12 @@ function MuscleGroupChip({
 }
 
 // src/components/custom/Workout/WorkoutCard.tsx
+var HAIRLINE_DEFAULT3 = getSemanticColors("dark")["hairline-default"];
 var t11 = getSemanticColors("dark");
 var COLORS = {
   statusSuccess: t11["status-success"],
   brandPrimary: t11["brand-primary"],
-  borderDefault: "#1F1F1F",
+  borderDefault: HAIRLINE_DEFAULT3,
   brandPrimarySubtle: "rgba(255,121,0,0.06)"
 };
 var statusBorderColors = {
@@ -7825,7 +7660,7 @@ function ProgramPlanningPage({
         /* @__PURE__ */ jsxs(
           View,
           {
-            className: "bg-surface-elevated border-border",
+            className: "bg-surface-elevated border-hairline",
             style: {
               borderWidth: 1,
               borderRadius: 12,