@titan-design/react-ui 0.0.1

package/dist/theme/index.d.mts

@@ -0,0 +1,1287 @@
+import { ViewStyle } from 'react-native';
+
+/**
+ * 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 green: {
+        readonly 50: "#ECFDF5";
+        readonly 100: "#D1FAE5";
+        readonly 200: "#A7F3D0";
+        readonly 300: "#6EE7B7";
+        readonly 400: "#3FC79A";
+        readonly 500: "#10B981";
+        readonly 600: "#059669";
+        readonly 700: "#0B815A";
+        readonly 800: "#065F46";
+        readonly 900: "#064E3B";
+    };
+    readonly teal: {
+        readonly 50: "#F0FDFA";
+        readonly 100: "#CCFBF1";
+        readonly 200: "#99F6E4";
+        readonly 300: "#5EEAD4";
+        readonly 400: "#43C6B7";
+        readonly 500: "#14B8A6";
+        readonly 600: "#0D9488";
+        readonly 700: "#0E8074";
+        readonly 800: "#115E59";
+        readonly 900: "#134E4A";
+    };
+    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 amber: {
+        readonly 50: "#FFFBEB";
+        readonly 100: "#FEF3C7";
+        readonly 200: "#FDE68A";
+        readonly 300: "#FCD34D";
+        readonly 400: "#FFBF4C";
+        readonly 500: "#FFB020";
+        readonly 600: "#B27B16";
+        readonly 700: "#B45309";
+        readonly 800: "#92400E";
+        readonly 900: "#78350F";
+    };
+    readonly sky: {
+        readonly 50: "#F0F9FF";
+        readonly 100: "#E0F2FE";
+        readonly 200: "#BAE6FD";
+        readonly 300: "#7DD3FC";
+        readonly 400: "#64B6F7";
+        readonly 500: "#2196F3";
+        readonly 600: "#0284C7";
+        readonly 700: "#0B79D0";
+        readonly 800: "#075985";
+        readonly 900: "#0C4A6E";
+    };
+    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 accent: {
+        readonly 100: "#FFA860";
+        readonly 200: "#FF9630";
+        readonly 300: "#FF8500";
+        readonly 400: "#FF7900";
+        readonly 500: "#F56C00";
+        readonly 600: "#E06D10";
+        readonly 700: "#D0620C";
+        readonly 800: "#B75500";
+        readonly 900: "#A34900";
+    };
+    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 steel: {
+        readonly 100: "#8AA4B8";
+        readonly 200: "#7894A8";
+        readonly 300: "#678498";
+        readonly 400: "#557488";
+        readonly 500: "#406D87";
+        readonly 600: "#39617A";
+        readonly 700: "#32556D";
+        readonly 800: "#243D53";
+        readonly 900: "#1D3146";
+    };
+    readonly white: "#FFFFFF";
+    readonly black: "#000000";
+    readonly transparent: "transparent";
+};
+/**
+ * Discrete rainbow palette for data visualization
+ * Based on Paul Tol's color schemes: https://personal.sron.nl/~pault/#fig:scheme_rainbow_discrete
+ */
+declare const discreteRainbow: readonly ["#E8ECFB", "#D9CCE3", "#D1BBD7", "#CAACCB", "#BA8DB4", "#AE76A3", "#AA6F9E", "#994F88", "#882E72", "#1965B0", "#437DBF", "#5289C7", "#6195CF", "#7BAFDE", "#4EB265", "#90C987", "#CAE0AB", "#F7F056", "#F7CB45", "#F6C141", "#F4A736", "#F1932D", "#EE8026", "#E8601C", "#E65518", "#DC050C", "#A5170E", "#72190E", "#42150A"];
+/**
+ * Get a color from the discrete rainbow palette for a given index and palette size.
+ * Colors are optimized for visual distinction at each palette size.
+ *
+ * @param index - The index of the color in the series (0-based)
+ * @param size - The total number of colors needed (1-23)
+ * @returns The hex color string
+ */
+declare function getDiscreteRainbowColor(index: number, size: number): string;
+declare const primitiveTypography: {
+    readonly fontFamilies: {
+        readonly sans: readonly ["Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", "sans-serif"];
+        readonly body: readonly ["Nunito Sans", "sans-serif"];
+        readonly heading: readonly ["Space Grotesk", "sans-serif"];
+        readonly mono: readonly ["SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", "monospace"];
+    };
+    readonly fontSizes: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.5rem";
+        readonly '2xl': "2rem";
+        readonly '3xl': "2.25rem";
+        readonly '4xl': "3rem";
+        readonly '5xl': "3.5rem";
+    };
+    readonly fontWeights: {
+        readonly normal: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+    readonly lineHeights: {
+        readonly none: 1;
+        readonly tight: 1.375;
+        readonly snug: 1.5;
+        readonly normal: 1.57;
+        readonly relaxed: 1.66;
+        readonly loose: 1.75;
+    };
+    readonly letterSpacing: {
+        readonly tighter: "-0.05em";
+        readonly tight: "-0.025em";
+        readonly normal: "0em";
+        readonly wide: "0.025em";
+        readonly wider: "0.05em";
+        readonly widest: "0.5px";
+    };
+};
+declare const primitiveSpacing: {
+    readonly 0: "0";
+    readonly px: "1px";
+    readonly 0.5: "0.125rem";
+    readonly 1: "0.25rem";
+    readonly 1.5: "0.375rem";
+    readonly 2: "0.5rem";
+    readonly 2.5: "0.625rem";
+    readonly 3: "0.75rem";
+    readonly 3.5: "0.875rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+    readonly 7: "1.75rem";
+    readonly 8: "2rem";
+    readonly 9: "2.25rem";
+    readonly 10: "2.5rem";
+    readonly 11: "2.75rem";
+    readonly 12: "3rem";
+    readonly 14: "3.5rem";
+    readonly 16: "4rem";
+    readonly 20: "5rem";
+    readonly 24: "6rem";
+    readonly 28: "7rem";
+    readonly 32: "8rem";
+};
+declare const primitiveBorderRadius: {
+    readonly none: "0";
+    readonly sm: "4px";
+    readonly DEFAULT: "8px";
+    readonly md: "8px";
+    readonly lg: "12px";
+    readonly xl: "16px";
+    readonly '2xl': "24px";
+    readonly full: "9999px";
+};
+declare const primitiveShadows: {
+    readonly none: "none";
+    readonly sm: "0px 1px 2px rgba(100, 116, 139, 0.12)";
+    readonly DEFAULT: "0px 1px 3px rgba(100, 116, 139, 0.12), 0px 1px 2px rgba(100, 116, 139, 0.24)";
+    readonly md: "0px 4px 6px rgba(100, 116, 139, 0.12)";
+    readonly lg: "0px 10px 15px rgba(100, 116, 139, 0.12)";
+    readonly xl: "0px 20px 25px rgba(100, 116, 139, 0.12)";
+    readonly '2xl': "0px 25px 50px rgba(100, 116, 139, 0.25)";
+    readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)";
+};
+declare const primitiveBreakpoints: {
+    readonly xs: 0;
+    readonly sm: 600;
+    readonly md: 1000;
+    readonly lg: 1200;
+    readonly xl: 1920;
+};
+declare const primitiveZIndex: {
+    readonly hide: -1;
+    readonly auto: "auto";
+    readonly base: 0;
+    readonly docked: 10;
+    readonly dropdown: 1000;
+    readonly sticky: 1100;
+    readonly drawer: 1100;
+    readonly banner: 1200;
+    readonly appBar: 1200;
+    readonly overlay: 1300;
+    readonly modal: 1400;
+    readonly popover: 1500;
+    readonly skipLink: 1600;
+    readonly toast: 1700;
+    readonly tooltip: 1800;
+};
+
+/**
+ * Semantic Design Tokens
+ *
+ * Meaningful tokens following DTCG (Design Tokens Community Group) naming conventions.
+ * Pattern: {category}-{intent}-{variant?}-{state?}
+ *
+ * Categories:
+ * - brand-* : Brand colors (primary, secondary, accent)
+ * - status-* : Feedback colors (success, error, warning, info)
+ * - result-* : Outcome indicators (improve, degrade, inconclusive, neutral)
+ * - data-* : Data visualization colors (chart series)
+ * - on-* : Text on colored backgrounds
+ * - surface-* : Elevated containers (NOT "paper")
+ * - background-* : Page backgrounds
+ * - text-* : Text colors
+ * - border-* : Border colors
+ * - interactive-* : Hover/focus/active/disabled states
+ */
+declare const semanticColorsLight: {
+    readonly 'brand-primary': "#FF7900";
+    readonly 'brand-primary-light': "#FF9630";
+    readonly 'brand-primary-dark': "#D0620C";
+    readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
+    readonly 'brand-primary-hover': "#F56C00";
+    readonly 'brand-primary-active': "#E06D10";
+    readonly 'brand-secondary': "#406D87";
+    readonly 'brand-secondary-light': "#678498";
+    readonly 'brand-secondary-dark': "#32556D";
+    readonly 'brand-secondary-subtle': "rgba(64, 109, 135, 0.08)";
+    readonly 'brand-secondary-hover': "#39617A";
+    readonly 'brand-secondary-active': "#32556D";
+    readonly 'on-brand-primary': "#FFFFFF";
+    readonly 'on-brand-secondary': "#FFFFFF";
+    readonly 'status-success': "#14B8A6";
+    readonly 'status-success-light': "#43C6B7";
+    readonly 'status-success-dark': "#0E8074";
+    readonly 'status-success-subtle': "#F0FDFA";
+    readonly 'status-error': "#D14343";
+    readonly 'status-error-light': "#DA6868";
+    readonly 'status-error-dark': "#922E2E";
+    readonly 'status-error-subtle': "#FEF2F2";
+    readonly 'status-warning': "#FFB020";
+    readonly 'status-warning-light': "#FFBF4C";
+    readonly 'status-warning-dark': "#B27B16";
+    readonly 'status-warning-subtle': "#FFFBEB";
+    readonly 'status-info': "#2196F3";
+    readonly 'status-info-light': "#64B6F7";
+    readonly 'status-info-dark': "#0B79D0";
+    readonly 'status-info-subtle': "#F0F9FF";
+    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-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";
+};
+declare const semanticColorsDark: {
+    readonly 'brand-primary': "#FF7900";
+    readonly 'brand-primary-light': "#FF9630";
+    readonly 'brand-primary-dark': "#D0620C";
+    readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
+    readonly 'brand-primary-hover': "#FF8500";
+    readonly 'brand-primary-active': "#FF9630";
+    readonly 'brand-secondary': "#406D87";
+    readonly 'brand-secondary-light': "#678498";
+    readonly 'brand-secondary-dark': "#32556D";
+    readonly 'brand-secondary-subtle': "rgba(64, 109, 135, 0.12)";
+    readonly 'brand-secondary-hover': "#557488";
+    readonly 'brand-secondary-active': "#678498";
+    readonly 'on-brand-primary': "#FFFFFF";
+    readonly 'on-brand-secondary': "#FFFFFF";
+    readonly 'status-success': "#14B8A6";
+    readonly 'status-success-light': "#43C6B7";
+    readonly 'status-success-dark': "#0E8074";
+    readonly 'status-success-subtle': "rgba(20, 184, 166, 0.12)";
+    readonly 'status-error': "#D14343";
+    readonly 'status-error-light': "#DA6868";
+    readonly 'status-error-dark': "#922E2E";
+    readonly 'status-error-subtle': "rgba(209, 67, 67, 0.12)";
+    readonly 'status-warning': "#FFB020";
+    readonly 'status-warning-light': "#FFBF4C";
+    readonly 'status-warning-dark': "#B27B16";
+    readonly 'status-warning-subtle': "rgba(255, 176, 32, 0.12)";
+    readonly 'status-info': "#2196F3";
+    readonly 'status-info-light': "#64B6F7";
+    readonly 'status-info-dark': "#0B79D0";
+    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-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 h2: {
+        readonly fontFamily: "heading";
+        readonly fontSize: "3rem";
+        readonly fontWeight: 700;
+        readonly lineHeight: 1.375;
+    };
+    readonly h3: {
+        readonly fontFamily: "heading";
+        readonly fontSize: "2.25rem";
+        readonly fontWeight: 700;
+        readonly lineHeight: 1.375;
+    };
+    readonly h4: {
+        readonly fontFamily: "heading";
+        readonly fontSize: "2rem";
+        readonly fontWeight: 700;
+        readonly lineHeight: 1.375;
+    };
+    readonly h5: {
+        readonly fontFamily: "heading";
+        readonly fontSize: "1.5rem";
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.375;
+    };
+    readonly h6: {
+        readonly fontFamily: "heading";
+        readonly fontSize: "1.125rem";
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.375;
+    };
+    readonly body1: {
+        readonly fontFamily: "body";
+        readonly fontSize: "1rem";
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+    };
+    readonly body2: {
+        readonly fontFamily: "body";
+        readonly fontSize: "0.875rem";
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.57;
+    };
+    readonly subtitle1: {
+        readonly fontFamily: "body";
+        readonly fontSize: "1rem";
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.75;
+    };
+    readonly subtitle2: {
+        readonly fontFamily: "body";
+        readonly fontSize: "0.875rem";
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.57;
+    };
+    readonly caption: {
+        readonly fontFamily: "body";
+        readonly fontSize: "0.75rem";
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.66;
+    };
+    readonly overline: {
+        readonly fontFamily: "body";
+        readonly fontSize: "0.75rem";
+        readonly fontWeight: 600;
+        readonly lineHeight: 2.5;
+        readonly letterSpacing: "0.5px";
+        readonly textTransform: "uppercase";
+    };
+    readonly button: {
+        readonly fontFamily: "sans";
+        readonly fontSize: "0.875rem";
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.75;
+    };
+};
+declare const buttonSizes: {
+    readonly sm: {
+        readonly paddingX: "16px";
+        readonly paddingY: "6px";
+        readonly fontSize: "0.875rem";
+    };
+    readonly md: {
+        readonly paddingX: "20px";
+        readonly paddingY: "8px";
+        readonly fontSize: "0.875rem";
+    };
+    readonly lg: {
+        readonly paddingX: "24px";
+        readonly paddingY: "11px";
+        readonly fontSize: "1rem";
+    };
+};
+type ThemeMode = 'light' | 'dark';
+declare function getSemanticColors(mode: ThemeMode): {
+    readonly 'brand-primary': "#FF7900";
+    readonly 'brand-primary-light': "#FF9630";
+    readonly 'brand-primary-dark': "#D0620C";
+    readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
+    readonly 'brand-primary-hover': "#F56C00";
+    readonly 'brand-primary-active': "#E06D10";
+    readonly 'brand-secondary': "#406D87";
+    readonly 'brand-secondary-light': "#678498";
+    readonly 'brand-secondary-dark': "#32556D";
+    readonly 'brand-secondary-subtle': "rgba(64, 109, 135, 0.08)";
+    readonly 'brand-secondary-hover': "#39617A";
+    readonly 'brand-secondary-active': "#32556D";
+    readonly 'on-brand-primary': "#FFFFFF";
+    readonly 'on-brand-secondary': "#FFFFFF";
+    readonly 'status-success': "#14B8A6";
+    readonly 'status-success-light': "#43C6B7";
+    readonly 'status-success-dark': "#0E8074";
+    readonly 'status-success-subtle': "#F0FDFA";
+    readonly 'status-error': "#D14343";
+    readonly 'status-error-light': "#DA6868";
+    readonly 'status-error-dark': "#922E2E";
+    readonly 'status-error-subtle': "#FEF2F2";
+    readonly 'status-warning': "#FFB020";
+    readonly 'status-warning-light': "#FFBF4C";
+    readonly 'status-warning-dark': "#B27B16";
+    readonly 'status-warning-subtle': "#FFFBEB";
+    readonly 'status-info': "#2196F3";
+    readonly 'status-info-light': "#64B6F7";
+    readonly 'status-info-dark': "#0B79D0";
+    readonly 'status-info-subtle': "#F0F9FF";
+    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-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': "#FF9630";
+    readonly 'brand-primary-dark': "#D0620C";
+    readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
+    readonly 'brand-primary-hover': "#FF8500";
+    readonly 'brand-primary-active': "#FF9630";
+    readonly 'brand-secondary': "#406D87";
+    readonly 'brand-secondary-light': "#678498";
+    readonly 'brand-secondary-dark': "#32556D";
+    readonly 'brand-secondary-subtle': "rgba(64, 109, 135, 0.12)";
+    readonly 'brand-secondary-hover': "#557488";
+    readonly 'brand-secondary-active': "#678498";
+    readonly 'on-brand-primary': "#FFFFFF";
+    readonly 'on-brand-secondary': "#FFFFFF";
+    readonly 'status-success': "#14B8A6";
+    readonly 'status-success-light': "#43C6B7";
+    readonly 'status-success-dark': "#0E8074";
+    readonly 'status-success-subtle': "rgba(20, 184, 166, 0.12)";
+    readonly 'status-error': "#D14343";
+    readonly 'status-error-light': "#DA6868";
+    readonly 'status-error-dark': "#922E2E";
+    readonly 'status-error-subtle': "rgba(209, 67, 67, 0.12)";
+    readonly 'status-warning': "#FFB020";
+    readonly 'status-warning-light': "#FFBF4C";
+    readonly 'status-warning-dark': "#B27B16";
+    readonly 'status-warning-subtle': "rgba(255, 176, 32, 0.12)";
+    readonly 'status-info': "#2196F3";
+    readonly 'status-info-light': "#64B6F7";
+    readonly 'status-info-dark': "#0B79D0";
+    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-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";
+};
+
+/**
+ * Theme Configuration
+ *
+ * Maps semantic tokens to CSS custom properties for runtime theming.
+ * Dark mode is the default theme.
+ */
+
+declare const lightThemeCSSVars: {
+    readonly '--color-brand-primary': "#FF7900";
+    readonly '--color-brand-primary-light': "#FF9630";
+    readonly '--color-brand-primary-dark': "#D0620C";
+    readonly '--color-brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
+    readonly '--color-brand-secondary': "#406D87";
+    readonly '--color-brand-secondary-light': "#678498";
+    readonly '--color-brand-secondary-dark': "#32556D";
+    readonly '--color-brand-secondary-subtle': "rgba(64, 109, 135, 0.08)";
+    readonly '--color-on-brand-primary': "#FFFFFF";
+    readonly '--color-on-brand-secondary': "#FFFFFF";
+    readonly '--color-status-success': "#14B8A6";
+    readonly '--color-status-success-subtle': "#F0FDFA";
+    readonly '--color-status-error': "#D14343";
+    readonly '--color-status-error-subtle': "#FEF2F2";
+    readonly '--color-status-warning': "#FFB020";
+    readonly '--color-status-warning-subtle': "#FFFBEB";
+    readonly '--color-status-info': "#2196F3";
+    readonly '--color-status-info-subtle': "#F0F9FF";
+    readonly '--color-text-primary': "#121828";
+    readonly '--color-text-secondary': "#65748B";
+    readonly '--color-text-tertiary': "#9CA3AF";
+    readonly '--color-text-disabled': "rgba(55, 65, 81, 0.48)";
+    readonly '--color-text-inverse': "#FFFFFF";
+    readonly '--color-text-link': "#5048E5";
+    readonly '--color-surface-base': "#FFFFFF";
+    readonly '--color-surface-elevated': "#FAFAFA";
+    readonly '--color-surface-raised': "#F3F4F6";
+    readonly '--color-background-base': "#EBEBEB";
+    readonly '--color-background-default': "#FFFFFF";
+    readonly '--color-background-subtle': "#FAFAFA";
+    readonly '--color-border-default': "#E8E9EB";
+    readonly '--color-border-subtle': "#F3F4F6";
+    readonly '--color-border-strong': "#D1D5DB";
+    readonly '--color-border-focus': "#5048E5";
+    readonly '--color-interactive-hover': "rgba(55, 65, 81, 0.04)";
+    readonly '--color-interactive-focus': "rgba(55, 65, 81, 0.12)";
+    readonly '--color-interactive-active': "rgba(55, 65, 81, 0.16)";
+    readonly '--color-interactive-selected': "rgba(55, 65, 81, 0.08)";
+    readonly '--color-interactive-disabled': "rgba(55, 65, 81, 0.12)";
+    readonly '--color-divider': "#E8E9EB";
+};
+declare const darkThemeCSSVars: {
+    readonly '--color-brand-primary': "#FF7900";
+    readonly '--color-brand-primary-light': "#FF9630";
+    readonly '--color-brand-primary-dark': "#D0620C";
+    readonly '--color-brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
+    readonly '--color-brand-secondary': "#406D87";
+    readonly '--color-brand-secondary-light': "#678498";
+    readonly '--color-brand-secondary-dark': "#32556D";
+    readonly '--color-brand-secondary-subtle': "rgba(64, 109, 135, 0.12)";
+    readonly '--color-on-brand-primary': "#FFFFFF";
+    readonly '--color-on-brand-secondary': "#FFFFFF";
+    readonly '--color-status-success': "#14B8A6";
+    readonly '--color-status-success-subtle': "rgba(20, 184, 166, 0.12)";
+    readonly '--color-status-error': "#D14343";
+    readonly '--color-status-error-subtle': "rgba(209, 67, 67, 0.12)";
+    readonly '--color-status-warning': "#FFB020";
+    readonly '--color-status-warning-subtle': "rgba(255, 176, 32, 0.12)";
+    readonly '--color-status-info': "#2196F3";
+    readonly '--color-status-info-subtle': "rgba(33, 150, 243, 0.12)";
+    readonly '--color-text-primary': "#F3F4F6";
+    readonly '--color-text-secondary': "#9CA3AF";
+    readonly '--color-text-tertiary': "#6B7280";
+    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-border-default': "#1F1F1F";
+    readonly '--color-border-subtle': "#1C1C1C";
+    readonly '--color-border-strong': "#2C2C2C";
+    readonly '--color-border-focus': "#828DF8";
+    readonly '--color-interactive-hover': "rgba(255, 255, 255, 0.04)";
+    readonly '--color-interactive-focus': "rgba(255, 255, 255, 0.12)";
+    readonly '--color-interactive-active': "rgba(255, 255, 255, 0.16)";
+    readonly '--color-interactive-selected': "rgba(255, 255, 255, 0.08)";
+    readonly '--color-interactive-disabled': "rgba(255, 255, 255, 0.12)";
+    readonly '--color-divider': "#1F1F1F";
+};
+declare function getThemeCSSVars(mode: ThemeMode): {
+    readonly '--color-brand-primary': "#FF7900";
+    readonly '--color-brand-primary-light': "#FF9630";
+    readonly '--color-brand-primary-dark': "#D0620C";
+    readonly '--color-brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
+    readonly '--color-brand-secondary': "#406D87";
+    readonly '--color-brand-secondary-light': "#678498";
+    readonly '--color-brand-secondary-dark': "#32556D";
+    readonly '--color-brand-secondary-subtle': "rgba(64, 109, 135, 0.08)";
+    readonly '--color-on-brand-primary': "#FFFFFF";
+    readonly '--color-on-brand-secondary': "#FFFFFF";
+    readonly '--color-status-success': "#14B8A6";
+    readonly '--color-status-success-subtle': "#F0FDFA";
+    readonly '--color-status-error': "#D14343";
+    readonly '--color-status-error-subtle': "#FEF2F2";
+    readonly '--color-status-warning': "#FFB020";
+    readonly '--color-status-warning-subtle': "#FFFBEB";
+    readonly '--color-status-info': "#2196F3";
+    readonly '--color-status-info-subtle': "#F0F9FF";
+    readonly '--color-text-primary': "#121828";
+    readonly '--color-text-secondary': "#65748B";
+    readonly '--color-text-tertiary': "#9CA3AF";
+    readonly '--color-text-disabled': "rgba(55, 65, 81, 0.48)";
+    readonly '--color-text-inverse': "#FFFFFF";
+    readonly '--color-text-link': "#5048E5";
+    readonly '--color-surface-base': "#FFFFFF";
+    readonly '--color-surface-elevated': "#FAFAFA";
+    readonly '--color-surface-raised': "#F3F4F6";
+    readonly '--color-background-base': "#EBEBEB";
+    readonly '--color-background-default': "#FFFFFF";
+    readonly '--color-background-subtle': "#FAFAFA";
+    readonly '--color-border-default': "#E8E9EB";
+    readonly '--color-border-subtle': "#F3F4F6";
+    readonly '--color-border-strong': "#D1D5DB";
+    readonly '--color-border-focus': "#5048E5";
+    readonly '--color-interactive-hover': "rgba(55, 65, 81, 0.04)";
+    readonly '--color-interactive-focus': "rgba(55, 65, 81, 0.12)";
+    readonly '--color-interactive-active': "rgba(55, 65, 81, 0.16)";
+    readonly '--color-interactive-selected': "rgba(55, 65, 81, 0.08)";
+    readonly '--color-interactive-disabled': "rgba(55, 65, 81, 0.12)";
+    readonly '--color-divider': "#E8E9EB";
+} | {
+    readonly '--color-brand-primary': "#FF7900";
+    readonly '--color-brand-primary-light': "#FF9630";
+    readonly '--color-brand-primary-dark': "#D0620C";
+    readonly '--color-brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
+    readonly '--color-brand-secondary': "#406D87";
+    readonly '--color-brand-secondary-light': "#678498";
+    readonly '--color-brand-secondary-dark': "#32556D";
+    readonly '--color-brand-secondary-subtle': "rgba(64, 109, 135, 0.12)";
+    readonly '--color-on-brand-primary': "#FFFFFF";
+    readonly '--color-on-brand-secondary': "#FFFFFF";
+    readonly '--color-status-success': "#14B8A6";
+    readonly '--color-status-success-subtle': "rgba(20, 184, 166, 0.12)";
+    readonly '--color-status-error': "#D14343";
+    readonly '--color-status-error-subtle': "rgba(209, 67, 67, 0.12)";
+    readonly '--color-status-warning': "#FFB020";
+    readonly '--color-status-warning-subtle': "rgba(255, 176, 32, 0.12)";
+    readonly '--color-status-info': "#2196F3";
+    readonly '--color-status-info-subtle': "rgba(33, 150, 243, 0.12)";
+    readonly '--color-text-primary': "#F3F4F6";
+    readonly '--color-text-secondary': "#9CA3AF";
+    readonly '--color-text-tertiary': "#6B7280";
+    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-border-default': "#1F1F1F";
+    readonly '--color-border-subtle': "#1C1C1C";
+    readonly '--color-border-strong': "#2C2C2C";
+    readonly '--color-border-focus': "#828DF8";
+    readonly '--color-interactive-hover': "rgba(255, 255, 255, 0.04)";
+    readonly '--color-interactive-focus': "rgba(255, 255, 255, 0.12)";
+    readonly '--color-interactive-active': "rgba(255, 255, 255, 0.16)";
+    readonly '--color-interactive-selected': "rgba(255, 255, 255, 0.08)";
+    readonly '--color-interactive-disabled': "rgba(255, 255, 255, 0.12)";
+    readonly '--color-divider': "#1F1F1F";
+};
+declare const gluestackConfig: {
+    readonly tokens: {
+        readonly colors: {
+            readonly primary500: "var(--color-brand-primary)";
+            readonly primary600: "var(--color-brand-primary-dark)";
+            readonly primary400: "var(--color-brand-primary-light)";
+            readonly secondary500: "var(--color-brand-secondary)";
+            readonly secondary600: "var(--color-brand-secondary-dark)";
+            readonly secondary400: "var(--color-brand-secondary-light)";
+            readonly success500: "var(--color-status-success)";
+            readonly error500: "var(--color-status-error)";
+            readonly warning500: "var(--color-status-warning)";
+            readonly info500: "var(--color-status-info)";
+            readonly textLight: "var(--color-text-primary)";
+            readonly textDark: "var(--color-text-inverse)";
+            readonly backgroundLight: "var(--color-background-default)";
+            readonly backgroundDark: "var(--color-surface-base)";
+        };
+        readonly space: {
+            readonly '0': 0;
+            readonly '1': 4;
+            readonly '2': 8;
+            readonly '3': 12;
+            readonly '4': 16;
+            readonly '5': 20;
+            readonly '6': 24;
+            readonly '8': 32;
+            readonly '10': 40;
+            readonly '12': 48;
+            readonly '16': 64;
+            readonly '20': 80;
+            readonly '24': 96;
+        };
+        readonly radii: {
+            readonly none: 0;
+            readonly sm: 4;
+            readonly md: 8;
+            readonly lg: 12;
+            readonly xl: 16;
+            readonly '2xl': 24;
+            readonly full: 9999;
+        };
+        readonly fontSizes: {
+            readonly xs: 12;
+            readonly sm: 14;
+            readonly md: 16;
+            readonly lg: 18;
+            readonly xl: 20;
+            readonly '2xl': 24;
+            readonly '3xl': 30;
+            readonly '4xl': 36;
+            readonly '5xl': 48;
+        };
+    };
+    readonly aliases: {
+        readonly bg: "backgroundColor";
+        readonly p: "padding";
+        readonly px: "paddingHorizontal";
+        readonly py: "paddingVertical";
+        readonly m: "margin";
+        readonly mx: "marginHorizontal";
+        readonly my: "marginVertical";
+        readonly h: "height";
+        readonly w: "width";
+        readonly rounded: "borderRadius";
+    };
+};
+type ThemeConfig = typeof gluestackConfig;
+
+/**
+ * Neumorphic Shadow Utilities
+ *
+ * Neumorphism creates soft, extruded UI using dual opposing shadows.
+ * - Light source assumed from top-left
+ * - Raised elements: dark shadow bottom-right, light highlight top-left
+ * - Pressed elements: inverted with `inset` shadows
+ */
+
+/**
+ * Parse a hex color to RGB values (0-255).
+ * Supports both #RGB and #RRGGBB formats.
+ */
+declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Convert RGB (0-255) to HSV (h: 0-360, s: 0-1, v: 0-1).
+ */
+declare function rgbToHsv(r: number, g: number, b: number): {
+    h: number;
+    s: number;
+    v: number;
+};
+/**
+ * Convert HSV (h: 0-360, s: 0-1, v: 0-1) to RGB (0-255).
+ */
+declare function hsvToRgb(h: number, s: number, v: number): {
+    r: number;
+    g: number;
+    b: number;
+};
+/**
+ * Convert RGB values to hex string.
+ */
+declare function rgbToHex(r: number, g: number, b: number): string;
+/**
+ * Lighten a color by increasing its HSV Value component.
+ *
+ * @param hex - The hex color to lighten
+ * @param amount - Amount to increase V by (0-1)
+ */
+declare function lighten(hex: string, amount?: number): string;
+/**
+ * Darken a color by decreasing its HSV Value component.
+ *
+ * @param hex - The hex color to darken
+ * @param amount - Amount to decrease V by (0-1)
+ */
+declare function darken(hex: string, amount?: number): string;
+/**
+ * Get hover colors for a button based on its background color.
+ * Automatically adapts intensity based on the color's luminance.
+ *
+ * @param bgColor - The button's background color (hex)
+ * @param intensity - How strong the hover effect should be ('subtle' | 'medium' | 'strong')
+ */
+declare function getHoverColors(bgColor: string, intensity?: 'subtle' | 'medium' | 'strong'): {
+    raised: string;
+    pressed: string;
+};
+/**
+ * Check if a color is considered "dark" (for choosing text color).
+ * Uses HSV Value component for simplicity.
+ */
+declare function isDark(hex: string): boolean;
+/**
+ * Shadow configuration for different surface colors.
+ * Each surface needs calibrated light/dark shadow colors.
+ *
+ * - dark: soft shadow for depth (bottom-right)
+ * - light: sharp rim highlight (top-left) - higher opacity for crisp edge
+ * - darker: deeper shadow for pressed/inset states
+ */
+declare const shadowColors: {
+    charcoal: {
+        dark: string;
+        light: string;
+        darker: string;
+    };
+    neutralDark: {
+        dark: string;
+        light: string;
+        darker: string;
+    };
+    neutralLight: {
+        dark: string;
+        light: string;
+        darker: string;
+    };
+};
+type ShadowIntensity = 'subtle' | 'medium' | 'strong';
+type ShadowSurface = keyof typeof shadowColors;
+/**
+ * Creates a raised (elevated) neumorphic shadow.
+ * Element appears to float above the surface.
+ *
+ * Uses a soft dark shadow (bottom-right) and a sharp rim light (top-left).
+ */
+declare function createRaisedShadow(surface?: ShadowSurface, intensity?: ShadowIntensity): ViewStyle;
+/**
+ * Creates a pressed (inset) neumorphic shadow.
+ * Element appears pushed into the surface.
+ *
+ * Uses a soft dark inset shadow (top-left) and a thin sharp rim light (bottom-right).
+ */
+declare function createPressedShadow(surface?: ShadowSurface, intensity?: ShadowIntensity): ViewStyle;
+/**
+ * Creates a flat (no shadow) style for hover states.
+ */
+declare function createFlatShadow(): ViewStyle;
+/**
+ * Creates a hover shadow for raised elements.
+ * Reduces shadow depth but keeps a subtle rim light to maintain visual boundary.
+ */
+declare function createRaisedHoverShadow(surface?: ShadowSurface, intensity?: ShadowIntensity): ViewStyle;
+/**
+ * Creates a hover shadow for pressed elements.
+ * Reduces shadow depth but keeps a subtle rim light to maintain visual boundary.
+ */
+declare function createPressedHoverShadow(surface?: ShadowSurface, intensity?: ShadowIntensity): ViewStyle;
+/**
+ * Pre-built shadow presets for common use cases.
+ */
+declare const neumorphicShadows: {
+    charcoal: {
+        raised: {
+            subtle: ViewStyle;
+            medium: ViewStyle;
+            strong: ViewStyle;
+        };
+        raisedHover: {
+            subtle: ViewStyle;
+            medium: ViewStyle;
+            strong: ViewStyle;
+        };
+        pressed: {
+            subtle: ViewStyle;
+            medium: ViewStyle;
+            strong: ViewStyle;
+        };
+        pressedHover: {
+            subtle: ViewStyle;
+            medium: ViewStyle;
+            strong: ViewStyle;
+        };
+        flat: ViewStyle;
+    };
+    neutralDark: {
+        raised: {
+            subtle: ViewStyle;
+            medium: ViewStyle;
+            strong: ViewStyle;
+        };
+        raisedHover: {
+            subtle: ViewStyle;
+            medium: ViewStyle;
+            strong: ViewStyle;
+        };
+        pressed: {
+            subtle: ViewStyle;
+            medium: ViewStyle;
+            strong: ViewStyle;
+        };
+        pressedHover: {
+            subtle: ViewStyle;
+            medium: ViewStyle;
+            strong: ViewStyle;
+        };
+        flat: ViewStyle;
+    };
+    neutralLight: {
+        raised: {
+            subtle: ViewStyle;
+            medium: ViewStyle;
+            strong: ViewStyle;
+        };
+        raisedHover: {
+            subtle: ViewStyle;
+            medium: ViewStyle;
+            strong: ViewStyle;
+        };
+        pressed: {
+            subtle: ViewStyle;
+            medium: ViewStyle;
+            strong: ViewStyle;
+        };
+        pressedHover: {
+            subtle: ViewStyle;
+            medium: ViewStyle;
+            strong: ViewStyle;
+        };
+        flat: ViewStyle;
+    };
+};
+
+/**
+ * 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 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;
+    };
+};
+type ComponentType = keyof typeof componentElevationRanges;
+/**
+ * Validate and clamp elevation to component's allowed range
+ */
+declare function getValidatedElevation(component: ComponentType, requested: ElevationLevel): ElevationLevel;
+
+export { type ComponentType, type ElevationConfig, type ElevationLevel, type ShadowIntensity, type ShadowSurface, type ThemeConfig, type ThemeMode, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors };