@titan-design/react-ui 0.11.0 → 0.12.1

package/dist/theme/index.d.ts

@@ -1,531 +1,7 @@
+import { ThemeMode, getSemanticColors } from './tokens.js';
+export { CATEGORICAL_CVD_SAFE_MAX, CategoricalVariant, SURFACE_PLANE_STEPS, bestTextColor, buttonSizes, categoricalPalette, discreteRainbow, divergingScale, getCategoricalColor, getDiscreteRainbowColor, greyRamp, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveSpacing, primitiveTypography, primitiveZIndex, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort } from './tokens.js';
 import { ViewStyle, ViewProps } from 'react-native';
 
-/**
- * Semantic Design Tokens
- *
- * Meaningful tokens following DTCG (Design Tokens Community Group) naming conventions.
- * Pattern: {category}-{intent}-{variant?}-{state?}
- *
- * Categories:
- * - brand-* : Brand colors (primary, secondary, accent)
- * - status-* : Feedback colors (success, error, warning, info)
- * - result-* : Outcome indicators (improve, degrade, inconclusive, neutral)
- * - data-* : Data visualization colors (chart series)
- * - on-* : Text on colored backgrounds
- * - surface-* : Elevated containers (NOT "paper")
- * - background-* : Page backgrounds
- * - text-* : Text colors
- * - border-* : Border colors
- * - interactive-* : Hover/focus/active/disabled states
- */
-declare const semanticColorsLight: {
-    readonly 'brand-primary': "#FF7900";
-    readonly 'brand-primary-light': "#FFA063";
-    readonly 'brand-primary-dark': "#DA5F00";
-    readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
-    readonly 'brand-primary-hover': "#DA5F00";
-    readonly 'brand-primary-active': "#B94A00";
-    readonly 'brand-secondary': "#307B9B";
-    readonly 'brand-secondary-light': "#2697B7";
-    readonly 'brand-secondary-dark': "#2A617F";
-    readonly 'brand-secondary-subtle': "rgba(48, 123, 155, 0.08)";
-    readonly 'brand-secondary-hover': "#2A617F";
-    readonly 'brand-secondary-active': "#22465F";
-    readonly 'on-brand-primary': "#FFFFFF";
-    readonly 'on-brand-secondary': "#FFFFFF";
-    readonly 'status-success': "#2ED573";
-    readonly 'status-success-light': "#58F69E";
-    readonly 'status-success-dark': "#298732";
-    readonly 'status-success-subtle': "#E3FFEE";
-    readonly 'status-live': "#2ED573";
-    readonly 'status-live-muted': "#22A444";
-    readonly 'status-error': "#D14343";
-    readonly 'status-error-light': "#E05254";
-    readonly 'status-error-dark': "#A4221C";
-    readonly 'status-error-subtle': "#FFF4F4";
-    readonly 'status-error-vivid': "#FF4757";
-    readonly 'status-error-vivid-light': "#FF6070";
-    readonly 'status-error-vivid-dark': "#C42539";
-    readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
-    readonly 'status-warning': "#F9B415";
-    readonly 'status-warning-light': "#FFD352";
-    readonly 'status-warning-dark': "#C27400";
-    readonly 'status-warning-subtle': "#FFF7DD";
-    readonly 'status-info': "#2196F3";
-    readonly 'status-info-light': "#78C2FF";
-    readonly 'status-info-dark': "#1072CB";
-    readonly 'status-info-subtle': "#EFF8FF";
-    readonly 'on-status-success': "#FFFFFF";
-    readonly 'on-status-error': "#FFFFFF";
-    readonly 'on-status-warning': "#FFFFFF";
-    readonly 'on-status-info': "#FFFFFF";
-    readonly 'result-improve': "#4caf50";
-    readonly 'result-improve-light': "rgba(76, 175, 80, 0.12)";
-    readonly 'result-improve-dark': "#248a24";
-    readonly 'result-degrade': "#ef5350";
-    readonly 'result-degrade-light': "rgba(239, 83, 80, 0.12)";
-    readonly 'result-degrade-dark': "#b30000";
-    readonly 'result-inconclusive': "#9E9A97";
-    readonly 'result-inconclusive-light': "rgba(158, 154, 151, 0.12)";
-    readonly 'result-neutral': "#6B7280";
-    readonly 'on-result-improve': "#FFFFFF";
-    readonly 'on-result-degrade': "#FFFFFF";
-    readonly 'on-result-inconclusive': "#FFFFFF";
-    readonly 'data-1': "#1965B0";
-    readonly 'data-2': "#4EB265";
-    readonly 'data-3': "#F7F056";
-    readonly 'data-4': "#DC050C";
-    readonly 'data-5': "#882E72";
-    readonly 'data-6': "#F4A736";
-    readonly 'data-7': "#7BAFDE";
-    readonly 'data-8': "#90C987";
-    readonly 'data-9': "#CAACCB";
-    readonly 'data-10': "#EE8026";
-    readonly 'text-primary': "#121828";
-    readonly 'text-secondary': "#65748B";
-    readonly 'text-tertiary': "#9CA3AF";
-    readonly 'text-disabled': "rgba(55, 65, 81, 0.48)";
-    readonly 'text-inverse': "#FFFFFF";
-    readonly 'text-link': "#5048E5";
-    readonly 'text-link-hover': "#3832A0";
-    readonly 'surface-base': "#FFFFFF";
-    readonly 'surface-elevated': "#FAFAFA";
-    readonly 'surface-raised': "#F3F4F6";
-    readonly 'surface-overlay': "#FFFFFF";
-    readonly 'surface-input': "#FAFAFA";
-    readonly 'surface-inset': "#D1D5DB";
-    readonly 'background-base': "#EBEBEB";
-    readonly 'background-default': "#FFFFFF";
-    readonly 'background-subtle': "#FAFAFA";
-    readonly 'background-frame': "#9CA3AF";
-    readonly 'border-default': "#E8E9EB";
-    readonly 'border-subtle': "#F3F4F6";
-    readonly 'border-strong': "#D1D5DB";
-    readonly 'border-prominent': "#9CA3AF";
-    readonly 'border-focus': "#5048E5";
-    readonly 'border-input': "#D1D5DB";
-    readonly 'border-input-hover': "#9CA3AF";
-    readonly 'border-input-focus': "#5048E5";
-    readonly 'border-input-error': "#D14343";
-    readonly 'hairline-subtle': "rgba(0, 0, 0, 0.06)";
-    readonly 'hairline-default': "rgba(0, 0, 0, 0.09)";
-    readonly 'hairline-strong': "rgba(0, 0, 0, 0.14)";
-    readonly 'interactive-hover': "rgba(55, 65, 81, 0.04)";
-    readonly 'interactive-focus': "rgba(55, 65, 81, 0.12)";
-    readonly 'interactive-active': "rgba(55, 65, 81, 0.16)";
-    readonly 'interactive-selected': "rgba(55, 65, 81, 0.08)";
-    readonly 'interactive-disabled': "rgba(55, 65, 81, 0.12)";
-    readonly 'interactive-disabled-text': "rgba(55, 65, 81, 0.26)";
-    readonly divider: "#E8E9EB";
-    readonly 'avatar-background': "#6B7280";
-    readonly 'avatar-text': "#FFFFFF";
-};
-declare const semanticColorsDark: {
-    readonly 'brand-primary': "#FF7900";
-    readonly 'brand-primary-light': "#FFA063";
-    readonly 'brand-primary-dark': "#DA5F00";
-    readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
-    readonly 'brand-primary-hover': "#FFA063";
-    readonly 'brand-primary-active': "#FFC7A2";
-    readonly 'brand-secondary': "#307B9B";
-    readonly 'brand-secondary-light': "#2697B7";
-    readonly 'brand-secondary-dark': "#2A617F";
-    readonly 'brand-secondary-subtle': "rgba(48, 123, 155, 0.12)";
-    readonly 'brand-secondary-hover': "#2697B7";
-    readonly 'brand-secondary-active': "#01B5D1";
-    readonly 'on-brand-primary': "#FFFFFF";
-    readonly 'on-brand-secondary': "#FFFFFF";
-    readonly 'status-success': "#2ED573";
-    readonly 'status-success-light': "#58F69E";
-    readonly 'status-success-dark': "#298732";
-    readonly 'status-success-subtle': "rgba(46, 213, 115, 0.12)";
-    readonly 'status-live': "#2ED573";
-    readonly 'status-live-muted': "#22A444";
-    readonly 'status-error': "#D14343";
-    readonly 'status-error-light': "#E05254";
-    readonly 'status-error-dark': "#A4221C";
-    readonly 'status-error-subtle': "rgba(209, 67, 67, 0.12)";
-    readonly 'status-error-vivid': "#FF4757";
-    readonly 'status-error-vivid-light': "#FF6070";
-    readonly 'status-error-vivid-dark': "#C42539";
-    readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
-    readonly 'status-warning': "#F9B415";
-    readonly 'status-warning-light': "#FFD352";
-    readonly 'status-warning-dark': "#C27400";
-    readonly 'status-warning-subtle': "rgba(249, 180, 21, 0.12)";
-    readonly 'status-info': "#2196F3";
-    readonly 'status-info-light': "#78C2FF";
-    readonly 'status-info-dark': "#1072CB";
-    readonly 'status-info-subtle': "rgba(33, 150, 243, 0.12)";
-    readonly 'on-status-success': "#FFFFFF";
-    readonly 'on-status-error': "#FFFFFF";
-    readonly 'on-status-warning': "#FFFFFF";
-    readonly 'on-status-info': "#FFFFFF";
-    readonly 'result-improve': "#4caf50";
-    readonly 'result-improve-light': "rgba(76, 175, 80, 0.16)";
-    readonly 'result-improve-dark': "#248a24";
-    readonly 'result-degrade': "#ef5350";
-    readonly 'result-degrade-light': "rgba(239, 83, 80, 0.16)";
-    readonly 'result-degrade-dark': "#b30000";
-    readonly 'result-inconclusive': "#9E9A97";
-    readonly 'result-inconclusive-light': "rgba(158, 154, 151, 0.16)";
-    readonly 'result-neutral': "#9CA3AF";
-    readonly 'on-result-improve': "#FFFFFF";
-    readonly 'on-result-degrade': "#FFFFFF";
-    readonly 'on-result-inconclusive': "#FFFFFF";
-    readonly 'data-1': "#1965B0";
-    readonly 'data-2': "#4EB265";
-    readonly 'data-3': "#F7F056";
-    readonly 'data-4': "#DC050C";
-    readonly 'data-5': "#882E72";
-    readonly 'data-6': "#F4A736";
-    readonly 'data-7': "#7BAFDE";
-    readonly 'data-8': "#90C987";
-    readonly 'data-9': "#CAACCB";
-    readonly 'data-10': "#EE8026";
-    readonly 'text-primary': "#F3F4F6";
-    readonly 'text-secondary': "#9CA3AF";
-    readonly 'text-tertiary': "#6B7280";
-    readonly 'text-disabled': "rgba(255, 255, 255, 0.38)";
-    readonly 'text-inverse': "#111827";
-    readonly 'text-link': "#828DF8";
-    readonly 'text-link-hover': "#60A5FA";
-    readonly 'surface-base': "#252321";
-    readonly 'surface-elevated': "#2C2A28";
-    readonly 'surface-raised': "#31302F";
-    readonly 'surface-overlay': "#373635";
-    readonly 'surface-input': "#2C2A28";
-    readonly 'surface-inset': "#13100D";
-    readonly 'background-base': "#1C1916";
-    readonly 'background-default': "#252321";
-    readonly 'background-subtle': "#2C2A28";
-    readonly 'background-frame': "#100D0A";
-    readonly 'border-default': "#1F1F1F";
-    readonly 'border-subtle': "#1C1C1C";
-    readonly 'border-strong': "#2C2C2C";
-    readonly 'border-prominent': "#3C3C3C";
-    readonly 'border-focus': "#828DF8";
-    readonly 'border-input': "#4B5563";
-    readonly 'border-input-hover': "#6B7280";
-    readonly 'border-input-focus': "#828DF8";
-    readonly 'border-input-error': "#EF4444";
-    readonly 'hairline-subtle': "rgba(255, 255, 255, 0.06)";
-    readonly 'hairline-default': "rgba(255, 255, 255, 0.09)";
-    readonly 'hairline-strong': "rgba(255, 255, 255, 0.14)";
-    readonly 'interactive-hover': "rgba(255, 255, 255, 0.04)";
-    readonly 'interactive-focus': "rgba(255, 255, 255, 0.12)";
-    readonly 'interactive-active': "rgba(255, 255, 255, 0.16)";
-    readonly 'interactive-selected': "rgba(255, 255, 255, 0.08)";
-    readonly 'interactive-disabled': "rgba(255, 255, 255, 0.12)";
-    readonly 'interactive-disabled-text': "rgba(255, 255, 255, 0.26)";
-    readonly divider: "#1F1F1F";
-    readonly 'avatar-background': "#4B5563";
-    readonly 'avatar-text': "#FFFFFF";
-};
-declare const semanticTypography: {
-    readonly h1: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "3.5rem";
-        readonly fontWeight: 700;
-        readonly lineHeight: 1.375;
-    };
-    readonly h2: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "3rem";
-        readonly fontWeight: 700;
-        readonly lineHeight: 1.375;
-    };
-    readonly h3: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "2.25rem";
-        readonly fontWeight: 700;
-        readonly lineHeight: 1.375;
-    };
-    readonly h4: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "2rem";
-        readonly fontWeight: 700;
-        readonly lineHeight: 1.375;
-    };
-    readonly h5: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "1.5rem";
-        readonly fontWeight: 600;
-        readonly lineHeight: 1.375;
-    };
-    readonly h6: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "1.125rem";
-        readonly fontWeight: 600;
-        readonly lineHeight: 1.375;
-    };
-    readonly body1: {
-        readonly fontFamily: "body";
-        readonly fontSize: "1rem";
-        readonly fontWeight: 400;
-        readonly lineHeight: 1.5;
-    };
-    readonly body2: {
-        readonly fontFamily: "body";
-        readonly fontSize: "0.875rem";
-        readonly fontWeight: 400;
-        readonly lineHeight: 1.57;
-    };
-    readonly subtitle1: {
-        readonly fontFamily: "body";
-        readonly fontSize: "1rem";
-        readonly fontWeight: 500;
-        readonly lineHeight: 1.75;
-    };
-    readonly subtitle2: {
-        readonly fontFamily: "body";
-        readonly fontSize: "0.875rem";
-        readonly fontWeight: 500;
-        readonly lineHeight: 1.57;
-    };
-    readonly caption: {
-        readonly fontFamily: "body";
-        readonly fontSize: "0.75rem";
-        readonly fontWeight: 400;
-        readonly lineHeight: 1.66;
-    };
-    readonly overline: {
-        readonly fontFamily: "body";
-        readonly fontSize: "0.75rem";
-        readonly fontWeight: 600;
-        readonly lineHeight: 2.5;
-        readonly letterSpacing: "0.5px";
-        readonly textTransform: "uppercase";
-    };
-    readonly button: {
-        readonly fontFamily: "sans";
-        readonly fontSize: "0.875rem";
-        readonly fontWeight: 600;
-        readonly lineHeight: 1.75;
-    };
-};
-declare const buttonSizes: {
-    readonly sm: {
-        readonly paddingX: "16px";
-        readonly paddingY: "6px";
-        readonly fontSize: "0.875rem";
-    };
-    readonly md: {
-        readonly paddingX: "20px";
-        readonly paddingY: "8px";
-        readonly fontSize: "0.875rem";
-    };
-    readonly lg: {
-        readonly paddingX: "24px";
-        readonly paddingY: "11px";
-        readonly fontSize: "1rem";
-    };
-};
-type ThemeMode = 'light' | 'dark';
-declare function getSemanticColors(mode: ThemeMode): {
-    readonly 'brand-primary': "#FF7900";
-    readonly 'brand-primary-light': "#FFA063";
-    readonly 'brand-primary-dark': "#DA5F00";
-    readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
-    readonly 'brand-primary-hover': "#DA5F00";
-    readonly 'brand-primary-active': "#B94A00";
-    readonly 'brand-secondary': "#307B9B";
-    readonly 'brand-secondary-light': "#2697B7";
-    readonly 'brand-secondary-dark': "#2A617F";
-    readonly 'brand-secondary-subtle': "rgba(48, 123, 155, 0.08)";
-    readonly 'brand-secondary-hover': "#2A617F";
-    readonly 'brand-secondary-active': "#22465F";
-    readonly 'on-brand-primary': "#FFFFFF";
-    readonly 'on-brand-secondary': "#FFFFFF";
-    readonly 'status-success': "#2ED573";
-    readonly 'status-success-light': "#58F69E";
-    readonly 'status-success-dark': "#298732";
-    readonly 'status-success-subtle': "#E3FFEE";
-    readonly 'status-live': "#2ED573";
-    readonly 'status-live-muted': "#22A444";
-    readonly 'status-error': "#D14343";
-    readonly 'status-error-light': "#E05254";
-    readonly 'status-error-dark': "#A4221C";
-    readonly 'status-error-subtle': "#FFF4F4";
-    readonly 'status-error-vivid': "#FF4757";
-    readonly 'status-error-vivid-light': "#FF6070";
-    readonly 'status-error-vivid-dark': "#C42539";
-    readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
-    readonly 'status-warning': "#F9B415";
-    readonly 'status-warning-light': "#FFD352";
-    readonly 'status-warning-dark': "#C27400";
-    readonly 'status-warning-subtle': "#FFF7DD";
-    readonly 'status-info': "#2196F3";
-    readonly 'status-info-light': "#78C2FF";
-    readonly 'status-info-dark': "#1072CB";
-    readonly 'status-info-subtle': "#EFF8FF";
-    readonly 'on-status-success': "#FFFFFF";
-    readonly 'on-status-error': "#FFFFFF";
-    readonly 'on-status-warning': "#FFFFFF";
-    readonly 'on-status-info': "#FFFFFF";
-    readonly 'result-improve': "#4caf50";
-    readonly 'result-improve-light': "rgba(76, 175, 80, 0.12)";
-    readonly 'result-improve-dark': "#248a24";
-    readonly 'result-degrade': "#ef5350";
-    readonly 'result-degrade-light': "rgba(239, 83, 80, 0.12)";
-    readonly 'result-degrade-dark': "#b30000";
-    readonly 'result-inconclusive': "#9E9A97";
-    readonly 'result-inconclusive-light': "rgba(158, 154, 151, 0.12)";
-    readonly 'result-neutral': "#6B7280";
-    readonly 'on-result-improve': "#FFFFFF";
-    readonly 'on-result-degrade': "#FFFFFF";
-    readonly 'on-result-inconclusive': "#FFFFFF";
-    readonly 'data-1': "#1965B0";
-    readonly 'data-2': "#4EB265";
-    readonly 'data-3': "#F7F056";
-    readonly 'data-4': "#DC050C";
-    readonly 'data-5': "#882E72";
-    readonly 'data-6': "#F4A736";
-    readonly 'data-7': "#7BAFDE";
-    readonly 'data-8': "#90C987";
-    readonly 'data-9': "#CAACCB";
-    readonly 'data-10': "#EE8026";
-    readonly 'text-primary': "#121828";
-    readonly 'text-secondary': "#65748B";
-    readonly 'text-tertiary': "#9CA3AF";
-    readonly 'text-disabled': "rgba(55, 65, 81, 0.48)";
-    readonly 'text-inverse': "#FFFFFF";
-    readonly 'text-link': "#5048E5";
-    readonly 'text-link-hover': "#3832A0";
-    readonly 'surface-base': "#FFFFFF";
-    readonly 'surface-elevated': "#FAFAFA";
-    readonly 'surface-raised': "#F3F4F6";
-    readonly 'surface-overlay': "#FFFFFF";
-    readonly 'surface-input': "#FAFAFA";
-    readonly 'surface-inset': "#D1D5DB";
-    readonly 'background-base': "#EBEBEB";
-    readonly 'background-default': "#FFFFFF";
-    readonly 'background-subtle': "#FAFAFA";
-    readonly 'background-frame': "#9CA3AF";
-    readonly 'border-default': "#E8E9EB";
-    readonly 'border-subtle': "#F3F4F6";
-    readonly 'border-strong': "#D1D5DB";
-    readonly 'border-prominent': "#9CA3AF";
-    readonly 'border-focus': "#5048E5";
-    readonly 'border-input': "#D1D5DB";
-    readonly 'border-input-hover': "#9CA3AF";
-    readonly 'border-input-focus': "#5048E5";
-    readonly 'border-input-error': "#D14343";
-    readonly 'hairline-subtle': "rgba(0, 0, 0, 0.06)";
-    readonly 'hairline-default': "rgba(0, 0, 0, 0.09)";
-    readonly 'hairline-strong': "rgba(0, 0, 0, 0.14)";
-    readonly 'interactive-hover': "rgba(55, 65, 81, 0.04)";
-    readonly 'interactive-focus': "rgba(55, 65, 81, 0.12)";
-    readonly 'interactive-active': "rgba(55, 65, 81, 0.16)";
-    readonly 'interactive-selected': "rgba(55, 65, 81, 0.08)";
-    readonly 'interactive-disabled': "rgba(55, 65, 81, 0.12)";
-    readonly 'interactive-disabled-text': "rgba(55, 65, 81, 0.26)";
-    readonly divider: "#E8E9EB";
-    readonly 'avatar-background': "#6B7280";
-    readonly 'avatar-text': "#FFFFFF";
-} | {
-    readonly 'brand-primary': "#FF7900";
-    readonly 'brand-primary-light': "#FFA063";
-    readonly 'brand-primary-dark': "#DA5F00";
-    readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
-    readonly 'brand-primary-hover': "#FFA063";
-    readonly 'brand-primary-active': "#FFC7A2";
-    readonly 'brand-secondary': "#307B9B";
-    readonly 'brand-secondary-light': "#2697B7";
-    readonly 'brand-secondary-dark': "#2A617F";
-    readonly 'brand-secondary-subtle': "rgba(48, 123, 155, 0.12)";
-    readonly 'brand-secondary-hover': "#2697B7";
-    readonly 'brand-secondary-active': "#01B5D1";
-    readonly 'on-brand-primary': "#FFFFFF";
-    readonly 'on-brand-secondary': "#FFFFFF";
-    readonly 'status-success': "#2ED573";
-    readonly 'status-success-light': "#58F69E";
-    readonly 'status-success-dark': "#298732";
-    readonly 'status-success-subtle': "rgba(46, 213, 115, 0.12)";
-    readonly 'status-live': "#2ED573";
-    readonly 'status-live-muted': "#22A444";
-    readonly 'status-error': "#D14343";
-    readonly 'status-error-light': "#E05254";
-    readonly 'status-error-dark': "#A4221C";
-    readonly 'status-error-subtle': "rgba(209, 67, 67, 0.12)";
-    readonly 'status-error-vivid': "#FF4757";
-    readonly 'status-error-vivid-light': "#FF6070";
-    readonly 'status-error-vivid-dark': "#C42539";
-    readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
-    readonly 'status-warning': "#F9B415";
-    readonly 'status-warning-light': "#FFD352";
-    readonly 'status-warning-dark': "#C27400";
-    readonly 'status-warning-subtle': "rgba(249, 180, 21, 0.12)";
-    readonly 'status-info': "#2196F3";
-    readonly 'status-info-light': "#78C2FF";
-    readonly 'status-info-dark': "#1072CB";
-    readonly 'status-info-subtle': "rgba(33, 150, 243, 0.12)";
-    readonly 'on-status-success': "#FFFFFF";
-    readonly 'on-status-error': "#FFFFFF";
-    readonly 'on-status-warning': "#FFFFFF";
-    readonly 'on-status-info': "#FFFFFF";
-    readonly 'result-improve': "#4caf50";
-    readonly 'result-improve-light': "rgba(76, 175, 80, 0.16)";
-    readonly 'result-improve-dark': "#248a24";
-    readonly 'result-degrade': "#ef5350";
-    readonly 'result-degrade-light': "rgba(239, 83, 80, 0.16)";
-    readonly 'result-degrade-dark': "#b30000";
-    readonly 'result-inconclusive': "#9E9A97";
-    readonly 'result-inconclusive-light': "rgba(158, 154, 151, 0.16)";
-    readonly 'result-neutral': "#9CA3AF";
-    readonly 'on-result-improve': "#FFFFFF";
-    readonly 'on-result-degrade': "#FFFFFF";
-    readonly 'on-result-inconclusive': "#FFFFFF";
-    readonly 'data-1': "#1965B0";
-    readonly 'data-2': "#4EB265";
-    readonly 'data-3': "#F7F056";
-    readonly 'data-4': "#DC050C";
-    readonly 'data-5': "#882E72";
-    readonly 'data-6': "#F4A736";
-    readonly 'data-7': "#7BAFDE";
-    readonly 'data-8': "#90C987";
-    readonly 'data-9': "#CAACCB";
-    readonly 'data-10': "#EE8026";
-    readonly 'text-primary': "#F3F4F6";
-    readonly 'text-secondary': "#9CA3AF";
-    readonly 'text-tertiary': "#6B7280";
-    readonly 'text-disabled': "rgba(255, 255, 255, 0.38)";
-    readonly 'text-inverse': "#111827";
-    readonly 'text-link': "#828DF8";
-    readonly 'text-link-hover': "#60A5FA";
-    readonly 'surface-base': "#252321";
-    readonly 'surface-elevated': "#2C2A28";
-    readonly 'surface-raised': "#31302F";
-    readonly 'surface-overlay': "#373635";
-    readonly 'surface-input': "#2C2A28";
-    readonly 'surface-inset': "#13100D";
-    readonly 'background-base': "#1C1916";
-    readonly 'background-default': "#252321";
-    readonly 'background-subtle': "#2C2A28";
-    readonly 'background-frame': "#100D0A";
-    readonly 'border-default': "#1F1F1F";
-    readonly 'border-subtle': "#1C1C1C";
-    readonly 'border-strong': "#2C2C2C";
-    readonly 'border-prominent': "#3C3C3C";
-    readonly 'border-focus': "#828DF8";
-    readonly 'border-input': "#4B5563";
-    readonly 'border-input-hover': "#6B7280";
-    readonly 'border-input-focus': "#828DF8";
-    readonly 'border-input-error': "#EF4444";
-    readonly 'hairline-subtle': "rgba(255, 255, 255, 0.06)";
-    readonly 'hairline-default': "rgba(255, 255, 255, 0.09)";
-    readonly 'hairline-strong': "rgba(255, 255, 255, 0.14)";
-    readonly 'interactive-hover': "rgba(255, 255, 255, 0.04)";
-    readonly 'interactive-focus': "rgba(255, 255, 255, 0.12)";
-    readonly 'interactive-active': "rgba(255, 255, 255, 0.16)";
-    readonly 'interactive-selected': "rgba(255, 255, 255, 0.08)";
-    readonly 'interactive-disabled': "rgba(255, 255, 255, 0.12)";
-    readonly 'interactive-disabled-text': "rgba(255, 255, 255, 0.26)";
-    readonly divider: "#1F1F1F";
-    readonly 'avatar-background': "#4B5563";
-    readonly 'avatar-text': "#FFFFFF";
-};
-
 /**
  * Elevation System
  *
@@ -587,6 +63,20 @@ declare function getElevationSurface(baseColor: string, level: ElevationLevel, t
  * @param isHovered - Whether element is hovered
  * @returns ViewStyle with shadow properties
  */
