@titan-design/react-ui 0.9.2 → 0.10.0

package/dist/theme/index.d.ts

@@ -1,517 +1,328 @@
 import { ViewStyle, ViewProps } from 'react-native';
 
 /**
- * Elevation System
- *
- * A unified depth system where each elevation level corresponds to:
- * - Calculated surface color (derived from base using lighten)
- * - Shadow intensity and style (raised/pressed)
- * - Dynamically calculated shadow colors (derived from surface color)
- * - Semantic name for reference
- *
- * Elevation range: -2 (deep inset) to +5 (floating overlay)
- *
- * Negative elevations: Inset/pressed elements (sunken into surface)
- * Zero elevation: Base surface (background/page level)
- * Positive elevations: Raised elements (floating above surface)
- *
- * All colors are calculated dynamically from a base surface color,
- * allowing for custom surfaces and consistent color relationships.
- *
- * Lighting Model: Light source from upper-right corner
- * - Raised elements are always lighter than base (consistent across themes)
- * - Base colors must allow sufficient lightening in both themes
- */
-
-type ElevationLevel = -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
-interface ElevationConfig {
-    /** Semantic name for this elevation level */
-    name: string;
-    /** Amount to lighten base color (0-1) */
-    colorAdjustment: number;
-    /** Shadow intensity */
-    shadowIntensity: 'subtle' | 'medium' | 'strong';
-    /** Shadow style: raised (floating) or pressed (inset) */
-    shadowStyle: 'raised' | 'pressed';
-    /** Description of use case */
-    description: string;
-}
-declare const elevationSystem: Record<ElevationLevel, ElevationConfig>;
-/**
- * Get elevation configuration for a given level
- */
-declare function getElevationConfig(level: ElevationLevel): ElevationConfig;
-/**
- * Calculate surface color for an elevation level from a base color.
- * Results are cached to avoid redundant calculations.
- *
- * @param baseColor - Base surface color (hex)
- * @param level - Elevation level
- * @param theme - Current theme ('light' or 'dark')
- * @returns Calculated surface color (hex)
- */
-declare function getElevationSurface(baseColor: string, level: ElevationLevel, theme: 'light' | 'dark'): string;
-/**
- * Get shadow style for an elevation level, calculated dynamically from surface color.
- * Results are cached to avoid redundant calculations.
- *
- * @param baseColor - Base surface color (hex)
- * @param level - Elevation level
- * @param theme - Current theme ('light' or 'dark')
- * @param isHovered - Whether element is hovered
- * @returns ViewStyle with shadow properties
- */
-declare function getElevationShadow(baseColor: string, level: ElevationLevel, theme: 'light' | 'dark', isHovered?: boolean): ViewStyle;
-/**
- * Get base surface color from theme.
- * This is the foundation color that all elevations are calculated from.
- *
- * IMPORTANT: Base colors must be chosen to allow sufficient lightening.
- *
- * **Light Mode**: Cannot use `#FFFFFF` (white) - cannot lighten white!
- *   - Use `#F3F4F6` (neutral[100]) - can lighten to `#FAFAFA` → `#FFFFFF`
- *   - This allows raised elevations to be lighter (closer to white)
+ * Semantic Design Tokens
  *
- * **Dark Mode**: Need lighter base to allow sufficient lightening
- *   - Use `#191919` (charcoal[600]) - allows lightening to `#2A2A2A` at max elevation
+ * Meaningful tokens following DTCG (Design Tokens Community Group) naming conventions.
+ * Pattern: {category}-{intent}-{variant?}-{state?}
  *
- * Can be overridden to use custom base colors for special cases.
- */
-declare function getBaseSurfaceColor(theme: 'light' | 'dark'): string;
-/**
- * Component-specific elevation ranges
- * Defines which elevation levels each component type can use
+ * 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 componentElevationRanges: {
-    readonly button: {
-        readonly allowed: readonly [2];
-        readonly default: 2;
-        readonly hover: 3;
-    };
-    readonly card: {
-        readonly allowed: readonly [1, 2, 3];
-        readonly default: 2;
-        readonly hover: 3;
-    };
-    readonly input: {
-        readonly allowed: readonly [-2, -1, 0];
-        readonly default: -1;
-    };
-    readonly overlay: {
-        readonly allowed: readonly [4, 5];
-        readonly default: 4;
-    };
+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";
 };
-type ComponentType = keyof typeof componentElevationRanges;
-/**
- * Validate and clamp elevation to component's allowed range
- */
-declare function getValidatedElevation(component: ComponentType, requested: ElevationLevel): ElevationLevel;
-type GlowIntensity = 'subtle' | 'medium' | 'strong';
-/**
- * Get a glow shadow style for emphasis/active states.
- *
- * Creates a colored radial glow around an element, useful for:
- * - Active recording indicators (orange glow)
- * - Success states (green glow)
- * - Error/danger indicators (red glow)
- * - Focus rings and attention-drawing elements
- *
- * @param color - Glow color (hex string, e.g. '#FF7900')
- * @param intensity - Glow intensity level
- * @returns ViewStyle with platform-specific shadow properties
- */
-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";
+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 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 h2: {
+        readonly fontFamily: "heading";
+        readonly fontSize: "3rem";
+        readonly fontWeight: 700;
+        readonly lineHeight: 1.375;
     };
