@titan-design/react-ui 0.11.0 → 0.12.1

package/dist/index.mjs

@@ -261,93 +261,50 @@ function AlertDescription({ children, className }) {
 
 // src/theme/tokens/primitives.ts
 var primitiveColors = {
-  // Blue scale
-  blue: {
-    50: "#EFF6FF",
-    100: "#DBEAFE",
-    200: "#BFDBFE",
-    300: "#93C5FD",
-    400: "#60A5FA",
-    500: "#3B82F6",
-    600: "#5048E5",
-    700: "#3832A0",
-    800: "#1E40AF",
-    900: "#1E3A8A"
-  },
-  // Red scale
-  red: {
-    50: "#FEF2F2",
-    100: "#FEE2E2",
-    200: "#FECACA",
-    300: "#FCA5A5",
-    400: "#DA6868",
-    500: "#EF4444",
-    600: "#D14343",
-    700: "#922E2E",
-    800: "#991B1B",
-    900: "#7F1D1D"
-  },
-  // Vivid red scale
-  redVivid: {
-    50: "#FFECEE",
-    100: "#FFD6DB",
-    200: "#FFB3BC",
-    300: "#FF8593",
-    400: "#FF6070",
-    500: "#FF4757",
-    600: "#E63548",
-    700: "#C42539",
-    800: "#9E1C2C",
-    900: "#7A1520"
-  },
-  // Neutral/Gray scale
-  neutral: {
-    50: "#FAFAFA",
-    100: "#F3F4F6",
-    200: "#E5E7EB",
-    300: "#D1D5DB",
-    400: "#9CA3AF",
-    500: "#6B7280",
-    600: "#4B5563",
-    700: "#374151",
-    800: "#1F2937",
-    900: "#111827",
-    950: "#030712"
-  },
-  // Charcoal scale (dark backgrounds)
-  charcoal: {
-    0: "#6E6E6E",
-    50: "#5D5D5D",
-    100: "#4C4C4C",
-    200: "#3C3C3C",
-    300: "#2C2C2C",
-    400: "#1F1F1F",
-    500: "#1C1C1C",
-    600: "#191919",
-    700: "#161616",
-    800: "#131313",
-    900: "#101010"
-  },
-  // Pure colors
   white: "#FFFFFF",
   black: "#000000",
   transparent: "transparent"
 };
-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 backgroundFrameDark = "#100D0A";
+var greyRamp = {
+  50: "#F9F6F3",
+  //  L*97.0  W6
+  100: "#EDEAE7",
+  // L*92.8  W6
+  200: "#D4D1CE",
+  // L*84.0  W6  — warm silver
+  300: "#BDBAB7",
+  // 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 SURFACE_PLANE_STEPS = {
+  frame: 975,
+  background: 950,
+  base: 925,
+  elevated: 900,
+  raised: 875,
+  overlay: 850
+};
 var primitiveRamps = {
   red: {
     50: "#FFF4F4",
@@ -498,8 +455,8 @@ var sequentialEffort = [
 ];
 function bestTextColor(hex) {
   const [r, g, b] = [0, 2, 4].map((i) => {
-    const c = parseInt(hex.replace("#", "").slice(i, i + 2), 16) / 255;
-    return c >= 0.04045 ? ((c + 0.055) / 1.055) ** 2.4 : c / 12.92;
+    const c2 = parseInt(hex.replace("#", "").slice(i, i + 2), 16) / 255;
+    return c2 >= 0.04045 ? ((c2 + 0.055) / 1.055) ** 2.4 : c2 / 12.92;
   });
   const l = 0.2126 * r + 0.7152 * g + 0.0722 * b;
   return (l + 0.05) / 0.05 >= 1.05 / (l + 0.05) ? "#000000" : "#FFFFFF";
@@ -675,16 +632,6 @@ var primitiveBorderRadius = {
   "2xl": "24px",
   full: "9999px"
 };
-var primitiveShadows = {
-  none: "none",
-  sm: "0px 1px 2px rgba(100, 116, 139, 0.12)",
-  DEFAULT: "0px 1px 3px rgba(100, 116, 139, 0.12), 0px 1px 2px rgba(100, 116, 139, 0.24)",
-  md: "0px 4px 6px rgba(100, 116, 139, 0.12)",
-  lg: "0px 10px 15px rgba(100, 116, 139, 0.12)",
-  xl: "0px 20px 25px rgba(100, 116, 139, 0.12)",
-  "2xl": "0px 25px 50px rgba(100, 116, 139, 0.25)",
-  inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
-};
 var primitiveBreakpoints = {
   xs: 0,
   sm: 600,
@@ -740,10 +687,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],
@@ -770,7 +717,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,
@@ -801,47 +748,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.
@@ -858,7 +796,7 @@ var semanticColorsLight = {
   // Divider
   "divider": "#E8E9EB",
   // Avatar default
-  "avatar-background": primitiveColors.neutral[500],
+  "avatar-background": greyRamp[600],
   "avatar-text": primitiveColors.white
 };
 var semanticColorsDark = {
@@ -890,9 +828,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],
@@ -916,7 +854,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,
@@ -933,74 +871,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)",
@@ -1009,10 +979,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
 };
 var semanticTypography = {
@@ -1530,14 +1499,10 @@ var lightThemeCSSVars = {
   "--color-surface-base": semanticColorsLight["surface-base"],
   "--color-surface-elevated": semanticColorsLight["surface-elevated"],
   "--color-surface-raised": semanticColorsLight["surface-raised"],
-  "--color-surface-inset": semanticColorsLight["surface-inset"],
   "--color-background-base": semanticColorsLight["background-base"],
   "--color-background-default": semanticColorsLight["background-default"],
   "--color-background-subtle": semanticColorsLight["background-subtle"],
   "--color-background-frame": semanticColorsLight["background-frame"],
-  "--color-border-default": semanticColorsLight["border-default"],
-  "--color-border-subtle": semanticColorsLight["border-subtle"],
-  "--color-border-strong": semanticColorsLight["border-strong"],
   "--color-border-prominent": semanticColorsLight["border-prominent"],
   "--color-border-focus": semanticColorsLight["border-focus"],
   "--color-interactive-hover": semanticColorsLight["interactive-hover"],
@@ -1633,14 +1598,10 @@ var darkThemeCSSVars = {
   "--color-surface-base": semanticColorsDark["surface-base"],
   "--color-surface-elevated": semanticColorsDark["surface-elevated"],
   "--color-surface-raised": semanticColorsDark["surface-raised"],
-  "--color-surface-inset": semanticColorsDark["surface-inset"],
   "--color-background-base": semanticColorsDark["background-base"],
   "--color-background-default": semanticColorsDark["background-default"],
   "--color-background-subtle": semanticColorsDark["background-subtle"],
   "--color-background-frame": semanticColorsDark["background-frame"],
-  "--color-border-default": semanticColorsDark["border-default"],
-  "--color-border-subtle": semanticColorsDark["border-subtle"],
-  "--color-border-strong": semanticColorsDark["border-strong"],
   "--color-border-prominent": semanticColorsDark["border-prominent"],
   "--color-border-focus": semanticColorsDark["border-focus"],
   "--color-interactive-hover": semanticColorsDark["interactive-hover"],
@@ -1773,6 +1734,54 @@ var gluestackConfig = {
     rounded: "borderRadius"
   }
 };
+
+// src/theme/materials.ts
+var c = getSemanticColors("dark");
+function parseHex(hex) {
+  const h = hex.replace("#", "");
+  const full = h.length === 3 ? h.split("").map((ch) => ch + ch).join("") : h;
+  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 paperSheet(tone = c["surface-raised"]) {
+  return {
+    backgroundColor: tone,
+    // Grain alone. The dither went with the gradient it protected — see header.
+    backgroundImage: grainForTone(tone),
+    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.20), 0 8px 22px rgba(0,0,0,0.50)"
+  };
+}
+function insetWell(tone = c["surface-input"]) {
+  return {
+    backgroundColor: tone,
+    boxShadow: "inset 0 2px 6px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,255,255,0.12)"
+  };
+}
+function barPaper(color, flip = false) {
+  return {
+    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)"
+  };
+}
+
+// src/theme/color-utils.ts
 function hexToRgb(hex) {
   const cleaned = hex.replace("#", "");
   let r, g, b;
@@ -1812,32 +1821,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;
   }
@@ -1890,194 +1899,6 @@ function isDark(hex) {
   const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
   return hsv.v < 0.6;
 }
-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
-    }
-  });
-}
-var neumorphicShadows = {
-  // 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]: {
@@ -2106,7 +1927,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)"
@@ -2114,7 +1941,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)"
@@ -2122,7 +1949,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)"
@@ -2130,7 +1957,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)"
@@ -2138,7 +1965,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)"
@@ -2257,12 +2084,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) {
@@ -2318,12 +2145,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);
@@ -2593,7 +2421,7 @@ var audiobookPreset = {
       "text-primary": "#f4f3f1",
       "text-secondary": "#b5b3af",
       "text-tertiary": "#7a7875",
-      // Surfaces: warm charcoals (not pure gray)
+      // Surfaces: warm greys (not pure gray)
       "surface-base": "#101114",
       "surface-elevated": "#15171c",
       "surface-raised": "#1a1d24",
@@ -2604,9 +2432,9 @@ var audiobookPreset = {
       "background-default": "#101114",
       "background-subtle": "#1a1d24",
       // Borders
-      "border-default": "rgba(255, 255, 255, 0.06)",
-      "border-subtle": "rgba(255, 255, 255, 0.03)",
-      "border-strong": "#2d323d",
+      "hairline-default": "rgba(255, 255, 255, 0.06)",
+      "hairline-subtle": "rgba(255, 255, 255, 0.03)",
+      "hairline-strong": "#2d323d",
       "border-focus": "#d4782a",
       "border-input": "#2d323d",
       "border-input-hover": "#454c5c",
@@ -2631,13 +2459,14 @@ var audiobookPreset = {
   rootClasses: ["atmosphere-warm", "grain"]
 };
 var SURFACE_LEVEL_TOKEN = {
+  frame: "background-frame",
   background: "background-base",
   base: "surface-base",
   elevated: "surface-elevated",
   raised: "surface-raised",
   overlay: "surface-overlay"
 };
-var PRESSED_RAMP = ["inset", "background", "base", "elevated", "raised", "overlay"];
+var PRESSED_RAMP = ["frame", "background", "base", "elevated", "raised", "overlay"];
 var ON_SURFACE_TOKEN = {
   primary: "text-primary",
   secondary: "text-secondary",
@@ -2652,22 +2481,17 @@ function useSurfaceMode() {
   return useContext(SurfaceContext).mode;
 }
 function onSurfaceColors(mode) {
-  const c = getSemanticColors(mode);
+  const c2 = getSemanticColors(mode);
   return {
-    primary: c[ON_SURFACE_TOKEN.primary],
-    secondary: c[ON_SURFACE_TOKEN.secondary],
-    tertiary: c[ON_SURFACE_TOKEN.tertiary]
+    primary: c2[ON_SURFACE_TOKEN.primary],
+    secondary: c2[ON_SURFACE_TOKEN.secondary],
+    tertiary: c2[ON_SURFACE_TOKEN.tertiary]
   };
 }
 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]];
 }
 function pressedLevel(parent) {
@@ -2718,12 +2542,12 @@ function useTheme() {
 var variantStyles3 = {
   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",
@@ -2958,7 +2782,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",
@@ -2976,7 +2800,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",
@@ -3122,7 +2946,7 @@ function Avatar({
       accessibilityLabel: alt || resolvedFallback || "Avatar",
       className: cn(
         "items-center justify-center rounded-full overflow-hidden",
-        !nameColor && "bg-border-strong",
+        !nameColor && "bg-hairline-strong",
         styles2.container,
         className
       ),
@@ -3143,7 +2967,7 @@ var badgeColors = {
   success: "bg-status-success",
   error: "bg-status-error",
   warning: "bg-status-warning",
-  default: "bg-border-strong"
+  default: "bg-hairline-strong"
 };
 function AvatarBadge({ color = "success", className }) {
   return /* @__PURE__ */ jsx(
@@ -3261,7 +3085,7 @@ var Checkbox = forwardRef(function Checkbox2({
             className: cn(
               "items-center justify-center rounded border-2 transition-colors",
               styles2.box,
-              isChecked || isIndeterminate ? "bg-brand-primary border-brand-primary" : "bg-transparent border-border",
+              isChecked || isIndeterminate ? "bg-brand-primary border-brand-primary" : "bg-transparent border-hairline",
               isInvalid && "border-status-error",
               !isDisabled && "web:hover:border-brand-primary"
             ),
@@ -3325,7 +3149,7 @@ var Switch = forwardRef(function Switch2({
       className: cn(
         "rounded-full p-0.5 transition-colors",
         styles2.track,
-        isChecked ? "bg-brand-primary" : "bg-border-strong"
+        isChecked ? "bg-brand-primary" : "bg-hairline-strong"
       ),
       children: /* @__PURE__ */ jsx(
         View,
@@ -3645,7 +3469,7 @@ function Tabs({
 function TabList({ children, className }) {
   const { variant, orientation } = useContext(TabsContext);
   const variantStyles5 = {
-    line: orientation === "horizontal" ? "border-b border-border" : "border-r border-border",
+    line: orientation === "horizontal" ? "border-b border-hairline" : "border-r border-hairline",
     enclosed: "bg-surface-raised rounded-lg p-1",
     "soft-rounded": "bg-surface-raised rounded-full p-1"
   };
@@ -4131,7 +3955,7 @@ function Accordion({
       return newSet;
     });
   };
-  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { openIndices, toggleIndex, allowMultiple }, children: /* @__PURE__ */ jsx(View, { className: cn("w-full divide-y divide-border", className), ...props, children: React25.Children.map(children, (child, index) => {
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { openIndices, toggleIndex, allowMultiple }, children: /* @__PURE__ */ jsx(View, { className: cn("w-full divide-y divide-hairline", className), ...props, children: React25.Children.map(children, (child, index) => {
     if (React25.isValidElement(child)) {
       return React25.cloneElement(child, { index });
     }
@@ -4361,7 +4185,7 @@ function PopoverContent({ children, className }) {
       {
         className: cn(
           "absolute z-50 min-w-[200px]",
-          "bg-surface-elevated rounded-lg shadow-lg border border-border",
+          "bg-surface-elevated rounded-lg shadow-lg border border-hairline",
           "p-4",
           placementStyles3[placement],
           className
@@ -4455,7 +4279,7 @@ function MenuList({ children, className }) {
       {
         className: cn(
           "absolute z-50 top-full left-0 mt-1 min-w-[160px]",
-          "bg-surface-elevated rounded-lg shadow-lg border border-border",
+          "bg-surface-elevated rounded-lg shadow-lg border border-hairline",
           "py-1 overflow-hidden",
           className
         ),
@@ -4509,7 +4333,7 @@ function MenuItem({
   );
 }
 function MenuDivider({ className }) {
-  return /* @__PURE__ */ jsx(View, { className: cn("h-px bg-border my-1", className) });
+  return /* @__PURE__ */ jsx(View, { className: cn("h-px bg-hairline my-1", className) });
 }
 function MenuGroup({ label, children, className }) {
   return /* @__PURE__ */ jsxs(View, { className, children: [
@@ -4587,7 +4411,7 @@ function Select({
         className: cn(
           "flex-row items-center justify-between px-4 py-2.5 rounded-md border",
           variant === "filled" ? "bg-black/30" : "bg-surface-base",
-          isInvalid ? "border-border-input-error" : variant === "filled" ? "border-border-subtle" : "border-border-input",
+          isInvalid ? "border-border-input-error" : variant === "filled" ? "border-hairline-subtle" : "border-border-input",
           !isDisabled && !isInvalid && "web:hover:border-border-input-hover",
           isOpen && "border-border-input-focus",
           isDisabled && "opacity-50 cursor-not-allowed"
@@ -4634,7 +4458,7 @@ function Select({
         {
           className: cn(
             "absolute z-50 top-full left-0 right-0 mt-1",
-            "bg-surface-elevated rounded-md shadow-lg border border-border",
+            "bg-surface-elevated rounded-md shadow-lg border border-hairline",
             "max-h-60 overflow-hidden"
           ),
           children: /* @__PURE__ */ jsx(ScrollView, { className: "py-1", children: options.map((option) => /* @__PURE__ */ jsx(SelectOption, { option }, option.value)) })
@@ -4665,7 +4489,7 @@ function SelectOption({ option }) {
           {
             className: cn(
               "w-4 h-4 mr-3 rounded border",
-              selected ? "bg-brand-primary border-brand-primary" : "border-border-strong"
+              selected ? "bg-brand-primary border-brand-primary" : "border-hairline-strong"
             ),
             children: selected && /* @__PURE__ */ jsx(Text, { className: "text-white text-xs text-center", children: "\u2713" })
           }
@@ -4680,8 +4504,11 @@ var ToolbarButtonContext = createContext({
   setIsOpen: () => {
   }
 });
-var BUTTON_BG = "#3C3C3C";
-var MENU_BG = "#2C2C2C";
+var SEMANTIC = getSemanticColors("dark");
+var BUTTON_BG = greyRamp[800];
+var MENU_BG = greyRamp[900];
+var EDGE = { borderWidth: 1, borderColor: SEMANTIC["hairline-default"] };
+var EDGE_PRESSED = { borderWidth: 1, borderColor: SEMANTIC["hairline-strong"] };
 var hoverColors = getHoverColors(BUTTON_BG, "medium");
 var sizeStyles10 = {
   sm: "px-2 py-1 min-h-[26px]",
@@ -4699,7 +4526,7 @@ function ToolbarButton({
   isActive,
   isDisabled = false,
   size = "md",
-  variant = "neumorphic",
+  variant = "raised",
   tooltip,
   showLabel = true,
   onPress,
@@ -4726,22 +4553,20 @@ function ToolbarButton({
     if (isActive === true) return resolveColor("brand-primary");
     return showActive ? "#FFFFFF" : "#D1D1D1";
   };
-  const getNeumorphicStyle = () => {
+  const getRaisedStyle = () => {
     if (isDisabled) {
       return styles.disabledBg;
     }
-    const shadows = neumorphicShadows.charcoal;
     if (showActive) {
       return {
-        backgroundColor: isHovered ? hoverColors.pressed : BUTTON_BG,
-        ...isHovered ? shadows.pressedHover.subtle : shadows.pressed.subtle
-      };
-    } else {
-      return {
-        backgroundColor: isHovered ? hoverColors.raised : BUTTON_BG,
-        ...isHovered ? shadows.raisedHover.subtle : shadows.raised.subtle
+        backgroundColor: isHovered ? hoverColors.pressed : greyRamp[900],
+        ...EDGE_PRESSED
       };
     }
+    return {
+      backgroundColor: isHovered ? hoverColors.raised : BUTTON_BG,
+      ...EDGE
+    };
   };
   return /* @__PURE__ */ jsx(ToolbarButtonContext.Provider, { value: { isOpen, setIsOpen }, children: /* @__PURE__ */ jsxs(View, { className: "relative", ...props, children: [
     /* @__PURE__ */ jsxs(
@@ -4766,9 +4591,9 @@ function ToolbarButton({
           className
         ),
         style: [
-          variant === "neumorphic" && getNeumorphicStyle(),
+          variant === "raised" && getRaisedStyle(),
           variant === "default" && {
-            backgroundColor: showActive ? BUTTON_BG : "#6E6E6E"
+            backgroundColor: showActive ? BUTTON_BG : greyRamp[600]
           }
         ],
         children: [
@@ -4813,7 +4638,7 @@ function ToolbarButton({
         {
           className: cn(
             "absolute z-50 top-full left-0 mt-1",
-            "rounded-lg shadow-lg border border-border",
+            "rounded-lg shadow-lg border border-hairline",
             "min-w-[150px] overflow-hidden",
             `bg-[${MENU_BG}]`
           ),
@@ -4912,10 +4737,10 @@ var sizeConfig = {
   lg: { outer: "w-6 h-6", inner: "w-3 h-3", text: "text-lg" }
 };
 var colorStyles4 = {
-  primary: { checked: "border-brand-primary bg-brand-primary", unchecked: "border-border-strong" },
-  secondary: { checked: "border-brand-secondary bg-brand-secondary", unchecked: "border-border-strong" },
-  success: { checked: "border-status-success bg-status-success", unchecked: "border-border-strong" },
-  error: { checked: "border-status-error bg-status-error", unchecked: "border-border-strong" }
+  primary: { checked: "border-brand-primary bg-brand-primary", unchecked: "border-hairline-strong" },
+  secondary: { checked: "border-brand-secondary bg-brand-secondary", unchecked: "border-hairline-strong" },
+  success: { checked: "border-status-success bg-status-success", unchecked: "border-hairline-strong" },
+  error: { checked: "border-status-error bg-status-error", unchecked: "border-hairline-strong" }
 };
 function Radio({
   value,
@@ -5055,7 +4880,7 @@ function Drawer({
             accessibilityRole: "dialog",
             ...props,
             children: [
-              (title || showCloseButton) && /* @__PURE__ */ jsxs(View, { className: "flex-row items-center justify-between px-4 py-3 border-b border-border", children: [
+              (title || showCloseButton) && /* @__PURE__ */ jsxs(View, { className: "flex-row items-center justify-between px-4 py-3 border-b border-hairline", children: [
                 title && /* @__PURE__ */ jsx(Text, { className: "text-lg font-semibold text-text-primary", children: title }),
                 showCloseButton && /* @__PURE__ */ jsx(
                   Pressable,
@@ -5079,7 +4904,7 @@ function DrawerHeader({ className, children, ...props }) {
   return /* @__PURE__ */ jsx(
     View,
     {
-      className: cn("px-4 py-3 border-b border-border", className),
+      className: cn("px-4 py-3 border-b border-hairline", className),
       ...props,
       children
     }
@@ -5104,7 +4929,7 @@ function DrawerFooter({ className, children, ...props }) {
     {
       className: cn(
         "flex-row items-center justify-end gap-3",
-        "px-4 py-3 border-t border-border",
+        "px-4 py-3 border-t border-hairline",
         className
       ),
       ...props,
@@ -5243,7 +5068,7 @@ function CircularProgress({
                   cy: center,
                   r: radius,
                   fill: "none",
-                  stroke: "var(--color-border-default)",
+                  stroke: "var(--color-hairline-default)",
                   strokeWidth
                 }
               ),
@@ -5312,7 +5137,7 @@ function ProgressSteps({
           className: cn(
             "rounded-full",
             dot,
-            index <= currentStep ? colorStyles5[color] : "bg-border-strong"
+            index <= currentStep ? colorStyles5[color] : "bg-hairline-strong"
           )
         }
       ),
@@ -5322,7 +5147,7 @@ function ProgressSteps({
           className: cn(
             "flex-1 mx-1",
             connector,
-            index < currentStep ? colorStyles5[color] : "bg-border-strong"
+            index < currentStep ? colorStyles5[color] : "bg-hairline-strong"
           )
         }
       )
@@ -5656,7 +5481,7 @@ function Autocomplete({
         {
           className: cn(
             "absolute z-50 top-full left-0 right-0 mt-1",
-            "bg-surface-elevated rounded-md shadow-lg border border-border",
+            "bg-surface-elevated rounded-md shadow-lg border border-hairline",
             "max-h-60 overflow-hidden"
           ),
           children: /* @__PURE__ */ jsxs(ScrollView, { className: "py-1", children: [
@@ -5809,7 +5634,7 @@ function HelpTip({
         className: cn(
           "absolute z-50",
           "bg-surface-elevated rounded-lg shadow-lg",
-          "border border-border",
+          "border border-hairline",
           "px-3 py-2",
           placementStyles2[placement],
           tooltipClassName
@@ -5985,7 +5810,7 @@ function FormActions({
     {
       className: cn(
         "flex-row items-center gap-3 pt-4",
-        "border-t border-border mt-4",
+        "border-t border-hairline mt-4",
         alignStyles[align],
         className
       ),
@@ -6204,7 +6029,7 @@ function ListItemDivider({ inset = true, className, ...props }) {
 }
 var variantColorStyles2 = {
   subtle: {
-    default: "bg-surface-raised border-border-subtle text-text-secondary",
+    default: "bg-surface-raised border-hairline-subtle text-text-secondary",
     primary: "bg-brand-primary/10 border-brand-primary/25 text-brand-primary",
     secondary: "bg-brand-secondary/10 border-brand-secondary/25 text-brand-secondary",
     success: "bg-status-success/10 border-status-success/25 text-status-success",
@@ -6213,7 +6038,7 @@ var variantColorStyles2 = {
     info: "bg-status-info/10 border-status-info/25 text-status-info"
   },
   outline: {
-    default: "border-border text-text-secondary",
+    default: "border-hairline text-text-secondary",
     primary: "border-brand-primary text-brand-primary",
     secondary: "border-brand-secondary text-brand-secondary",
     success: "border-status-success text-status-success",
@@ -6424,7 +6249,7 @@ function Sidebar({
     {
       style: { width: currentWidth },
       className: cn(
-        "h-full flex-col bg-surface-base border-r border-border transition-all duration-200",
+        "h-full flex-col bg-surface-base border-r border-hairline transition-all duration-200",
         className
       ),
       ...props,
@@ -6433,7 +6258,7 @@ function Sidebar({
   ) });
 }
 function SidebarHeader({ children, className }) {
-  return /* @__PURE__ */ jsx(View, { className: cn("px-4 py-4 border-b border-border-subtle", className), children });
+  return /* @__PURE__ */ jsx(View, { className: cn("px-4 py-4 border-b border-hairline-subtle", className), children });
 }
 function SidebarContent({ children, className }) {
   return /* @__PURE__ */ jsx(
@@ -6446,7 +6271,7 @@ function SidebarContent({ children, className }) {
   );
 }
 function SidebarFooter({ children, className }) {
-  return /* @__PURE__ */ jsx(View, { className: cn("px-2 py-4 border-t border-border-subtle", className), children });
+  return /* @__PURE__ */ jsx(View, { className: cn("px-2 py-4 border-t border-hairline-subtle", className), children });
 }
 function SidebarSection({ title, children, className }) {
   const { isCollapsed } = useContext(SidebarContext);
@@ -6516,7 +6341,7 @@ function SidebarItem({
   );
 }
 function SidebarDivider({ className }) {
-  return /* @__PURE__ */ jsx(View, { className: cn("h-px mx-4 my-2 bg-border-subtle", className) });
+  return /* @__PURE__ */ jsx(View, { className: cn("h-px mx-4 my-2 bg-hairline-subtle", className) });
 }
 var TableContext = createContext({
   sortDirection: null,
@@ -6913,7 +6738,7 @@ function StepConnector({ index }) {
       {
         className: cn(
           "flex-1 h-0.5 mx-2",
-          isCompleted ? "bg-brand-primary" : "bg-border"
+          isCompleted ? "bg-brand-primary" : "bg-hairline"
         )
       }
     );
@@ -6923,7 +6748,7 @@ function StepConnector({ index }) {
     {
       className: cn(
         "w-0.5 h-8 ml-4 my-1",
-        isCompleted ? "bg-brand-primary" : "bg-border"
+        isCompleted ? "bg-brand-primary" : "bg-hairline"
       )
     }
   );
@@ -6959,7 +6784,7 @@ function StepIndicator({
   const statusStyles2 = {
     completed: "bg-brand-primary border-brand-primary",
     active: "bg-brand-primary border-brand-primary",
-    upcoming: "bg-surface-base border-border-strong",
+    upcoming: "bg-surface-base border-hairline-strong",
     error: "bg-status-error border-status-error"
   };
   return /* @__PURE__ */ jsx(
@@ -7357,7 +7182,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)"
@@ -7441,7 +7266,7 @@ function WeightBadge({
   ...props
 }) {
   const config = baseBadgeSizeConfig[size];
-  const textColor = isPr ? getSemanticColors("dark")["brand-primary"] : "#9CA3AF";
+  const textColor = isPr ? getSemanticColors("dark")["brand-primary"] : greyRamp[400];
   const iconColor = textColor;
   const repMaxClause = reps != null ? `${reps} rep max` : "Estimated one rep max";
   const deltaLabel = delta != null ? `, ${delta >= 0 ? "+" : ""}${delta}% change` : "";
@@ -7602,7 +7427,7 @@ var solidVariantColors = {
   success: t2["status-success"],
   warning: t2["status-warning"],
   error: t2["status-error"],
-  neutral: "#6B7280"
+  neutral: greyRamp[500]
 };
 var ringVariantStyles = {
   "on-track": {
@@ -7640,10 +7465,10 @@ var iconColors2 = {
   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 },
@@ -7712,7 +7537,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
             }
@@ -8044,7 +7869,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) });
@@ -8257,7 +8082,7 @@ var t4 = getSemanticColors("dark");
 function getDotColor(deviation) {
   const abs = Math.abs(deviation);
   if (deviation < -0.3) return t4["status-success"];
-  if (abs <= 0.3) return "#6B7280";
+  if (abs <= 0.3) return greyRamp[500];
   if (abs <= 0.7) return t4["status-warning"];
   return t4["status-error"];
 }
@@ -8314,7 +8139,7 @@ function DeviationBar({
               height: dotSize,
               borderRadius: 9999,
               borderWidth: 1.5,
-              borderColor: "#F3F4F6",
+              borderColor: greyRamp[50],
               boxShadow: "0 0 4px rgba(0,0,0,0.5)",
               backgroundColor: getDotColor(clamped),
               left: Math.max(0, Math.min(dotPosition - dotSize / 2, resolvedWidth - dotSize)),
@@ -8508,6 +8333,7 @@ var MESO_ACCENT_GRADIENT_LIGHT = primitiveRamps.orange[300];
 var WORKOUT_PILL_DELOAD = primitiveRamps.magenta[600];
 
 // src/components/custom/Workout/WorkoutPill.tsx
+var HAIRLINE_DEFAULT = getSemanticColors("dark")["hairline-default"];
 var t6 = getSemanticColors("dark");
 var statusBgColors = {
   completed: "rgba(46,213,115,0.15)",
@@ -8521,7 +8347,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)" }
 };
@@ -8529,7 +8355,7 @@ var textColors = {
   completed: t6["status-success"],
   current: t6["brand-primary"],
   next: t6["brand-primary"],
-  upcoming: "#6B7280",
+  upcoming: greyRamp[500],
   missed: "rgba(209,67,67,0.7)",
   deload: WORKOUT_PILL_DELOAD
 };
@@ -8661,28 +8487,6 @@ function WorkoutPill({
   }
   return pill;
 }
-
-// src/theme/bar-paper.ts
-function grainOpacityForColor(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);
-  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),
-    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 ANIMATION_EASING = Easing.bezier(0.22, 1, 0.36, 1);
 var PEAK_OVERSHOOT = 1.12;
 function getReducedMotionPreference() {
@@ -9222,7 +9026,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,
@@ -9894,7 +9698,7 @@ function VelocityStrip({
 }
 var t7 = getSemanticColors("dark");
 var dotColorMap = {
-  untrained: "#2C2C2C",
+  untrained: greyRamp[900],
   behind: t7["brand-secondary"],
   ontrack: t7["status-success"],
   target: t7["brand-primary"],
@@ -9907,12 +9711,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",
@@ -10213,7 +10017,7 @@ function SetRow(set) {
   );
 }
 var BRAND_PRIMARY3 = 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",
@@ -10246,7 +10050,7 @@ function InputBar({
       style: {
         width: "100%",
         borderTopWidth: 1,
-        borderTopColor: resolveColor("border-default"),
+        borderTopColor: resolveColor("hairline-default"),
         paddingTop: 10,
         paddingHorizontal: 16,
         paddingBottom: 12,
@@ -10509,7 +10313,7 @@ function RestTimer({
       style: {
         width: "100%",
         borderTopWidth: 1,
-        borderTopColor: resolveColor("border-default"),
+        borderTopColor: resolveColor("hairline-default"),
         paddingVertical: 12,
         paddingHorizontal: 16
       },
@@ -10578,7 +10382,7 @@ function RestTimer({
         /* @__PURE__ */ jsx(
           View,
           {
-            className: "bg-border",
+            className: "bg-hairline",
             style: {
               height: 3,
               borderRadius: 2,
@@ -10839,7 +10643,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;
@@ -11289,7 +11093,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) {
@@ -11323,7 +11127,7 @@ function ExpandedCard({
   return /* @__PURE__ */ jsxs(
     View,
     {
-      className: "bg-surface-elevated border-border",
+      className: "bg-surface-elevated border-hairline",
       style: {
         borderWidth: 1,
         ...borderRadius,
@@ -11555,7 +11359,8 @@ function SessionHeader({
     }
   );
 }
-var DIVIDER = primitiveColors.charcoal[300];
+var SEMANTIC2 = getSemanticColors("dark");
+var DIVIDER = greyRamp[875];
 var DEFAULT_WIDTH = 246;
 function SessionRail({
   title,
@@ -11599,8 +11404,8 @@ function SessionRail({
         /* @__PURE__ */ jsx(
           Surface,
           {
-            level: "elevated",
-            style: [{ flex: 1 }, neumorphicShadows.charcoal.pressed.subtle],
+            level: "base",
+            style: [{ flex: 1 }, insetWell(SEMANTIC2["surface-base"])],
             testID: "session-rail-list",
             children: exercises.map((ex, i) => /* @__PURE__ */ jsx(
               View,
@@ -11913,11 +11718,12 @@ function WeekRow({
     }
   );
 }
+var HAIRLINE_DEFAULT2 = getSemanticColors("dark")["hairline-default"];
 var t10 = getSemanticColors("dark");
 var COLORS = {
   statusSuccess: t10["status-success"],
   brandPrimary: t10["brand-primary"],
-  borderDefault: "#1F1F1F",
+  borderDefault: HAIRLINE_DEFAULT2,
   brandPrimarySubtle: "rgba(255,121,0,0.06)"
 };
 var statusBorderColors = {
@@ -12058,10 +11864,11 @@ function WorkoutCard({
     }
   );
 }
+var HAIRLINE_DEFAULT3 = getSemanticColors("dark")["hairline-default"];
 var BRAND_PRIMARY7 = getSemanticColors("dark")["brand-primary"];
 var BRAND_PRIMARY_DARK = MESO_ACCENT_GRADIENT_DARK;
 var BRAND_PRIMARY_LIGHT = MESO_ACCENT_GRADIENT_LIGHT;
-var BORDER_DEFAULT = "#1F1F1F";
+var BORDER_DEFAULT = HAIRLINE_DEFAULT3;
 var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY7, BRAND_PRIMARY_LIGHT];
 function heatmapColor(percentage) {
   const clamped = Math.max(0, Math.min(100, percentage));
@@ -12217,7 +12024,7 @@ function MesoCard({
 var BRAND_PRIMARY8 = getSemanticColors("dark")["brand-primary"];
 var RECENT_BORDER = "rgba(249,180,21,0.3)";
 var RECENT_GLOW = "0 0 12px rgba(249,180,21,0.06)";
-var BORDER_DEFAULT2 = resolveColor("border-default");
+var BORDER_DEFAULT2 = resolveColor("hairline-default");
 var TYPE_LABELS = {
   e1rm: "e1RM",
   weight: "Weight",
@@ -12330,7 +12137,7 @@ function PrHistoryModal({
           View,
           {
             accessibilityElementsHidden: true,
-            className: "bg-border",
+            className: "bg-hairline",
             style: {
               alignSelf: "center",
               width: 40,
@@ -12462,7 +12269,7 @@ function EmojiSlider({ factor }) {
               accessibilityLabel: `${factor.label} level ${level} of 5`,
               "aria-checked": selected,
               testID: "readiness-check-emoji",
-              className: selected ? void 0 : "border-border bg-surface-raised",
+              className: selected ? void 0 : "border-hairline bg-surface-raised",
               style: ({ pressed }) => ({
                 flex: 1,
                 alignItems: "center",
@@ -12517,7 +12324,7 @@ function WarmUpCard({ validation }) {
   return /* @__PURE__ */ jsxs(
     View,
     {
-      className: "border-border bg-surface-raised",
+      className: "border-hairline bg-surface-raised",
       style: {
         marginTop: 16,
         padding: 12,
@@ -13052,11 +12859,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(
@@ -13259,21 +13066,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_WARNING3
                       },
                       children: "\u2605"
                     },
-                    `star-${c.index}`
+                    `star-${c2.index}`
                   ) : null
                 )
               ]
@@ -13284,29 +13091,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_PRIMARY11
                     }
                   },
-                  `point-${c.index}`
+                  `point-${c2.index}`
                 );
               })
             }
@@ -13316,7 +13123,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(
@@ -13843,7 +13650,7 @@ var t14 = getSemanticColors("dark");
 function glowShadow(color) {
   return `0 0 5px 1px ${alpha(color, 0.3)}, 0 0 10px 3px ${alpha(color, 0.12)}`;
 }
-var DEFAULT_TRACK_COLOR = primitiveColors.charcoal[200];
+var DEFAULT_TRACK_COLOR = greyRamp[800];
 var DEFAULT_MARKER_COLOR2 = primitiveColors.white;
 var TICK_COLOR = t14["text-tertiary"];
 var ZONE_SIZES = {
@@ -14142,7 +13949,7 @@ function FatigueMeter({
   );
 }
 var HEAT = WORKOUT_TOKENS.heatmap;
-var NEUTRAL_TRACK = primitiveColors.charcoal[200];
+var NEUTRAL_TRACK = greyRamp[800];
 var MONO2 = "monospace";
 var HEAT_BY_ZONE = {
   under: HEAT.under,
@@ -14339,7 +14146,7 @@ function LiveAuraFrame({
           borderRadius: 10,
           backgroundColor: t16["background-base"],
           borderWidth: 1,
-          borderColor: t16["border-default"]
+          borderColor: t16["hairline-default"]
         },
         style
       ],
@@ -14399,32 +14206,32 @@ var STATE_LABEL = {
 var PHASE_AXIS_COLOR = {
   eccentric: primitiveRamps.magenta[800],
   concentric: primitiveRamps.cyan[800],
-  hold: primitiveColors.charcoal[100],
-  idle: primitiveColors.charcoal[200]
+  hold: greyRamp[700],
+  idle: greyRamp[800]
 };
 var PHASE_AXIS_BASE_COLOR = {
   eccentric: primitiveRamps.magenta[950],
   concentric: primitiveRamps.cyan[950],
-  hold: primitiveColors.charcoal[300],
-  idle: primitiveColors.charcoal[200]
+  hold: greyRamp[900],
+  idle: greyRamp[800]
 };
 var PACING_TONE = {
   ahead: primitiveRamps.amber[300],
   onPace: primitiveRamps.green[300],
   over: primitiveRamps.red[300]
 };
-var SILVER = primitiveColors.neutral[300];
+var SILVER = greyRamp[200];
 var RED_LIGHT = primitiveRamps.red[400];
 var RED_MID = primitiveRamps.red[600];
 var RED_DEEP = primitiveRamps.red[800];
 var GRIND_THRESHOLD = 0.35;
-var DRIFT_GREY = primitiveColors.neutral[600];
+var DRIFT_GREY = greyRamp[700];
 function clamp012(v) {
   return Math.min(1, Math.max(0, v));
 }
 function hexToRgb2(hex) {
   const h = hex.replace("#", "");
-  const f = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+  const f = h.length === 3 ? h.split("").map((c2) => c2 + c2).join("") : h;
   return [parseInt(f.slice(0, 2), 16), parseInt(f.slice(2, 4), 16), parseInt(f.slice(4, 6), 16)];
 }
 function mixHex2(a, b, ratio) {
@@ -14932,9 +14739,9 @@ function GhostSpark({
     ) }) });
   }
   const cur = curves[curves.length - 1];
-  const allSamples = curves.flatMap((c) => c.samples);
+  const allSamples = curves.flatMap((c2) => c2.samples);
   const vmax = Math.max(0.01, ...allSamples.map((s) => s.velocityMps)) * 1.06;
-  const axisMaxT = Math.max(1, ...curves.map((c) => c.samples[c.samples.length - 1]?.tMs ?? 0)) * 1.04;
+  const axisMaxT = Math.max(1, ...curves.map((c2) => c2.samples[c2.samples.length - 1]?.tMs ?? 0)) * 1.04;
   const bandBottom = h - padBot;
   const bandTop = bandBottom - BAND_H;
   const baseline = bandTop - BAND_GAP;
@@ -14943,7 +14750,7 @@ function GhostSpark({
   const mag = (v) => clamp012(v / vmax) * plotH;
   const lineTint = ghostLineColor(cur.tempoDeviation, cur.grindSignature);
   const curPts = cur.samples.map((s) => [x(s.tMs), mag(s.velocityMps)]);
-  const ghostPts = curves.slice(0, -1).map((c) => c.samples.map((s) => [x(s.tMs), mag(s.velocityMps)]));
+  const ghostPts = curves.slice(0, -1).map((c2) => c2.samples.map((s) => [x(s.tMs), mag(s.velocityMps)]));
   return /* @__PURE__ */ jsx(View, { testID: "ghost-spark", style: { paddingHorizontal: 4 }, children: /* @__PURE__ */ jsxs("svg", { width: w, height: h, children: [
     /* @__PURE__ */ jsx(
       GhostBloom,
@@ -15153,7 +14960,7 @@ function mergePhaseSegments(a, b) {
   return out;
 }
 function lastTMs(curves) {
-  return Math.max(0, ...curves.map((c) => c.samples[c.samples.length - 1]?.tMs ?? 0));
+  return Math.max(0, ...curves.map((c2) => c2.samples[c2.samples.length - 1]?.tMs ?? 0));
 }
 function DualGhostSpark({
   left,
@@ -15179,12 +14986,12 @@ function DualGhostSpark({
   const baseUp = bandTop - BAND_GAP;
   const baseDown = mid + BAND_H / 2 + BAND_GAP;
   const wingH = Math.max(1, Math.min(baseUp - padTop, h - padBot - baseDown));
-  const allSamples = [...left, ...right].flatMap((c) => c.samples);
+  const allSamples = [...left, ...right].flatMap((c2) => c2.samples);
   const vmax = Math.max(0.01, ...allSamples.map((s) => s.velocityMps)) * 1.06;
   const axisMaxT = Math.max(1, lastTMs(left), lastTMs(right)) * 1.04;
   const x = (ms) => padL + ms / axisMaxT * (w - padL - padR);
   const mag = (v) => clamp012(v / vmax) * wingH;
-  const toPts = (c) => c.samples.map((s) => [x(s.tMs), mag(s.velocityMps)]);
+  const toPts = (c2) => c2.samples.map((s) => [x(s.tMs), mag(s.velocityMps)]);
   const wing = (curves) => {
     const cur = curves[curves.length - 1];
     return {
@@ -15770,7 +15577,7 @@ function DeviceMenu({
   const availCount = devices.filter((d) => !d.slot).length;
   return /* @__PURE__ */ jsxs(Popover, { placement: "bottom", isOpen, onOpenChange, className, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(DeviceIndicator, { status }) }),
-    /* @__PURE__ */ jsxs(PopoverContent, { className: "right-0 left-auto mt-[10px] w-[326px] bg-surface-elevated border border-border-strong rounded-[10px] p-[7px]", children: [
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "right-0 left-auto mt-[10px] w-[326px] bg-surface-elevated border border-hairline-strong rounded-[10px] p-[7px]", children: [
       /* @__PURE__ */ jsxs(
         Typography,
         {
@@ -15786,7 +15593,7 @@ function DeviceMenu({
           ]
         }
       ),
-      devices.map((device, i) => /* @__PURE__ */ jsx(View, { className: cn(i > 0 && "border-t border-border"), children: /* @__PURE__ */ jsx(
+      devices.map((device, i) => /* @__PURE__ */ jsx(View, { className: cn(i > 0 && "border-t border-hairline"), children: /* @__PURE__ */ jsx(
         DeviceRow,
         {
           device,
@@ -15818,7 +15625,7 @@ function TopBar({
       onLayout,
       style: surfaceGradient.chrome(),
       className: cn(
-        "h-[46px] flex-row items-center gap-[14px] px-4 bg-surface-elevated border-b border-border",
+        "h-[46px] flex-row items-center gap-[14px] px-4 bg-surface-elevated border-b border-hairline",
         className
       ),
       children: [
@@ -15917,7 +15724,7 @@ function SideNav({
     {
       accessibilityRole: "tablist",
       className: cn(
-        "w-[60px] items-center gap-[6px] border-r border-border bg-background-base py-3",
+        "w-[60px] items-center gap-[6px] border-r border-hairline bg-background-base py-3",
         className
       ),
       children: items.map((item) => /* @__PURE__ */ jsx(
@@ -16057,6 +15864,6 @@ function composeValidators(...validators) {
   };
 }
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, ActivityIcon, Alert, AlertDescription, AlertTitle, AlertTriangleIcon, Autocomplete, Avatar, AvatarBadge, AvatarGroup, AwardIcon, BAND_GAP, BAND_H, Badge, BadgeText, BaseBadge, BluetoothIcon, BrandLockup, BreadcrumbItem, Breadcrumbs, Button, ButtonIcon, ButtonSpinner, ButtonText, CATEGORICAL_CVD_SAFE_MAX, CapacityBandChart, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Checkbox, CheckboxGroup, Chip, CircleSlashIcon, CircularProgress, CircularTimer, Collapse, CollapseButton, CollapseContent, DRIFT_GREY, DashboardShell, DataRow, DateTime, DeviationBar, DeviceIndicator, DeviceMenu, DeviceRow, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, DualGhostSpark, DualVelocityStrip, DumbbellIcon, EmptyState, ExerciseCard, ExerciseCardHeading, ExerciseHeading, ExerciseIndicator, FatigueLights, FatigueMeter, FormActions, FormField, FormRow, FormSection, GRIND_THRESHOLD, Gauge2 as Gauge, GhostBand, GhostBloom, GhostSpark, HStack, Heading, HelpTip, HistoryIcon, INDICATOR_PRECEDENCE, IconBox, Indicator, InfoIcon, Input, InputBar, InputGroup, IntensityBar, Label, LabelWithHelp, LayersIcon, Link, ListItem, ListItemContent, ListItemDivider, ListItemIcon, ListItemTrailing, LiveAuraFrame, LiveFatigueCard, LiveFatiguePanel, METRIC_FONT, Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuTrigger, MesoCard, MesoProgressBar, MesoStatusCard, Metric, MetricCell, MetricGroup, MetricTiles, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle, MuscleGroupChip, NavItem, Overline, PHASE_AXIS_COLOR, PRESSED_ELEVATION_LEVEL, Paragraph, PasswordInput, PersonStandingIcon, Pill, PlaceholderStrip, Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, PrBadge, PrHistoryModal, Progress, ProgressSteps, RED_DEEP, RED_LIGHT, RED_MID, Radio, RadioGroup, ReadinessCheck, RestTimer, RomProgressionChart, SET_STRIP_VARIABLE_COLOR, SET_STRIP_ZONES, SILVER, STATE_LABEL, SURFACE_LEVEL_TOKEN, ScaleIcon, Scatter, ScheduleTiles, Section, SectionContent, SectionHeader, SegmentedBar, SegmentedProgressBar, Select, SessionHeader, SessionRail, SessionStatePill, SetBar, SetRow, SetStrip, SetTableHeader, SetsRepsLoad, SideNav, Sidebar, SidebarContent, SidebarDivider, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, Skeleton, SkeletonCard, SkeletonCircle, SkeletonListItem, SkeletonText, Sparkline, Spinner, Stack, StarIcon, StatusDot, StatusPill2 as StatusPill, StepContent, StepIndicator, StepLabel, Stepper, Step as StepperStep, StrengthTrendChart, SupersetWrapper, Surface, SurfaceContext, SvgIcon, Switch, TONE_COLOR, Tab, TabList, TabPanel, TabPanels, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TablePagination, TableRow, Tabs, TempoDisplay, Tile, TimerReadout, Toast, ToastProvider, ToolbarButton, ToolbarButtonGroup, Tooltip, TopBar, Treemap, TrendingDownIcon, Typography, VStack, VelocityHero, VelocityStrip, VerdictHero, VoltrasMark, VolumeLandmarkBar, WeekRow, WeightBadge, WorkoutCard, WorkoutPill, ZoneTrack, alpha, applyThemePreset, audiobookPreset, auraForVerdict, backgroundFrameDark, bestTextColor, buttonSizes, calculateMeanVelocity, calculateVelocityLoss, categoricalPalette, cn, componentElevationRanges, composeValidators, createFieldId, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultNavItems, defaultPreset, discreteRainbow, divergingScale, elevationSystem, formatDateTime, formatDuration, formatPrescription, formatSignedPct, formatVelocity, getBaseSurfaceColor, getCategoricalColor, getContrastText, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getFieldAriaProps, getFieldValidationProps, getGlowShadow, getHoverColors, getLuminance, getPressedRecessShadow, getResultColor, getSemanticColors, getStatusColor, getThemeCSSVars, getValidatedElevation, getVelocityZoneColor, getVelocityZoneName, ghostLineColor, gluestackConfig, hasMaxLength, hasMinLength, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, isEmpty, isValidEmail, lightThemeCSSVars, lighten, linearGradient, liveAuraColor, mergePhaseSegments, neumorphicShadows, onSurfaceColors, paceTone, paceToneColor, pressedLevel, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, resolveIndicator, rgbToHex, rgbToHsv, roundRpe, roundTempo, roundWeight, rpeColor, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort, shadowColors, smoothPath, statusPillColor, surfaceBackground, surfaceGradient, surfaceRampDark, useOnSurfaceColor, useSurface, useSurfaceMode, useTable, useTimer, useToast, useToolbarButton, validateCssPropertyManifest, validationRules, velocityZoneColor };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, ActivityIcon, Alert, AlertDescription, AlertTitle, AlertTriangleIcon, Autocomplete, Avatar, AvatarBadge, AvatarGroup, AwardIcon, BAND_GAP, BAND_H, Badge, BadgeText, BaseBadge, BluetoothIcon, BrandLockup, BreadcrumbItem, Breadcrumbs, Button, ButtonIcon, ButtonSpinner, ButtonText, CATEGORICAL_CVD_SAFE_MAX, CapacityBandChart, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Checkbox, CheckboxGroup, Chip, CircleSlashIcon, CircularProgress, CircularTimer, Collapse, CollapseButton, CollapseContent, DRIFT_GREY, DashboardShell, DataRow, DateTime, DeviationBar, DeviceIndicator, DeviceMenu, DeviceRow, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, DualGhostSpark, DualVelocityStrip, DumbbellIcon, EmptyState, ExerciseCard, ExerciseCardHeading, ExerciseHeading, ExerciseIndicator, FLOATING_ELEVATION_MIN, FatigueLights, FatigueMeter, FormActions, FormField, FormRow, FormSection, GRIND_THRESHOLD, Gauge2 as Gauge, GhostBand, GhostBloom, GhostSpark, HStack, Heading, HelpTip, HistoryIcon, INDICATOR_PRECEDENCE, IconBox, Indicator, InfoIcon, Input, InputBar, InputGroup, IntensityBar, Label, LabelWithHelp, LayersIcon, Link, ListItem, ListItemContent, ListItemDivider, ListItemIcon, ListItemTrailing, LiveAuraFrame, LiveFatigueCard, LiveFatiguePanel, METRIC_FONT, Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuTrigger, MesoCard, MesoProgressBar, MesoStatusCard, Metric, MetricCell, MetricGroup, MetricTiles, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle, MuscleGroupChip, NavItem, Overline, PHASE_AXIS_COLOR, PRESSED_ELEVATION_LEVEL, Paragraph, PasswordInput, PersonStandingIcon, Pill, PlaceholderStrip, Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, PrBadge, PrHistoryModal, Progress, ProgressSteps, RED_DEEP, RED_LIGHT, RED_MID, Radio, RadioGroup, ReadinessCheck, RestTimer, RomProgressionChart, SET_STRIP_VARIABLE_COLOR, SET_STRIP_ZONES, SILVER, STATE_LABEL, SURFACE_LEVEL_TOKEN, SURFACE_PLANE_STEPS, ScaleIcon, Scatter, ScheduleTiles, Section, SectionContent, SectionHeader, SegmentedBar, SegmentedProgressBar, Select, SessionHeader, SessionRail, SessionStatePill, SetBar, SetRow, SetStrip, SetTableHeader, SetsRepsLoad, SideNav, Sidebar, SidebarContent, SidebarDivider, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, Skeleton, SkeletonCard, SkeletonCircle, SkeletonListItem, SkeletonText, Sparkline, Spinner, Stack, StarIcon, StatusDot, StatusPill2 as StatusPill, StepContent, StepIndicator, StepLabel, Stepper, Step as StepperStep, StrengthTrendChart, SupersetWrapper, Surface, SurfaceContext, SvgIcon, Switch, TONE_COLOR, Tab, TabList, TabPanel, TabPanels, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TablePagination, TableRow, Tabs, TempoDisplay, Tile, TimerReadout, Toast, ToastProvider, ToolbarButton, ToolbarButtonGroup, Tooltip, TopBar, Treemap, TrendingDownIcon, Typography, VStack, VelocityHero, VelocityStrip, VerdictHero, VoltrasMark, VolumeLandmarkBar, WeekRow, WeightBadge, WorkoutCard, WorkoutPill, ZoneTrack, alpha, applyThemePreset, audiobookPreset, auraForVerdict, barPaper, bestTextColor, buttonSizes, calculateMeanVelocity, calculateVelocityLoss, categoricalPalette, cn, componentElevationRanges, composeValidators, createFieldId, darkThemeCSSVars, darken, defaultNavItems, defaultPreset, discreteRainbow, divergingScale, elevationSystem, formatDateTime, formatDuration, formatPrescription, formatSignedPct, formatVelocity, getBaseSurfaceColor, getCategoricalColor, getContrastText, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getFieldAriaProps, getFieldValidationProps, getGlowShadow, getHoverColors, getLuminance, getPressedRecessShadow, getResultColor, getSemanticColors, getStatusColor, getThemeCSSVars, getValidatedElevation, getVelocityZoneColor, getVelocityZoneName, ghostLineColor, gluestackConfig, grainForTone, grainOpacityForTone, greyRamp, hasMaxLength, hasMinLength, hexToRgb, hsvToRgb, insetWell, isCssPropertyManifest, isDark, isEmpty, isValidEmail, lightThemeCSSVars, lighten, linearGradient, liveAuraColor, mergePhaseSegments, onSurfaceColors, paceTone, paceToneColor, paperSheet, pressedLevel, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, resolveIndicator, rgbToHex, rgbToHsv, roundRpe, roundTempo, roundWeight, rpeColor, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort, smoothPath, statusPillColor, surfaceBackground, surfaceGradient, useOnSurfaceColor, useSurface, useSurfaceMode, useTable, useTimer, useToast, useToolbarButton, validateCssPropertyManifest, validationRules, velocityZoneColor };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map