@titan-design/react-ui 0.10.0 → 0.12.0

package/dist/bodymap.mjs

@@ -12,52 +12,37 @@ function cn(...inputs) {
 
 // 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: {
-    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",
@@ -94,9 +79,11 @@ var primitiveRamps = {
   blue: {
     50: "#EFF8FF",
     300: "#78C2FF",
+    400: "#3CA8FF",
     500: "#2196F3",
     // pin
-    600: "#1072CB"}};
+    600: "#1072CB",
+    700: "#135AA8"}};
 var divergingScale = [
   primitiveRamps.blue[500],
   // under
@@ -171,10 +158,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],
@@ -201,7 +188,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,
@@ -232,47 +219,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.
@@ -289,7 +267,7 @@ var semanticColorsLight = {
   // Divider
   "divider": "#E8E9EB",
   // Avatar default
-  "avatar-background": primitiveColors.neutral[500],
+  "avatar-background": greyRamp[600],
   "avatar-text": primitiveColors.white
 };
 var semanticColorsDark = {
@@ -321,9 +299,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],
@@ -347,7 +325,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,
@@ -364,74 +342,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)",
@@ -440,10 +450,9 @@ 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) {
@@ -857,7 +866,7 @@ function ViewToggle({ view, onViewChange }) {
               borderRadius: 9999,
               backgroundColor: active ? "rgba(255,121,0,0.16)" : "transparent",
               borderWidth: 1,
-              borderColor: active ? BRAND_PRIMARY : resolveColor("border-strong")
+              borderColor: active ? BRAND_PRIMARY : resolveColor("hairline-strong")
             },
             testID: `body-map-toggle-${side}`,
             children: /* @__PURE__ */ jsx(
@@ -899,7 +908,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }) {
         paddingVertical: 3,
         borderRadius: 9999,
         borderWidth: 1,
-        borderColor: highlighted ? BRAND_PRIMARY : resolveColor("border-default")
+        borderColor: highlighted ? BRAND_PRIMARY : resolveColor("hairline-default")
       },
       testID: `body-map-muscle-${entry.key}`,
       children: [
@@ -1011,7 +1020,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",
@@ -1029,7 +1038,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",
@@ -1353,7 +1362,7 @@ function BodyMapDetailPanel({
                   children: /* @__PURE__ */ jsx(
                     View,
                     {
-                      className: "bg-border-strong",
+                      className: "bg-hairline-strong",
                       style: { width: 40, height: 4, borderRadius: 2 },
                       accessibilityElementsHidden: true
                     }
@@ -1536,7 +1545,7 @@ function BodyMapDetailPanel({
                       contributingExercises.map((exercise, index) => /* @__PURE__ */ jsxs(
                         View,
                         {
-                          className: "flex-row items-center justify-between bg-surface-raised border-border",
+                          className: "flex-row items-center justify-between bg-surface-raised border-hairline",
                           style: {
                             gap: 10,
                             paddingVertical: 8,
@@ -1643,6 +1652,8 @@ function BodyMapDetailPanel({
     }
   );
 }
+
+// src/theme/color-utils.ts
 function hexToRgb(hex) {
   const cleaned = hex.replace("#", "");
   let r, g, b;
@@ -1732,194 +1743,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()
-  }
-});
 var elevationSystem = {
   // Deep inset (recessed input fields, deeply pressed buttons)
   [-2]: {
@@ -1948,7 +1771,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)"
@@ -1956,7 +1785,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)"
@@ -1964,7 +1793,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)"
@@ -1972,7 +1801,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)"
@@ -1980,7 +1809,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)"
@@ -2096,12 +1925,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) {
@@ -2157,12 +1986,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);
@@ -2248,12 +2078,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",
@@ -2373,7 +2203,7 @@ var solidVariantColors = {
   success: t2["status-success"],
   warning: t2["status-warning"],
   error: t2["status-error"],
-  neutral: "#6B7280"
+  neutral: greyRamp[500]
 };
 var ringVariantStyles = {
   "on-track": {
@@ -2411,10 +2241,10 @@ var iconColors = {
   success: "#0A5C52",
   warning: "#6B4000",
   error: "#5C1A1A",
-  neutral: "#D1D5DB",
+  neutral: greyRamp[200],
   "on-track": t2["status-success"],
   deviation: t2["status-warning"],
-  future: "#6B7280"
+  future: greyRamp[500]
 };
 var sizeDimensions = {
   sm: { size: 8, showIcon: false },
@@ -2483,7 +2313,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
             }
@@ -2898,7 +2728,7 @@ function SummaryCards({ summary }) {
     return /* @__PURE__ */ jsxs(
       View,
       {
-        className: "bg-surface-elevated border-border",
+        className: "bg-surface-elevated border-hairline",
         style: {
           flexGrow: 1,
           flexBasis: "46%",
@@ -3039,7 +2869,7 @@ function TrainingStatusPage({
           /* @__PURE__ */ jsxs(
             View,
             {
-              className: "bg-surface-elevated border-border",
+              className: "bg-surface-elevated border-hairline",
               style: {
                 borderWidth: 1,
                 borderRadius: 12,