+/**
+ * The lowest elevation that still casts an outward shadow.
+ *
+ * On a near-black surface a drop-shadow is inert: at levels 1-3 the shadow is
+ * dark-on-dark and contributes nothing a viewer can see, while still costing a
+ * composite layer. Material dropped shadow-as-hierarchy for the same reason.
+ * Inline hierarchy is the hairline's job (`hairline-*`), which composites by a
+ * constant amount over any plane.
+ *
+ * At 4+ the element is genuinely FLOATING over a backdrop — menu, popover,
+ * toast — where a large soft shadow describes separation from the page rather
+ * than a rank in a stack. Those should also carry a hairline ring.
+ */
+declare const FLOATING_ELEVATION_MIN: ElevationLevel;
 declare function getElevationShadow(baseColor: string, level: ElevationLevel, theme: 'light' | 'dark', isHovered?: boolean): ViewStyle;
 /**
  * Elevation level backing a `<Surface pressed>` recess: the shallow `inset`
@@ -666,414 +156,6 @@ type GlowIntensity = 'subtle' | 'medium' | 'strong';
  */
 declare function getGlowShadow(color: string, intensity?: GlowIntensity): ViewStyle;
 
-/**
- * Primitive Design Tokens
- *
- * Raw values with no semantic meaning. These are the foundation of the design system
- * and should rarely be used directly in components. Use semantic tokens instead.
- */
-declare const primitiveColors: {
-    readonly blue: {
-        readonly 50: "#EFF6FF";
-        readonly 100: "#DBEAFE";
-        readonly 200: "#BFDBFE";
-        readonly 300: "#93C5FD";
-        readonly 400: "#60A5FA";
-        readonly 500: "#3B82F6";
-        readonly 600: "#5048E5";
-        readonly 700: "#3832A0";
-        readonly 800: "#1E40AF";
-        readonly 900: "#1E3A8A";
-    };
-    readonly red: {
-        readonly 50: "#FEF2F2";
-        readonly 100: "#FEE2E2";
-        readonly 200: "#FECACA";
-        readonly 300: "#FCA5A5";
-        readonly 400: "#DA6868";
-        readonly 500: "#EF4444";
-        readonly 600: "#D14343";
-        readonly 700: "#922E2E";
-        readonly 800: "#991B1B";
-        readonly 900: "#7F1D1D";
-    };
-    readonly redVivid: {
-        readonly 50: "#FFECEE";
-        readonly 100: "#FFD6DB";
-        readonly 200: "#FFB3BC";
-        readonly 300: "#FF8593";
-        readonly 400: "#FF6070";
-        readonly 500: "#FF4757";
-        readonly 600: "#E63548";
-        readonly 700: "#C42539";
-        readonly 800: "#9E1C2C";
-        readonly 900: "#7A1520";
-    };
-    readonly neutral: {
-        readonly 50: "#FAFAFA";
-        readonly 100: "#F3F4F6";
-        readonly 200: "#E5E7EB";
-        readonly 300: "#D1D5DB";
-        readonly 400: "#9CA3AF";
-        readonly 500: "#6B7280";
-        readonly 600: "#4B5563";
-        readonly 700: "#374151";
-        readonly 800: "#1F2937";
-        readonly 900: "#111827";
-        readonly 950: "#030712";
-    };
-    readonly charcoal: {
-        readonly 0: "#6E6E6E";
-        readonly 50: "#5D5D5D";
-        readonly 100: "#4C4C4C";
-        readonly 200: "#3C3C3C";
-        readonly 300: "#2C2C2C";
-        readonly 400: "#1F1F1F";
-        readonly 500: "#1C1C1C";
-        readonly 600: "#191919";
-        readonly 700: "#161616";
-        readonly 800: "#131313";
-        readonly 900: "#101010";
-    };
-    readonly white: "#FFFFFF";
-    readonly black: "#000000";
-    readonly transparent: "transparent";
-};
-/**
- * Surface ramp — dark mode (TD-surface-tokens, S-1, re-spaced S-3)
- *
- * Warm-tapered, DERIVED ramp — NOT hand-picked. Shipped verbatim as the output of
- * `deriveSurfaceRamp(shellL=9, steps=[4.5,3.5,3,2.5], rbShadow=6, rbHilite=1.5)`
- * (see `packages/ui/src/components/ui/surface/surface-lab-shared.tsx` on branch
- * `feat/TD-unified-lab`, story `Lab/Surface Exploration -> Surface Ramp System`
- * — that lab default is `[4.5,2.5,2,1.5]` as of this writing and should be
- * updated to match on that branch, follow-up, not done here).
- * Lightness is CIELAB L* off the shell, with DIMINISHING steps (4.5/3.5/3/2.5) —
- * the frame->content jump is biggest, each plane above adds less, but the top
- * three planes (elevated/raised/overlay) were re-spaced WIDER (S-3) than the
- * original 2.5/2/1.5 taper so they read as distinct planes without leaning on
- * the hairline alone. `background`/`base`/`inset` are unchanged by the re-space.
- * Warmth (R-B) tapers 6 -> 1.5 from frame to hero so bright content planes stay
- * near-neutral.
- * Kept separate from the `charcoal` scale above (which several existing
- * components reference directly for unrelated shadow/track tints) so this
- * change is additive and doesn't ripple into those consumers.
- * See coordination/design-explorations/surface-system-north-star.md.
- */
-declare const surfaceRampDark: {
-    readonly inset: "#13100D";
-    readonly background: "#1C1916";
-    readonly base: "#252321";
-    readonly elevated: "#2C2A28";
-    readonly raised: "#31302F";
-    readonly overlay: "#373635";
-};
-/**
- * Frame/bezel primitive — dark mode (TD-surface-tokens, S-3)
- *
- * The chrome that "exits the content ramp" entirely: the top bar + side nav
- * shell. Sits ONE STEP BELOW `surfaceRampDark.background` (L*9), darker even
- * than `surfaceRampDark.inset` (L*4.5) — it isn't a plane IN the ramp, it's
- * the bezel the ramp sits inside. Literal, not `deriveSurfaceRamp()` output.
- */
-declare const backgroundFrameDark = "#100D0A";
-/**
- * Derived tonal ramps (TD-05.09 color foundations)
- *
- * Seven OKLCH-generated hue ramps, 11 perceptual lightness steps each (50 -> 950).
- * Built with hue-torsion + a chroma arc, anchored through existing brand/semantic
- * hexes. `pin` marks the step each ramp flows through its anchor.
- * This is the single source of truth for chromatic hexes — the categorical palette
- * below references these steps rather than duplicating values.
- * See coordination/design-explorations/foundations.
- */
-declare const primitiveRamps: {
-    readonly red: {
-        readonly 50: "#FFF4F4";
-        readonly 100: "#FFE3E5";
-        readonly 200: "#FFC2C5";
-        readonly 300: "#FF9A9D";
-        readonly 400: "#F77175";
-        readonly 500: "#E05254";
-        readonly 600: "#D14343";
-        readonly 700: "#A4221C";
-        readonly 800: "#7E1002";
-        readonly 900: "#5A0900";
-        readonly 950: "#3D0400";
-    };
-    readonly orange: {
-        readonly 50: "#FFF5ED";
-        readonly 100: "#FFE6D4";
-        readonly 200: "#FFC7A2";
-        readonly 300: "#FFA063";
-        readonly 400: "#FF7900";
-        readonly 500: "#DA5F00";
-        readonly 600: "#B94A00";
-        readonly 700: "#983804";
-        readonly 800: "#6F290F";
-        readonly 900: "#4E1C0C";
-        readonly 950: "#331107";
-    };
-    readonly amber: {
-        readonly 50: "#FFF7DD";
-        readonly 100: "#FFEAA9";
-        readonly 200: "#FFD352";
-        readonly 300: "#F9B415";
-        readonly 400: "#E08C00";
-        readonly 500: "#C27400";
-        readonly 600: "#A45E00";
-        readonly 700: "#814D14";
-        readonly 800: "#5B3A1A";
-        readonly 900: "#442503";
-        readonly 950: "#301500";
-    };
-    readonly green: {
-        readonly 50: "#E3FFEE";
-        readonly 100: "#B5FFD2";
-        readonly 200: "#58F69E";
-        readonly 300: "#2ED573";
-        readonly 400: "#21C05D";
-        readonly 500: "#22A444";
-        readonly 600: "#298732";
-        readonly 700: "#2B6B25";
-        readonly 800: "#264D1C";
-        readonly 900: "#1B3515";
-        readonly 950: "#11220D";
-    };
-    readonly cyan: {
-        readonly 50: "#E6FBFF";
-        readonly 100: "#C2F6FF";
-        readonly 200: "#62EAFF";
-        readonly 300: "#22D3EE";
-        readonly 400: "#01B5D1";
-        readonly 500: "#2697B7";
-        readonly 600: "#307B9B";
-        readonly 700: "#2A617F";
-        readonly 800: "#22465F";
-        readonly 900: "#0B3149";
-        readonly 950: "#001F36";
-    };
-    readonly blue: {
-        readonly 50: "#EFF8FF";
-        readonly 100: "#D9EFFF";
-        readonly 200: "#ACDBFF";
-        readonly 300: "#78C2FF";
-        readonly 400: "#3CA8FF";
-        readonly 500: "#2196F3";
-        readonly 600: "#1072CB";
-        readonly 700: "#135AA8";
-        readonly 800: "#14407E";
-        readonly 900: "#112C5A";
-        readonly 950: "#091B3C";
-    };
-    readonly magenta: {
-        readonly 50: "#FFF3F9";
-        readonly 100: "#FFE2F1";
-        readonly 200: "#FFBDE2";
-        readonly 300: "#FF8FD5";
-        readonly 400: "#ED69C3";
-        readonly 500: "#D548AF";
-        readonly 600: "#BA2996";
-        readonly 700: "#9C0D7A";
-        readonly 800: "#77005A";
-        readonly 900: "#56003F";
-        readonly 950: "#3B0029";
-    };
-};
-/**
- * Categorical (qualitative) palette — an ordered, CVD-safe series expressed as
- * references into {@link primitiveRamps} (one source of truth; the palette moves
- * with the ramps).
- *
- * Design: a single canonical hue order (blue, magenta, red, orange, green, cyan,
- * amber), with steps chosen vivid-midtone-first and fanned lighter/darker as the
- * series grows to preserve separation. The sequence is nested-stable — a chart
- * with N series uses the first N colors, and the series index is stable as N
- * changes. Colorblind-safe worst-case deuteranopia/protanopia floor 8 holds
- * through {@link CATEGORICAL_CVD_SAFE_MAX} colors; the 7th is an extended color
- * that should be paired with a legend or other secondary encoding.
- *
- * Two variants: `default` (vivid, sits on neutral/light surfaces, legible under
- * black text) and `dark` (deeper shades legible under white text on a fill). A
- * separate "light" variant was dropped — the vivid `default` picks already clear
- * black-text contrast, so it doubles as the light-context palette.
- */
-declare const categoricalPalette: {
-    readonly default: readonly ["#2196F3", "#D548AF", "#E05254", "#FF7900", "#2ED573", "#22D3EE", "#A45E00"];
-    readonly dark: readonly ["#1072CB", "#BA2996", "#E05254", "#B94A00", "#264D1C", "#22465F", "#C27400"];
-};
-/** Largest series count that holds the CVD floor without a legend. */
-declare const CATEGORICAL_CVD_SAFE_MAX = 6;
-/**
- * Categorical palette variant.
- * - `default` : vivid; neutral/light surfaces, legible under black text
- * - `dark`    : deeper shades, legible under white text on a filled swatch
- */
-type CategoricalVariant = keyof typeof categoricalPalette;
-/**
- * Get a color from the ordered categorical palette by series index.
- * The palette is nested-stable, so the color for a given index does not change
- * with the total series count; `index` simply wraps past the end.
- *
- * @param index - 0-based series index (wraps past the end)
- * @param variant - `default` (black-text / light surfaces) or `dark` (white text)
- * @returns The hex color string
- */
-declare function getCategoricalColor(index: number, variant?: CategoricalVariant): string;
-/**
- * Diverging status scale (BodyMap training-status: under → optimal → over) as
- * references into {@link primitiveRamps}. A true diverging shape — `optimal` is
- * the lightest center, the extremes go darker — so the signal reads in lightness
- * (colorblind-robust; worst-case deut/protanopia min ΔE ~10.9) and the direction
- * reads in the blue↔red axis (the CVD-safe hue pair).
- *
- * Tuned so every stop is dark enough for the fill yet light enough that BLACK
- * text clears 4.5:1 on all five — no per-cell white/black flipping. The value
- * valley is symmetric: the two mid-arms (maintenance / approaching) sit at equal
- * lightness (both ~0.53 relative luminance), the ends darker.
- */
-declare const divergingScale: readonly ["#2196F3", "#22D3EE", "#58F69E", "#F9B415", "#D14343"];
-/**
- * Sequential "effort" scale (low → high intensity: green → yellow → orange → red)
- * as references into {@link primitiveRamps}. A 6-stop ordinal palette; the
- * velocity/RPE strip sub-samples it. Every adjacent pair clears the CVD floor
- * (min deut/protan ΔE ≥ 4.5), and within that the hue walk is kept smooth —
- * the amber-200 → amber-300 → orange-400 run steps the yellow→orange transition
- * gradually rather than lurching. Order encodes magnitude, so it tolerates the
- * green↔red CVD pair. Stops 0–3 take black text; the dark reds take white.
- */
-declare const sequentialEffort: readonly ["#2ED573", "#FFD352", "#F9B415", "#FF7900", "#D14343", "#A4221C"];
-/**
- * Best-contrast text color (black or white) for a solid fill — for labels sitting
- * on categorical/diverging/effort swatches. Uses the WCAG relative-luminance ratio.
- */
-declare function bestTextColor(hex: string): '#000000' | '#FFFFFF';
-/**
- * Discrete rainbow palette for data visualization
- * Based on Paul Tol's color schemes: https://personal.sron.nl/~pault/#fig:scheme_rainbow_discrete
- */
-declare const discreteRainbow: readonly ["#E8ECFB", "#D9CCE3", "#D1BBD7", "#CAACCB", "#BA8DB4", "#AE76A3", "#AA6F9E", "#994F88", "#882E72", "#1965B0", "#437DBF", "#5289C7", "#6195CF", "#7BAFDE", "#4EB265", "#90C987", "#CAE0AB", "#F7F056", "#F7CB45", "#F6C141", "#F4A736", "#F1932D", "#EE8026", "#E8601C", "#E65518", "#DC050C", "#A5170E", "#72190E", "#42150A"];
-/**
- * Get a color from the discrete rainbow palette for a given index and palette size.
- * Colors are optimized for visual distinction at each palette size.
- *
- * @param index - The index of the color in the series (0-based)
- * @param size - The total number of colors needed (1-23)
- * @returns The hex color string
- */
-declare function getDiscreteRainbowColor(index: number, size: number): string;
-declare const primitiveTypography: {
-    readonly fontFamilies: {
-        readonly sans: readonly ["Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", "sans-serif"];
-        readonly body: readonly ["Nunito Sans", "sans-serif"];
-        readonly heading: readonly ["Space Grotesk", "sans-serif"];
-        readonly mono: readonly ["SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", "monospace"];
-    };
-    readonly fontSizes: {
-        readonly xs: "0.75rem";
-        readonly sm: "0.875rem";
-        readonly base: "1rem";
-        readonly lg: "1.125rem";
-        readonly xl: "1.5rem";
-        readonly '2xl': "2rem";
-        readonly '3xl': "2.25rem";
-        readonly '4xl': "3rem";
-        readonly '5xl': "3.5rem";
-    };
-    readonly fontWeights: {
-        readonly normal: 400;
-        readonly medium: 500;
-        readonly semibold: 600;
-        readonly bold: 700;
-    };
-    readonly lineHeights: {
-        readonly none: 1;
-        readonly tight: 1.375;
-        readonly snug: 1.5;
-        readonly normal: 1.57;
-        readonly relaxed: 1.66;
-        readonly loose: 1.75;
-    };
-    readonly letterSpacing: {
-        readonly tighter: "-0.05em";
-        readonly tight: "-0.025em";
-        readonly normal: "0em";
-        readonly wide: "0.025em";
-        readonly wider: "0.05em";
-        readonly widest: "0.5px";
-    };
-};
-declare const primitiveSpacing: {
-    readonly 0: "0";
-    readonly px: "1px";
-    readonly 0.5: "0.125rem";
-    readonly 1: "0.25rem";
-    readonly 1.5: "0.375rem";
-    readonly 2: "0.5rem";
-    readonly 2.5: "0.625rem";
-    readonly 3: "0.75rem";
-    readonly 3.5: "0.875rem";
-    readonly 4: "1rem";
-    readonly 5: "1.25rem";
-    readonly 6: "1.5rem";
-    readonly 7: "1.75rem";
-    readonly 8: "2rem";
-    readonly 9: "2.25rem";
-    readonly 10: "2.5rem";
-    readonly 11: "2.75rem";
-    readonly 12: "3rem";
-    readonly 14: "3.5rem";
-    readonly 16: "4rem";
-    readonly 20: "5rem";
-    readonly 24: "6rem";
-    readonly 28: "7rem";
-    readonly 32: "8rem";
-};
-declare const primitiveBorderRadius: {
-    readonly none: "0";
-    readonly sm: "4px";
-    readonly DEFAULT: "8px";
-    readonly md: "8px";
-    readonly lg: "12px";
-    readonly xl: "16px";
-    readonly '2xl': "24px";
-    readonly full: "9999px";
-};
-declare const primitiveShadows: {
-    readonly none: "none";
-    readonly sm: "0px 1px 2px rgba(100, 116, 139, 0.12)";
-    readonly DEFAULT: "0px 1px 3px rgba(100, 116, 139, 0.12), 0px 1px 2px rgba(100, 116, 139, 0.24)";
-    readonly md: "0px 4px 6px rgba(100, 116, 139, 0.12)";
-    readonly lg: "0px 10px 15px rgba(100, 116, 139, 0.12)";
-    readonly xl: "0px 20px 25px rgba(100, 116, 139, 0.12)";
-    readonly '2xl': "0px 25px 50px rgba(100, 116, 139, 0.25)";
-    readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)";
-};
-declare const primitiveBreakpoints: {
-    readonly xs: 0;
-    readonly sm: 600;
-    readonly md: 1000;
-    readonly lg: 1200;
-    readonly xl: 1920;
-};
-declare const primitiveZIndex: {
-    readonly hide: -1;
-    readonly auto: "auto";
-    readonly base: 0;
-    readonly docked: 10;
-    readonly dropdown: 1000;
-    readonly sticky: 1100;
-    readonly drawer: 1100;
-    readonly banner: 1200;
-    readonly appBar: 1200;
-    readonly overlay: 1300;
-    readonly modal: 1400;
-    readonly popover: 1500;
-    readonly skipLink: 1600;
-    readonly toast: 1700;
-    readonly tooltip: 1800;
-};
-
 /**
  * Theme Configuration
  *
@@ -1120,29 +202,25 @@ declare const lightThemeCSSVars: {
     readonly '--color-status-warning-subtle': "#FFF7DD";
     readonly '--color-status-info': "#2196F3";
     readonly '--color-status-info-subtle': "#EFF8FF";
-    readonly '--color-status-error-vivid': "#FF4757";
-    readonly '--color-status-error-vivid-light': "#FF6070";
-    readonly '--color-status-error-vivid-dark': "#C42539";
+    readonly '--color-status-error-vivid': "#D14343";
+    readonly '--color-status-error-vivid-light': "#E05254";
+    readonly '--color-status-error-vivid-dark': "#A4221C";
     readonly '--color-status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
     readonly '--color-text-primary': "#121828";
     readonly '--color-text-secondary': "#65748B";
-    readonly '--color-text-tertiary': "#9CA3AF";
+    readonly '--color-text-tertiary': "#A29F9D";
     readonly '--color-text-disabled': "rgba(55, 65, 81, 0.48)";
     readonly '--color-text-inverse': "#FFFFFF";
-    readonly '--color-text-link': "#5048E5";
+    readonly '--color-text-link': "#1072CB";
     readonly '--color-surface-base': "#FFFFFF";
-    readonly '--color-surface-elevated': "#FAFAFA";
-    readonly '--color-surface-raised': "#F3F4F6";
-    readonly '--color-surface-inset': "#D1D5DB";
+    readonly '--color-surface-elevated': "#F9F6F3";
+    readonly '--color-surface-raised': "#EDEAE7";
     readonly '--color-background-base': "#EBEBEB";
     readonly '--color-background-default': "#FFFFFF";
-    readonly '--color-background-subtle': "#FAFAFA";
-    readonly '--color-background-frame': "#9CA3AF";
-    readonly '--color-border-default': "#E8E9EB";
-    readonly '--color-border-subtle': "#F3F4F6";
-    readonly '--color-border-strong': "#D1D5DB";
-    readonly '--color-border-prominent': "#9CA3AF";
-    readonly '--color-border-focus': "#5048E5";
+    readonly '--color-background-subtle': "#F9F6F3";
+    readonly '--color-background-frame': "#A29F9D";
+    readonly '--color-border-prominent': "#A29F9D";
+    readonly '--color-border-focus': "#1072CB";
     readonly '--color-interactive-hover': "rgba(55, 65, 81, 0.04)";
     readonly '--color-interactive-focus': "rgba(55, 65, 81, 0.12)";
     readonly '--color-interactive-active': "rgba(55, 65, 81, 0.16)";
@@ -1173,7 +251,7 @@ declare const lightThemeCSSVars: {
     readonly '--color-result-degrade-dark': "#b30000";
     readonly '--color-result-inconclusive': "#9E9A97";
     readonly '--color-result-inconclusive-light': "rgba(158, 154, 151, 0.12)";
-    readonly '--color-result-neutral': "#6B7280";
+    readonly '--color-result-neutral': "#72716F";
     readonly '--color-on-result-improve': "#FFFFFF";
     readonly '--color-on-result-degrade': "#FFFFFF";
     readonly '--color-on-result-inconclusive': "#FFFFFF";
@@ -1187,18 +265,18 @@ declare const lightThemeCSSVars: {
     readonly '--color-data-8': "#90C987";
     readonly '--color-data-9': "#CAACCB";
     readonly '--color-data-10': "#EE8026";
-    readonly '--color-text-link-hover': "#3832A0";
+    readonly '--color-text-link-hover': "#135AA8";
     readonly '--color-surface-overlay': "#FFFFFF";
-    readonly '--color-surface-input': "#FAFAFA";
-    readonly '--color-border-input': "#D1D5DB";
-    readonly '--color-border-input-hover': "#9CA3AF";
-    readonly '--color-border-input-focus': "#5048E5";
+    readonly '--color-surface-input': "#F9F6F3";
+    readonly '--color-border-input': "#D4D1CE";
+    readonly '--color-border-input-hover': "#A29F9D";
+    readonly '--color-border-input-focus': "#1072CB";
     readonly '--color-border-input-error': "#D14343";
     readonly '--color-hairline-subtle': "rgba(0, 0, 0, 0.06)";
     readonly '--color-hairline-default': "rgba(0, 0, 0, 0.09)";
     readonly '--color-hairline-strong': "rgba(0, 0, 0, 0.14)";
     readonly '--color-interactive-disabled-text': "rgba(55, 65, 81, 0.26)";
-    readonly '--color-avatar-background': "#6B7280";
+    readonly '--color-avatar-background': "#72716F";
     readonly '--color-avatar-text': "#FFFFFF";
 };
 declare const darkThemeCSSVars: {
@@ -1240,35 +318,31 @@ declare const darkThemeCSSVars: {
     readonly '--color-status-warning-subtle': "rgba(249, 180, 21, 0.12)";
     readonly '--color-status-info': "#2196F3";
     readonly '--color-status-info-subtle': "rgba(33, 150, 243, 0.12)";
-    readonly '--color-status-error-vivid': "#FF4757";
-    readonly '--color-status-error-vivid-light': "#FF6070";
-    readonly '--color-status-error-vivid-dark': "#C42539";
+    readonly '--color-status-error-vivid': "#D14343";
+    readonly '--color-status-error-vivid-light': "#E05254";
+    readonly '--color-status-error-vivid-dark': "#A4221C";
     readonly '--color-status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
-    readonly '--color-text-primary': "#F3F4F6";
-    readonly '--color-text-secondary': "#9CA3AF";
-    readonly '--color-text-tertiary': "#6B7280";
+    readonly '--color-text-primary': "#F9F6F3";
+    readonly '--color-text-secondary': "#A29F9D";
+    readonly '--color-text-tertiary': "#888684";
     readonly '--color-text-disabled': "rgba(255, 255, 255, 0.38)";
-    readonly '--color-text-inverse': "#111827";
+    readonly '--color-text-inverse': "#1C1916";
     readonly '--color-text-link': "#828DF8";
     readonly '--color-surface-base': "#252321";
     readonly '--color-surface-elevated': "#2C2A28";
     readonly '--color-surface-raised': "#31302F";
-    readonly '--color-surface-inset': "#13100D";
     readonly '--color-background-base': "#1C1916";
     readonly '--color-background-default': "#252321";
     readonly '--color-background-subtle': "#2C2A28";
     readonly '--color-background-frame': "#100D0A";
-    readonly '--color-border-default': "#1F1F1F";
-    readonly '--color-border-subtle': "#1C1C1C";
-    readonly '--color-border-strong': "#2C2C2C";
-    readonly '--color-border-prominent': "#3C3C3C";
+    readonly '--color-border-prominent': "#424140";
     readonly '--color-border-focus': "#828DF8";
     readonly '--color-interactive-hover': "rgba(255, 255, 255, 0.04)";
     readonly '--color-interactive-focus': "rgba(255, 255, 255, 0.12)";
     readonly '--color-interactive-active': "rgba(255, 255, 255, 0.16)";
     readonly '--color-interactive-selected': "rgba(255, 255, 255, 0.08)";
     readonly '--color-interactive-disabled': "rgba(255, 255, 255, 0.12)";
-    readonly '--color-divider': "#1F1F1F";
+    readonly '--color-divider': "rgba(255, 255, 255, 0.09)";
     readonly '--color-brand-primary-hover': "#FFA063";
     readonly '--color-brand-primary-active': "#FFC7A2";
     readonly '--color-brand-secondary-hover': "#2697B7";
@@ -1293,7 +367,7 @@ declare const darkThemeCSSVars: {
     readonly '--color-result-degrade-dark': "#b30000";
     readonly '--color-result-inconclusive': "#9E9A97";
     readonly '--color-result-inconclusive-light': "rgba(158, 154, 151, 0.16)";
-    readonly '--color-result-neutral': "#9CA3AF";
+    readonly '--color-result-neutral': "#A29F9D";
     readonly '--color-on-result-improve': "#FFFFFF";
     readonly '--color-on-result-degrade': "#FFFFFF";
     readonly '--color-on-result-inconclusive': "#FFFFFF";
@@ -1307,18 +381,18 @@ declare const darkThemeCSSVars: {
     readonly '--color-data-8': "#90C987";
     readonly '--color-data-9': "#CAACCB";
     readonly '--color-data-10': "#EE8026";
-    readonly '--color-text-link-hover': "#60A5FA";
+    readonly '--color-text-link-hover': "#3CA8FF";
     readonly '--color-surface-overlay': "#373635";
     readonly '--color-surface-input': "#2C2A28";
-    readonly '--color-border-input': "#4B5563";
-    readonly '--color-border-input-hover': "#6B7280";
+    readonly '--color-border-input': "#5A5958";
+    readonly '--color-border-input-hover': "#72716F";
     readonly '--color-border-input-focus': "#828DF8";
-    readonly '--color-border-input-error': "#EF4444";
-    readonly '--color-hairline-subtle': "rgba(255, 255, 255, 0.06)";
-    readonly '--color-hairline-default': "rgba(255, 255, 255, 0.09)";
-    readonly '--color-hairline-strong': "rgba(255, 255, 255, 0.14)";
+    readonly '--color-border-input-error': "#E05254";
+    readonly '--color-hairline-subtle': "rgba(255, 255, 255, 0.10)";
+    readonly '--color-hairline-default': "rgba(255, 255, 255, 0.15)";
+    readonly '--color-hairline-strong': "rgba(255, 255, 255, 0.22)";
     readonly '--color-interactive-disabled-text': "rgba(255, 255, 255, 0.26)";
-    readonly '--color-avatar-background': "#4B5563";
+    readonly '--color-avatar-background': "#5A5958";
     readonly '--color-avatar-text': "#FFFFFF";
 };
 declare function getThemeCSSVars(mode: ThemeMode): {
@@ -1360,29 +434,25 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-status-warning-subtle': "#FFF7DD";
     readonly '--color-status-info': "#2196F3";
     readonly '--color-status-info-subtle': "#EFF8FF";
-    readonly '--color-status-error-vivid': "#FF4757";
-    readonly '--color-status-error-vivid-light': "#FF6070";
-    readonly '--color-status-error-vivid-dark': "#C42539";
+    readonly '--color-status-error-vivid': "#D14343";
+    readonly '--color-status-error-vivid-light': "#E05254";
+    readonly '--color-status-error-vivid-dark': "#A4221C";
     readonly '--color-status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
     readonly '--color-text-primary': "#121828";
     readonly '--color-text-secondary': "#65748B";
-    readonly '--color-text-tertiary': "#9CA3AF";
+    readonly '--color-text-tertiary': "#A29F9D";
     readonly '--color-text-disabled': "rgba(55, 65, 81, 0.48)";
     readonly '--color-text-inverse': "#FFFFFF";
-    readonly '--color-text-link': "#5048E5";
+    readonly '--color-text-link': "#1072CB";
     readonly '--color-surface-base': "#FFFFFF";
-    readonly '--color-surface-elevated': "#FAFAFA";
-    readonly '--color-surface-raised': "#F3F4F6";
-    readonly '--color-surface-inset': "#D1D5DB";
+    readonly '--color-surface-elevated': "#F9F6F3";
+    readonly '--color-surface-raised': "#EDEAE7";
     readonly '--color-background-base': "#EBEBEB";
     readonly '--color-background-default': "#FFFFFF";
-    readonly '--color-background-subtle': "#FAFAFA";
-    readonly '--color-background-frame': "#9CA3AF";
-    readonly '--color-border-default': "#E8E9EB";
-    readonly '--color-border-subtle': "#F3F4F6";
-    readonly '--color-border-strong': "#D1D5DB";
-    readonly '--color-border-prominent': "#9CA3AF";
-    readonly '--color-border-focus': "#5048E5";
+    readonly '--color-background-subtle': "#F9F6F3";
+    readonly '--color-background-frame': "#A29F9D";
+    readonly '--color-border-prominent': "#A29F9D";
+    readonly '--color-border-focus': "#1072CB";
     readonly '--color-interactive-hover': "rgba(55, 65, 81, 0.04)";
     readonly '--color-interactive-focus': "rgba(55, 65, 81, 0.12)";
     readonly '--color-interactive-active': "rgba(55, 65, 81, 0.16)";
@@ -1413,7 +483,7 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-result-degrade-dark': "#b30000";
     readonly '--color-result-inconclusive': "#9E9A97";
     readonly '--color-result-inconclusive-light': "rgba(158, 154, 151, 0.12)";
-    readonly '--color-result-neutral': "#6B7280";
+    readonly '--color-result-neutral': "#72716F";
     readonly '--color-on-result-improve': "#FFFFFF";
     readonly '--color-on-result-degrade': "#FFFFFF";
     readonly '--color-on-result-inconclusive': "#FFFFFF";
@@ -1427,18 +497,18 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-data-8': "#90C987";
     readonly '--color-data-9': "#CAACCB";
     readonly '--color-data-10': "#EE8026";
-    readonly '--color-text-link-hover': "#3832A0";
+    readonly '--color-text-link-hover': "#135AA8";
     readonly '--color-surface-overlay': "#FFFFFF";
-    readonly '--color-surface-input': "#FAFAFA";
-    readonly '--color-border-input': "#D1D5DB";
-    readonly '--color-border-input-hover': "#9CA3AF";
-    readonly '--color-border-input-focus': "#5048E5";
+    readonly '--color-surface-input': "#F9F6F3";
+    readonly '--color-border-input': "#D4D1CE";
+    readonly '--color-border-input-hover': "#A29F9D";
+    readonly '--color-border-input-focus': "#1072CB";
     readonly '--color-border-input-error': "#D14343";
     readonly '--color-hairline-subtle': "rgba(0, 0, 0, 0.06)";
     readonly '--color-hairline-default': "rgba(0, 0, 0, 0.09)";
     readonly '--color-hairline-strong': "rgba(0, 0, 0, 0.14)";
     readonly '--color-interactive-disabled-text': "rgba(55, 65, 81, 0.26)";
-    readonly '--color-avatar-background': "#6B7280";
+    readonly '--color-avatar-background': "#72716F";
     readonly '--color-avatar-text': "#FFFFFF";
 } | {
     readonly '--color-brand-primary-rgb': "255, 121, 0";
@@ -1479,35 +549,31 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-status-warning-subtle': "rgba(249, 180, 21, 0.12)";
     readonly '--color-status-info': "#2196F3";
     readonly '--color-status-info-subtle': "rgba(33, 150, 243, 0.12)";
-    readonly '--color-status-error-vivid': "#FF4757";
-    readonly '--color-status-error-vivid-light': "#FF6070";
-    readonly '--color-status-error-vivid-dark': "#C42539";
+    readonly '--color-status-error-vivid': "#D14343";
+    readonly '--color-status-error-vivid-light': "#E05254";
+    readonly '--color-status-error-vivid-dark': "#A4221C";
     readonly '--color-status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
-    readonly '--color-text-primary': "#F3F4F6";
-    readonly '--color-text-secondary': "#9CA3AF";
-    readonly '--color-text-tertiary': "#6B7280";
+    readonly '--color-text-primary': "#F9F6F3";
+    readonly '--color-text-secondary': "#A29F9D";
+    readonly '--color-text-tertiary': "#888684";
     readonly '--color-text-disabled': "rgba(255, 255, 255, 0.38)";
-    readonly '--color-text-inverse': "#111827";
+    readonly '--color-text-inverse': "#1C1916";
     readonly '--color-text-link': "#828DF8";
     readonly '--color-surface-base': "#252321";
     readonly '--color-surface-elevated': "#2C2A28";
     readonly '--color-surface-raised': "#31302F";
-    readonly '--color-surface-inset': "#13100D";
     readonly '--color-background-base': "#1C1916";
     readonly '--color-background-default': "#252321";
     readonly '--color-background-subtle': "#2C2A28";
     readonly '--color-background-frame': "#100D0A";
-    readonly '--color-border-default': "#1F1F1F";
-    readonly '--color-border-subtle': "#1C1C1C";
-    readonly '--color-border-strong': "#2C2C2C";
-    readonly '--color-border-prominent': "#3C3C3C";
+    readonly '--color-border-prominent': "#424140";
     readonly '--color-border-focus': "#828DF8";
     readonly '--color-interactive-hover': "rgba(255, 255, 255, 0.04)";
     readonly '--color-interactive-focus': "rgba(255, 255, 255, 0.12)";
     readonly '--color-interactive-active': "rgba(255, 255, 255, 0.16)";
     readonly '--color-interactive-selected': "rgba(255, 255, 255, 0.08)";
     readonly '--color-interactive-disabled': "rgba(255, 255, 255, 0.12)";
-    readonly '--color-divider': "#1F1F1F";
+    readonly '--color-divider': "rgba(255, 255, 255, 0.09)";
     readonly '--color-brand-primary-hover': "#FFA063";
     readonly '--color-brand-primary-active': "#FFC7A2";
     readonly '--color-brand-secondary-hover': "#2697B7";
@@ -1532,7 +598,7 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-result-degrade-dark': "#b30000";
     readonly '--color-result-inconclusive': "#9E9A97";
     readonly '--color-result-inconclusive-light': "rgba(158, 154, 151, 0.16)";
-    readonly '--color-result-neutral': "#9CA3AF";
+    readonly '--color-result-neutral': "#A29F9D";
     readonly '--color-on-result-improve': "#FFFFFF";
     readonly '--color-on-result-degrade': "#FFFFFF";
     readonly '--color-on-result-inconclusive': "#FFFFFF";
@@ -1546,18 +612,18 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-data-8': "#90C987";
     readonly '--color-data-9': "#CAACCB";
     readonly '--color-data-10': "#EE8026";
-    readonly '--color-text-link-hover': "#60A5FA";
+    readonly '--color-text-link-hover': "#3CA8FF";
     readonly '--color-surface-overlay': "#373635";
     readonly '--color-surface-input': "#2C2A28";
-    readonly '--color-border-input': "#4B5563";
-    readonly '--color-border-input-hover': "#6B7280";
+    readonly '--color-border-input': "#5A5958";
+    readonly '--color-border-input-hover': "#72716F";
     readonly '--color-border-input-focus': "#828DF8";
-    readonly '--color-border-input-error': "#EF4444";
-    readonly '--color-hairline-subtle': "rgba(255, 255, 255, 0.06)";
-    readonly '--color-hairline-default': "rgba(255, 255, 255, 0.09)";
-    readonly '--color-hairline-strong': "rgba(255, 255, 255, 0.14)";
+    readonly '--color-border-input-error': "#E05254";
+    readonly '--color-hairline-subtle': "rgba(255, 255, 255, 0.10)";
+    readonly '--color-hairline-default': "rgba(255, 255, 255, 0.15)";
+    readonly '--color-hairline-strong': "rgba(255, 255, 255, 0.22)";
     readonly '--color-interactive-disabled-text': "rgba(255, 255, 255, 0.26)";
-    readonly '--color-avatar-background': "#4B5563";
+    readonly '--color-avatar-background': "#5A5958";
     readonly '--color-avatar-text': "#FFFFFF";
 };
 declare const gluestackConfig: {
@@ -1630,14 +696,165 @@ declare const gluestackConfig: {
 type ThemeConfig = typeof gluestackConfig;
 
 /**
- * Neumorphic Shadow Utilities
+ * Surface MATERIALS — the treatments layered on top of the flat grey ramp.
+ *
+ * The ramp says how deep a plane sits. This says what it is made of. Two
+ * materials, deliberately: a matte PAPER sheet for hero surfaces, and a recessed
+ * INSET WELL for grouped or awaiting-data regions.
+ *
+ * SCOPE, and it is a hard rule rather than a preference: paper goes on hero
+ * surfaces only — the live card, the LOAD/verdict chip, the rest hero. The
+ * "everything is a paper card" look is explicitly NOT the model; it was an
+ * over-application built to find the ceiling. There are no LEVELS of paper. One
+ * treatment, used sparingly, or the texture stops meaning anything.
+ *
+ * Second hard rule: paper fills take DEEP/MUTED tones only (a ramp step, or a
+ * categorical `dark` variant). Vivid and neon colours are ink ON paper — never
+ * the paper itself.
+ *
+ * PLATFORM: `backgroundImage` and multi-layer `boxShadow` are web/RNW only. On
+ * native these are ignored and the surface falls back to its flat fill, which is
+ * why every material here keeps `backgroundColor` load-bearing on its own. A
+ * material must never be the only thing carrying meaning.
+ *
+ * ── THE TONAL FILL IS GONE (VW-99, S-6 wall calibration) ───────────────────
+ *
+ * `paperSheet` used to carry a vertical ΔL* 3 gradient, sized "just under seen
+ * as a gradient". On the wall panel at ~3 m it could not be told from a flat
+ * sheet of the same tone, and the full material still read as — the operator's
+ * words — "a flat digital rectangle". It failed its own stated purpose, which
+ * was precisely to stop that.
+ *
+ * Raising it was not available. The design ceiling is ~ΔL* 4 (past that it reads
+ * decorative, which the exploration rejected), and the same run showed why the
+ * headroom would not have helped: the 0.025 ELEVATION step — a comparable ΔL*
+ * — was called instantly, because it sits at a hard edge between two flat
+ * fields. The fill spread the same amount smoothly over ~300 px, where vision is
+ * genuinely poor. It is a spatial-frequency problem, not an amplitude one, so
+ * the band between "invisible" and "decorative" may simply not exist here.
+ *
+ * ── AND THE DITHER WENT WITH IT (VW-99 run 2) ──────────────────────────────
+ *
+ * `ditherTile` was held back one run on the grounds that "probably dead weight"
+ * is not a measurement. Run 1 could not measure it: with the fill invisible
+ * there was no gradient to band, so the panel returned a guaranteed clean sheet.
+ *
+ * Run 2 settled it by adding a hand-quantised REFERENCE beside the smooth
+ * control — the same tone span drawn as five hard-edged 1-level steps, which is
+ * what the artefact looks like when it happens. The reference banded plainly and
+ * the smooth gradient did not. So the panel can resolve banding; this render
+ * path simply does not produce it. A mitigation for an artefact that does not
+ * occur is cost with no benefit, and it is gone.
+ *
+ * That is a claim about THIS display, which is the one the product ships on and
+ * the reason `paperSheet` is hero-surface-only. A phone is a separate question.
+ *
+ * Kept: grain, rim-light, contact shadow.
+ *
+ * See sources/design/surface-system-north-star.md §4 and
+ * sources/runbooks/VW-99-depth-wall-calibration.md.
+ */
+
+/**
+ * Grain opacity for a tone, scaled by perceived brightness.
+ *
+ * A fixed opacity reads hot on a dark plane and vanishes on a bright one, so
+ * darker tones get a whisper and brighter tones keep full texture. Anchored so a
+ * dark chip (lum ≈ 0.13) lands ≈ 0.06 and a bright bar (lum ≈ 0.58) lands ≈ 0.20.
+ * Above roughly 0.05α on a mid tone it starts reading as "dirty" rather than
+ * matte, which is what the clamp is protecting.
+ *
+ * This is the ONE curve all grain goes through — a card and a bar carry
+ * proportional, not identical, texture. That is what makes them read as the same
+ * material.
+ */
+declare function grainOpacityForTone(baseColor: string): number;
+/**
+ * The matte grain tile as a `backgroundImage` url — one shared `feTurbulence`
+ * fractal-noise tile, painted once, NEVER animated. Pair with
+ * `backgroundColor: baseColor`.
+ */
+declare function grainForTone(baseColor: string): string;
+/**
+ * A matte PAPER hero sheet: brightness-scaled grain + a crisp top rim-light +
+ * one soft contact shadow.
+ *
+ * The contact shadow is the ONE place a drop-shadow is still correct on a dark
+ * surface: it is large, soft, and describes a sheet lying on a plane rather than
+ * trying to encode hierarchy. Inline depth is the hairline's job.
+ *
+ * Defaults to `surface-raised` so a same-toned card laid inside reads as one
+ * continuous sheet rather than a seam.
+ *
+ * THE RIM-LIGHT IS A HAIRLINE. Run 2 of VW-99 called it "weak at distance" on
+ * both the card and the hero sheet, and the reason is visible in the number: it
+ * was `rgba(255,255,255,0.10)`, a 1px white line on a dark plane — physically
+ * the same cue as `hairline-*`, but set BELOW `hairline-default`, which the same
+ * run had just had to raise twice. It is not a subtler species of edge, it was
+ * simply mistuned. Raised to `0.20`, between `hairline-default` and
+ * `hairline-strong`: this edge defines a hero surface, so it earns more than the
+ * default separator, and unlike a separator there is no fallback behind it.
+ *
+ * Deliberately NOT wired to the token, though the values now agree in spirit: a
+ * box-shadow rim and a border hairline are retuned by different evidence, and
+ * coupling them means a hairline run silently restyles every hero sheet.
+ *
+ * HERO SURFACES ONLY, MUTED TONES ONLY — see the module header.
+ */
+declare function paperSheet(tone?: string): ViewStyle;
+/**
+ * A recessed INSET WELL: a tone pressed BELOW the surrounding plane, cut in by an
+ * inner top shadow with a faint light line on the floor.
+ *
+ * The bottom rim is the load-bearing half. A dark inset alone just reads as a
+ * darker rectangle; it is the light catching the floor that says "this is below
+ * the surface" — which is why the treatment survives at 16px where a full paper
+ * treatment does not.
+ *
+ * The floor light was `0.04` and is now `0.12`, chosen on the wall in VW-99 run
+ * 2 against a `.04`-vs-`.12`-vs-none forced choice. Worth recording that `.04`
+ * was NOT invisible — the no-line decoy was correctly rejected and both real
+ * values were seen, so this is a preference between two working values, not a
+ * rescue. The rim-light next door was a genuine miss; this one was only thin.
+ *
+ * Note this is a MATERIAL, and independent of the surface LEVEL named `inset`
+ * that was retired in TD-07.14. A well is something you apply; a level is
+ * somewhere you sit.
+ */
+declare function insetWell(tone?: string): ViewStyle;
+/**
+ * Paper for a COLORED BAR — the same material as {@link paperSheet}, tuned for a
+ * small saturated element: grain + top rim-light + a contact shadow cast past the
+ * bar's leading edge, so a filled bar reads as a physical block that has travelled.
+ *
+ * No tonal fill or dither here: a bar is too narrow for a ΔL* 3 gradient to read,
+ * and too narrow to band.
  *
- * Neumorphism creates soft, extruded UI using dual opposing shadows.
- * - Light source assumed from top-left
- * - Raised elements: dark shadow bottom-right, light highlight top-left
- * - Pressed elements: inverted with `inset` shadows
+ * `flip` = a vertically mirrored (`scaleY(-1)`) plot, i.e. the `down` wing of a
+ * diverging chart. The contact shadow's y-offset is pre-inverted so the mirror
+ * lands it pointing AWAY from the shared axis rather than up across it, and the
+ * top rim-light is DROPPED — mirrored it would sit on the axis edge and read
+ * wrong, so grain and shadow carry the material alone.
  */
+declare function barPaper(color: string, flip?: boolean): ViewStyle;
 
+/**
+ * Colour math shared by the depth system.
+ *
+ * This file used to be `shadows.ts` and shipped a neumorphic shadow builder —
+ * dual opposing shadows, dark bottom-right and light top-left. That was removed
+ * in TD-07.16. Neumorphism needs a mid-tone background (roughly 75-90%
+ * lightness) so BOTH shadows have somewhere to fall; our surfaces sit near 10%,
+ * which leaves the dark half nothing to fall onto. It collapsed to a one-sided
+ * rim light and read as noise on the wall.
+ *
+ * Inline depth is a hairline now (`hairline-*`, self-normalising alpha), texture
+ * is `materials.ts`, and drop-shadow survives only for genuinely FLOATING
+ * things — see `elevation.ts`.
+ *
+ * What is left here is the HSV/hex maths that `elevation.ts` still uses to
+ * derive rim and shadow tints from whatever surface colour it is handed.
+ */
 /**
  * Parse a hex color to RGB values (0-255).
  * Supports both #RGB and #RRGGBB formats.
@@ -1698,134 +915,10 @@ declare function getHoverColors(bgColor: string, intensity?: 'subtle' | 'medium'
  */
 declare function isDark(hex: string): boolean;
 /**
- * Shadow configuration for different surface colors.
- * Each surface needs calibrated light/dark shadow colors.
- *
- * - dark: soft shadow for depth (bottom-right)
- * - light: sharp rim highlight (top-left) - higher opacity for crisp edge
- * - darker: deeper shadow for pressed/inset states
+ * Shadow strength tiers. Retained because `elevation.ts` keys its level table on
+ * them; the neumorphic shadow BUILDERS that used to live here are gone.
  */
-declare const shadowColors: {
-    charcoal: {
-        dark: string;
-        light: string;
-        darker: string;
-    };
-    neutralDark: {
-        dark: string;
-        light: string;
-        darker: string;
-    };
-    neutralLight: {
-        dark: string;
-        light: string;
-        darker: string;
-    };
-};
 type ShadowIntensity = 'subtle' | 'medium' | 'strong';
-type ShadowSurface = keyof typeof shadowColors;
-/**
- * Creates a raised (elevated) neumorphic shadow.
- * Element appears to float above the surface.
- *
- * Uses a soft dark shadow (bottom-right) and a sharp rim light (top-left).
- */
-declare function createRaisedShadow(surface?: ShadowSurface, intensity?: ShadowIntensity): ViewStyle;
-/**
- * Creates a pressed (inset) neumorphic shadow.
- * Element appears pushed into the surface.
- *
- * Uses a soft dark inset shadow (top-left) and a thin sharp rim light (bottom-right).
- */
-declare function createPressedShadow(surface?: ShadowSurface, intensity?: ShadowIntensity): ViewStyle;
-/**
- * Creates a flat (no shadow) style for hover states.
- */
-declare function createFlatShadow(): ViewStyle;
-/**
- * Creates a hover shadow for raised elements.
- * Reduces shadow depth but keeps a subtle rim light to maintain visual boundary.
- */
-declare function createRaisedHoverShadow(surface?: ShadowSurface, intensity?: ShadowIntensity): ViewStyle;
-/**
- * Creates a hover shadow for pressed elements.
- * Reduces shadow depth but keeps a subtle rim light to maintain visual boundary.
- */
-declare function createPressedHoverShadow(surface?: ShadowSurface, intensity?: ShadowIntensity): ViewStyle;
-/**
- * Pre-built shadow presets for common use cases.
- */
-declare const neumorphicShadows: {
-    charcoal: {
-        raised: {
-            subtle: ViewStyle;
-            medium: ViewStyle;
-            strong: ViewStyle;
-        };
-        raisedHover: {
-            subtle: ViewStyle;
-            medium: ViewStyle;
-            strong: ViewStyle;
-        };
-        pressed: {
-            subtle: ViewStyle;
-            medium: ViewStyle;
-            strong: ViewStyle;
-        };
-        pressedHover: {
-            subtle: ViewStyle;
-            medium: ViewStyle;
-            strong: ViewStyle;
-        };
-        flat: ViewStyle;
-    };
-    neutralDark: {
-        raised: {
-            subtle: ViewStyle;
-            medium: ViewStyle;
-            strong: ViewStyle;
-        };
-        raisedHover: {
-            subtle: ViewStyle;
-            medium: ViewStyle;
-            strong: ViewStyle;
-        };
-        pressed: {
-            subtle: ViewStyle;
-            medium: ViewStyle;
-            strong: ViewStyle;
-        };
-        pressedHover: {
-            subtle: ViewStyle;
-            medium: ViewStyle;
-            strong: ViewStyle;
-        };
-        flat: ViewStyle;
-    };
-    neutralLight: {
-        raised: {
-            subtle: ViewStyle;
-            medium: ViewStyle;
-            strong: ViewStyle;
-        };
-        raisedHover: {
-            subtle: ViewStyle;
-            medium: ViewStyle;
-            strong: ViewStyle;
-        };
-        pressed: {
-            subtle: ViewStyle;
-            medium: ViewStyle;
-            strong: ViewStyle;
-        };
-        pressedHover: {
-            subtle: ViewStyle;
-            medium: ViewStyle;
-            strong: ViewStyle;
-        };
-        flat: ViewStyle;
-    };
-};
 
 /**
  * TypeScript mirror of css-property-manifest.schema.json.
@@ -1967,9 +1060,9 @@ interface ThemePresetColors {
     'background-base'?: string;
     'background-default'?: string;
     'background-subtle'?: string;
-    'border-default'?: string;
-    'border-subtle'?: string;
-    'border-strong'?: string;
+    'hairline-default'?: string;
+    'hairline-subtle'?: string;
+    'hairline-strong'?: string;
     'border-focus'?: string;
     'divider'?: string;
     [key: `${string}`]: string | undefined;
@@ -2022,4 +1115,4 @@ declare const defaultPreset: ThemePreset;
  */
 declare const audiobookPreset: ThemePreset;
 
