@titan-design/react-ui 0.9.2 → 0.9.3

package/dist/theme/index.d.mts

@@ -1,517 +1,318 @@
 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 '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";
 };
-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': "#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 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";
@@ -607,8 +408,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";
@@ -705,298 +505,498 @@ 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;
+
+/**
+ * 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)
+ *
+ * **Dark Mode**: Need lighter base to allow sufficient lightening
+ *   - Use `#191919` (charcoal[600]) - allows lightening to `#2A2A2A` at max elevation
+ *
+ * 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 h3: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "2.25rem";
-        readonly fontWeight: 700;
-        readonly lineHeight: 1.375;
+    readonly card: {
+        readonly allowed: readonly [1, 2, 3];
+        readonly default: 2;
+        readonly hover: 3;
     };
-    readonly h4: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "2rem";
-        readonly fontWeight: 700;
-        readonly lineHeight: 1.375;
+    readonly input: {
+        readonly allowed: readonly [-2, -1, 0];
+        readonly default: -1;
     };
-    readonly h5: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "1.5rem";
-        readonly fontWeight: 600;
-        readonly lineHeight: 1.375;
+    readonly overlay: {
+        readonly allowed: readonly [4, 5];
+        readonly default: 4;
     };
-    readonly h6: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "1.125rem";
-        readonly fontWeight: 600;
-        readonly lineHeight: 1.375;
+};
+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 body1: {
-        readonly fontFamily: "body";
-        readonly fontSize: "1rem";
-        readonly fontWeight: 400;
-        readonly lineHeight: 1.5;
+    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 body2: {
-        readonly fontFamily: "body";
-        readonly fontSize: "0.875rem";
-        readonly fontWeight: 400;
-        readonly lineHeight: 1.57;
+    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 subtitle1: {
-        readonly fontFamily: "body";
-        readonly fontSize: "1rem";
-        readonly fontWeight: 500;
-        readonly lineHeight: 1.75;
+    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 subtitle2: {
-        readonly fontFamily: "body";
-        readonly fontSize: "0.875rem";
-        readonly fontWeight: 500;
-        readonly lineHeight: 1.57;
+    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 caption: {
-        readonly fontFamily: "body";
-        readonly fontSize: "0.75rem";
-        readonly fontWeight: 400;
-        readonly lineHeight: 1.66;
+    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 overline: {
-        readonly fontFamily: "body";
-        readonly fontSize: "0.75rem";
-        readonly fontWeight: 600;
-        readonly lineHeight: 2.5;
-        readonly letterSpacing: "0.5px";
-        readonly textTransform: "uppercase";
+    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 button: {
-        readonly fontFamily: "sans";
-        readonly fontSize: "0.875rem";
-        readonly fontWeight: 600;
-        readonly lineHeight: 1.75;
+    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;
 };
 
 /**
@@ -1825,9 +1825,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;
 }
 /**