-    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 h3: {
+        readonly fontFamily: "heading";
+        readonly fontSize: "2.25rem";
+        readonly fontWeight: 700;
+        readonly lineHeight: 1.375;
     };
-    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 h4: {
+        readonly fontFamily: "heading";
+        readonly fontSize: "2rem";
+        readonly fontWeight: 700;
+        readonly lineHeight: 1.375;
     };
-    readonly white: "#FFFFFF";
-    readonly black: "#000000";
-    readonly transparent: "transparent";
-};
-/**
- * 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 h5: {
+        readonly fontFamily: "heading";
+        readonly fontSize: "1.5rem";
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.375;
     };
-    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 h6: {
+        readonly fontFamily: "heading";
+        readonly fontSize: "1.125rem";
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.375;
     };
-    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 body1: {
+        readonly fontFamily: "body";
+        readonly fontSize: "1rem";
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
     };
-    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 body2: {
+        readonly fontFamily: "body";
+        readonly fontSize: "0.875rem";
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.57;
     };
-    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 subtitle1: {
+        readonly fontFamily: "body";
+        readonly fontSize: "1rem";
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.75;
     };
-    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 subtitle2: {
+        readonly fontFamily: "body";
+        readonly fontSize: "0.875rem";
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.57;
     };
-    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";
+    readonly caption: {
+        readonly fontFamily: "body";
+        readonly fontSize: "0.75rem";
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.66;
     };
-};
-/**
- * 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 overline: {
+        readonly fontFamily: "body";
+        readonly fontSize: "0.75rem";
+        readonly fontWeight: 600;
+        readonly lineHeight: 2.5;
+        readonly letterSpacing: "0.5px";
+        readonly textTransform: "uppercase";
     };
-    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 button: {
+        readonly fontFamily: "sans";
+        readonly fontSize: "0.875rem";
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.75;
     };
-    readonly fontWeights: {
-        readonly normal: 400;
-        readonly medium: 500;
-        readonly semibold: 600;
-        readonly bold: 700;
+};
+declare const buttonSizes: {
+    readonly sm: {
+        readonly paddingX: "16px";
+        readonly paddingY: "6px";
+        readonly fontSize: "0.875rem";
     };
-    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 md: {
+        readonly paddingX: "20px";
+        readonly paddingY: "8px";
+        readonly fontSize: "0.875rem";
     };
-    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";
+    readonly lg: {
+        readonly paddingX: "24px";
+        readonly paddingY: "11px";
+        readonly fontSize: "1rem";
     };
 };
-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;
-};
-
-/**
- * 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: {
+type ThemeMode = 'light' | 'dark';
+declare function getSemanticColors(mode: ThemeMode): {
     readonly 'brand-primary': "#FF7900";
     readonly 'brand-primary-light': "#FFA063";
     readonly 'brand-primary-dark': "#DA5F00";
@@ -586,9 +397,11 @@ declare const semanticColorsLight: {
     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";
@@ -598,6 +411,9 @@ declare const semanticColorsLight: {
     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)";
@@ -607,8 +423,7 @@ declare const semanticColorsLight: {
     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";
@@ -678,14 +493,16 @@ declare const semanticColorsDark: {
     readonly 'text-inverse': "#111827";
     readonly 'text-link': "#828DF8";
     readonly 'text-link-hover': "#60A5FA";
-    readonly 'surface-base': "#161616";
-    readonly 'surface-elevated': "#191919";
-    readonly 'surface-raised': "#1C1C1C";
-    readonly 'surface-overlay': "#191919";
-    readonly 'surface-input': "#191919";
-    readonly 'background-base': "#101010";
-    readonly 'background-default': "#161616";
-    readonly 'background-subtle': "#1C1C1C";
+    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";
@@ -695,6 +512,9 @@ declare const semanticColorsDark: {
     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)";
@@ -705,298 +525,553 @@ declare const semanticColorsDark: {
     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;
+
+/**
+ * Elevation System
+ *
+ * A unified depth system where each elevation level corresponds to:
+ * - Calculated surface color (derived from base using lighten)
+ * - Shadow intensity and style (raised/pressed)
+ * - Dynamically calculated shadow colors (derived from surface color)
+ * - Semantic name for reference
+ *
+ * Elevation range: -2 (deep inset) to +5 (floating overlay)
+ *
+ * Negative elevations: Inset/pressed elements (sunken into surface)
+ * Zero elevation: Base surface (background/page level)
+ * Positive elevations: Raised elements (floating above surface)
+ *
+ * All colors are calculated dynamically from a base surface color,
+ * allowing for custom surfaces and consistent color relationships.
+ *
+ * Lighting Model: Light source from upper-right corner
+ * - Raised elements are always lighter than base (consistent across themes)
+ * - Base colors must allow sufficient lightening in both themes
+ */
+
+type ElevationLevel = -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
+interface ElevationConfig {
+    /** Semantic name for this elevation level */
+    name: string;
+    /** Amount to lighten base color (0-1) */
+    colorAdjustment: number;
+    /** Shadow intensity */
+    shadowIntensity: 'subtle' | 'medium' | 'strong';
+    /** Shadow style: raised (floating) or pressed (inset) */
+    shadowStyle: 'raised' | 'pressed';
+    /** Description of use case */
+    description: string;
+}
+declare const elevationSystem: Record<ElevationLevel, ElevationConfig>;
+/**
+ * Get elevation configuration for a given level
+ */
+declare function getElevationConfig(level: ElevationLevel): ElevationConfig;
+/**
+ * Calculate surface color for an elevation level from a base color.
+ * Results are cached to avoid redundant calculations.
+ *
+ * @param baseColor - Base surface color (hex)
+ * @param level - Elevation level
+ * @param theme - Current theme ('light' or 'dark')
+ * @returns Calculated surface color (hex)
+ */
+declare function getElevationSurface(baseColor: string, level: ElevationLevel, theme: 'light' | 'dark'): string;
+/**
+ * Get shadow style for an elevation level, calculated dynamically from surface color.
+ * Results are cached to avoid redundant calculations.
+ *
+ * @param baseColor - Base surface color (hex)
+ * @param level - Elevation level
+ * @param theme - Current theme ('light' or 'dark')
+ * @param isHovered - Whether element is hovered
+ * @returns ViewStyle with shadow properties
+ */
+declare function getElevationShadow(baseColor: string, level: ElevationLevel, theme: 'light' | 'dark', isHovered?: boolean): ViewStyle;
+/**
+ * Elevation level backing a `<Surface pressed>` recess: the shallow `inset`
+ * (-1) step. Pressed exposes ONE level of depth — pressed-2 is intentionally
+ * not surfaced (the deeper `-2` deep-inset stays available to `elevation`).
+ */
+declare const PRESSED_ELEVATION_LEVEL: ElevationLevel;
+/**
+ * Inner-shadow recess for a pressed (sunken) surface, tuned to the well's own
+ * fill colour so the rim/shadow tints track the darker fill. Composes WITH the
+ * darker pressed fill: on web it adds an inset boxShadow; on the native path
+ * (no inset-shadow support) it's a no-op and the recess reads via the fill
+ * alone — so a pressed surface stays legibly sunken with or without the shadow.
+ *
+ * @param fillColor - The pressed surface's own fill (one ramp step down).
+ * @param theme - Current theme ('light' or 'dark').
+ */
+declare function getPressedRecessShadow(fillColor: string, theme: 'light' | 'dark'): ViewStyle;
+/**
+ * Get base surface color from theme.
+ * This is the foundation color that all elevations are calculated from.
+ *
+ * IMPORTANT: Base colors must be chosen to allow sufficient lightening.
+ *
+ * **Light Mode**: Cannot use `#FFFFFF` (white) - cannot lighten white!
+ *   - Use `#F3F4F6` (neutral[100]) - can lighten to `#FAFAFA` → `#FFFFFF`
+ *   - This allows raised elevations to be lighter (closer to white)
+ *
+ * **Dark Mode**: Need lighter base to allow sufficient lightening
+ *   - Use `surface-elevated` (#2A2827, TD-surface-tokens ramp) - allows further lightening
+ *
+ * Can be overridden to use custom base colors for special cases.
+ */
+declare function getBaseSurfaceColor(theme: 'light' | 'dark'): string;
+/**
+ * Component-specific elevation ranges
+ * Defines which elevation levels each component type can use
+ */
+declare const componentElevationRanges: {
+    readonly button: {
+        readonly allowed: readonly [2];
+        readonly default: 2;
+        readonly hover: 3;
     };
-    readonly h4: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "2rem";
-        readonly fontWeight: 700;
-        readonly lineHeight: 1.375;
+    readonly card: {
+        readonly allowed: readonly [1, 2, 3];
+        readonly default: 2;
+        readonly hover: 3;
     };
-    readonly h5: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "1.5rem";
-        readonly fontWeight: 600;
-        readonly lineHeight: 1.375;
+    readonly input: {
+        readonly allowed: readonly [-2, -1, 0];
+        readonly default: -1;
     };
-    readonly h6: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "1.125rem";
-        readonly fontWeight: 600;
-        readonly lineHeight: 1.375;
+    readonly overlay: {
+        readonly allowed: readonly [4, 5];
+        readonly default: 4;
     };
-    readonly body1: {
-        readonly fontFamily: "body";
-        readonly fontSize: "1rem";
-        readonly fontWeight: 400;
-        readonly lineHeight: 1.5;
+};
+type ComponentType = keyof typeof componentElevationRanges;
+/**
+ * Validate and clamp elevation to component's allowed range
+ */
+declare function getValidatedElevation(component: ComponentType, requested: ElevationLevel): ElevationLevel;
+type GlowIntensity = 'subtle' | 'medium' | 'strong';
+/**
+ * Get a glow shadow style for emphasis/active states.
+ *
+ * Creates a colored radial glow around an element, useful for:
+ * - Active recording indicators (orange glow)
+ * - Success states (green glow)
+ * - Error/danger indicators (red glow)
+ * - Focus rings and attention-drawing elements
+ *
+ * @param color - Glow color (hex string, e.g. '#FF7900')
+ * @param intensity - Glow intensity level
+ * @returns ViewStyle with platform-specific shadow properties
+ */
+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 body2: {
-        readonly fontFamily: "body";
-        readonly fontSize: "0.875rem";
-        readonly fontWeight: 400;
-        readonly lineHeight: 1.57;
+    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 subtitle1: {
-        readonly fontFamily: "body";
-        readonly fontSize: "1rem";
-        readonly fontWeight: 500;
-        readonly lineHeight: 1.75;
+    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 subtitle2: {
-        readonly fontFamily: "body";
-        readonly fontSize: "0.875rem";
-        readonly fontWeight: 500;
-        readonly lineHeight: 1.57;
+    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 caption: {
-        readonly fontFamily: "body";
-        readonly fontSize: "0.75rem";
-        readonly fontWeight: 400;
-        readonly lineHeight: 1.66;
+    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 overline: {
-        readonly fontFamily: "body";
-        readonly fontSize: "0.75rem";
-        readonly fontWeight: 600;
-        readonly lineHeight: 2.5;
-        readonly letterSpacing: "0.5px";
-        readonly textTransform: "uppercase";
+    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 button: {
-        readonly fontFamily: "sans";
-        readonly fontSize: "0.875rem";
-        readonly fontWeight: 600;
-        readonly lineHeight: 1.75;
+    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";
     };
 };
-declare const buttonSizes: {
-    readonly sm: {
-        readonly paddingX: "16px";
-        readonly paddingY: "6px";
-        readonly fontSize: "0.875rem";
+/**
+ * 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 md: {
-        readonly paddingX: "20px";
-        readonly paddingY: "8px";
-        readonly fontSize: "0.875rem";
+    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 lg: {
-        readonly paddingX: "24px";
-        readonly paddingY: "11px";
-        readonly fontSize: "1rem";
+    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";
     };
 };
-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 'background-base': "#EBEBEB";
-    readonly 'background-default': "#FFFFFF";
-    readonly 'background-subtle': "#FAFAFA";
-    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 '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': "#161616";
-    readonly 'surface-elevated': "#191919";
-    readonly 'surface-raised': "#1C1C1C";
-    readonly 'surface-overlay': "#191919";
-    readonly 'surface-input': "#191919";
-    readonly 'background-base': "#101010";
-    readonly 'background-default': "#161616";
-    readonly 'background-subtle': "#1C1C1C";
-    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 '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 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;
 };
 
 /**
@@ -1058,9 +1133,11 @@ declare const lightThemeCSSVars: {
     readonly '--color-surface-base': "#FFFFFF";
     readonly '--color-surface-elevated': "#FAFAFA";
     readonly '--color-surface-raised': "#F3F4F6";
+    readonly '--color-surface-inset': "#D1D5DB";
     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";
@@ -1117,6 +1194,9 @@ declare const lightThemeCSSVars: {
     readonly '--color-border-input-hover': "#9CA3AF";
     readonly '--color-border-input-focus': "#5048E5";
     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-text': "#FFFFFF";
@@ -1170,12 +1250,14 @@ declare const darkThemeCSSVars: {
     readonly '--color-text-disabled': "rgba(255, 255, 255, 0.38)";
     readonly '--color-text-inverse': "#111827";
     readonly '--color-text-link': "#828DF8";
-    readonly '--color-surface-base': "#161616";
-    readonly '--color-surface-elevated': "#191919";
-    readonly '--color-surface-raised': "#1C1C1C";
-    readonly '--color-background-base': "#101010";
-    readonly '--color-background-default': "#161616";
-    readonly '--color-background-subtle': "#1C1C1C";
+    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";
@@ -1226,12 +1308,15 @@ declare const darkThemeCSSVars: {
     readonly '--color-data-9': "#CAACCB";
     readonly '--color-data-10': "#EE8026";
     readonly '--color-text-link-hover': "#60A5FA";
-    readonly '--color-surface-overlay': "#191919";
-    readonly '--color-surface-input': "#191919";
+    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-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-interactive-disabled-text': "rgba(255, 255, 255, 0.26)";
     readonly '--color-avatar-background': "#4B5563";
     readonly '--color-avatar-text': "#FFFFFF";
@@ -1288,9 +1373,11 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-surface-base': "#FFFFFF";
     readonly '--color-surface-elevated': "#FAFAFA";
     readonly '--color-surface-raised': "#F3F4F6";
+    readonly '--color-surface-inset': "#D1D5DB";
     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";
@@ -1347,6 +1434,9 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-border-input-hover': "#9CA3AF";
     readonly '--color-border-input-focus': "#5048E5";
     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-text': "#FFFFFF";
@@ -1399,12 +1489,14 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-text-disabled': "rgba(255, 255, 255, 0.38)";
     readonly '--color-text-inverse': "#111827";
     readonly '--color-text-link': "#828DF8";
-    readonly '--color-surface-base': "#161616";
-    readonly '--color-surface-elevated': "#191919";
-    readonly '--color-surface-raised': "#1C1C1C";
-    readonly '--color-background-base': "#101010";
-    readonly '--color-background-default': "#161616";
-    readonly '--color-background-subtle': "#1C1C1C";
+    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";
@@ -1455,12 +1547,15 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-data-9': "#CAACCB";
     readonly '--color-data-10': "#EE8026";
     readonly '--color-text-link-hover': "#60A5FA";
-    readonly '--color-surface-overlay': "#191919";
-    readonly '--color-surface-input': "#191919";
+    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-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-interactive-disabled-text': "rgba(255, 255, 255, 0.26)";
     readonly '--color-avatar-background': "#4B5563";
     readonly '--color-avatar-text': "#FFFFFF";
@@ -1825,9 +1920,14 @@ declare const surfaceGradient: {
     chrome: (mode?: ThemeMode) => GradientStyle;
 };
 
-type ThemeProviderMode = 'dark' | 'light';
+/** `'system'` follows nativewind's `useColorScheme()` (mobile light/dark flip). */
+type ThemeProviderMode = 'dark' | 'light' | 'system';
 interface ThemeProviderProps extends ViewProps {
-    /** Theme mode to register. Mobile is dark-only today; defaults to `dark`. */
+    /**
+     * Theme mode to register. `'system'` bridges nativewind's `useColorScheme()`
+     * so mobile follows the OS light/dark flip; `'dark'`/`'light'` pin it. Mobile
+     * is dark-only today, so this defaults to `dark`.
+     */
     mode?: ThemeProviderMode;
 }
 /**
@@ -1922,4 +2022,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, 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, bestTextColor, buttonSizes, categoricalPalette, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultPreset, discreteRainbow, divergingScale, elevationSystem, getBaseSurfaceColor, getCategoricalColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, 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, validateCssPropertyManifest };
+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 };