-export { CATEGORICAL_CVD_SAFE_MAX, type CategoricalVariant, type ComponentType, type CssPropertyEntry, type CssPropertyManifest, type ElevationConfig, type ElevationLevel, type GlowIntensity, type GradientStyle, type ManifestValidationResult, PRESSED_ELEVATION_LEVEL, type ShadowIntensity, type ShadowSurface, type ThemeConfig, type ThemeMode, type ThemePreset, type ThemePresetColors, type ThemePresetFonts, type ThemePresetRadii, type ThemePresetShadows, ThemeProvider, type ThemeProviderMode, type ThemeProviderProps, type VariantAxes, type VariantOverride, applyThemePreset, audiobookPreset, backgroundFrameDark, bestTextColor, buttonSizes, categoricalPalette, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultPreset, discreteRainbow, divergingScale, elevationSystem, getBaseSurfaceColor, getCategoricalColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getPressedRecessShadow, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, lightThemeCSSVars, lighten, linearGradient, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort, shadowColors, surfaceGradient, surfaceRampDark, validateCssPropertyManifest };
+export { type ComponentType, type CssPropertyEntry, type CssPropertyManifest, type ElevationConfig, type ElevationLevel, FLOATING_ELEVATION_MIN, type GlowIntensity, type GradientStyle, type ManifestValidationResult, PRESSED_ELEVATION_LEVEL, type ShadowIntensity, type ThemeConfig, ThemeMode, type ThemePreset, type ThemePresetColors, type ThemePresetFonts, type ThemePresetRadii, type ThemePresetShadows, ThemeProvider, type ThemeProviderMode, type ThemeProviderProps, type VariantAxes, type VariantOverride, applyThemePreset, audiobookPreset, barPaper, componentElevationRanges, darkThemeCSSVars, darken, defaultPreset, elevationSystem, getBaseSurfaceColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getPressedRecessShadow, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, grainForTone, grainOpacityForTone, hexToRgb, hsvToRgb, insetWell, isCssPropertyManifest, isDark, lightThemeCSSVars, lighten, linearGradient, paperSheet, resolveColor, rgbToHex, rgbToHsv, surfaceGradient, validateCssPropertyManifest };