@titan-design/react-ui 0.4.0 → 0.6.0

package/dist/theme/index.mjs

@@ -1,4 +1,2087 @@
-export { ThemeProvider, applyThemePreset, audiobookPreset, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darken, defaultPreset, elevationSystem, getBaseSurfaceColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getValidatedElevation, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, lighten, neumorphicShadows, resolveColor, rgbToHex, rgbToHsv, shadowColors, validateCssPropertyManifest } from '../chunk-SNVKL5WZ.mjs';
-export { buttonSizes, darkThemeCSSVars, discreteRainbow, getDiscreteRainbowColor, getSemanticColors, getThemeCSSVars, gluestackConfig, lightThemeCSSVars, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, semanticColorsDark, semanticColorsLight, semanticTypography } from '../chunk-7XPB4NAO.mjs';
+import { Platform, View } from 'react-native';
+import { vars } from 'nativewind';
+import { jsx as jsx$1 } from 'react/jsx-runtime';
+
+// src/theme/tokens/primitives.ts
+var primitiveColors = {
+  // Blue scale (primary brand)
+  blue: {
+    50: "#EFF6FF",
+    100: "#DBEAFE",
+    200: "#BFDBFE",
+    300: "#93C5FD",
+    400: "#60A5FA",
+    500: "#3B82F6",
+    600: "#5048E5",
+    // Primary main
+    700: "#3832A0",
+    // Primary dark
+    800: "#1E40AF",
+    900: "#1E3A8A"
+  },
+  // Green scale (secondary brand)
+  green: {
+    50: "#ECFDF5",
+    100: "#D1FAE5",
+    200: "#A7F3D0",
+    300: "#6EE7B7",
+    400: "#3FC79A",
+    // Secondary light
+    500: "#10B981",
+    // Secondary main
+    600: "#059669",
+    700: "#0B815A",
+    // Secondary dark
+    800: "#065F46",
+    900: "#064E3B"
+  },
+  // Teal scale (success)
+  teal: {
+    50: "#F0FDFA",
+    100: "#CCFBF1",
+    200: "#99F6E4",
+    300: "#5EEAD4",
+    400: "#43C6B7",
+    // Success light
+    500: "#14B8A6",
+    // Success main
+    600: "#0D9488",
+    700: "#0E8074",
+    // Success dark
+    800: "#115E59",
+    900: "#134E4A"
+  },
+  // Red scale (error)
+  red: {
+    50: "#FEF2F2",
+    100: "#FEE2E2",
+    200: "#FECACA",
+    300: "#FCA5A5",
+    400: "#DA6868",
+    // Error light
+    500: "#EF4444",
+    600: "#D14343",
+    // Error main
+    700: "#922E2E",
+    // Error dark
+    800: "#991B1B",
+    900: "#7F1D1D"
+  },
+  // Vivid green scale (live/go success)
+  greenVivid: {
+    50: "#E9FBF0",
+    100: "#C8F7DA",
+    200: "#9FF0BF",
+    300: "#6BE79D",
+    400: "#47DE84",
+    // Success vivid light
+    500: "#2ED573",
+    // Success vivid main
+    600: "#22B85F",
+    700: "#1A9950",
+    // Success vivid dark
+    800: "#157A40",
+    900: "#105C30"
+  },
+  // Vivid red scale (alert)
+  redVivid: {
+    50: "#FFECEE",
+    100: "#FFD6DB",
+    200: "#FFB3BC",
+    300: "#FF8593",
+    400: "#FF6070",
+    // Error vivid light
+    500: "#FF4757",
+    // Error vivid main
+    600: "#E63548",
+    700: "#C42539",
+    // Error vivid dark
+    800: "#9E1C2C",
+    900: "#7A1520"
+  },
+  // Amber scale (warning)
+  amber: {
+    50: "#FFFBEB",
+    100: "#FEF3C7",
+    200: "#FDE68A",
+    300: "#FCD34D",
+    400: "#FFBF4C",
+    // Warning light
+    500: "#FFB020",
+    // Warning main
+    600: "#B27B16",
+    // Warning dark
+    700: "#B45309",
+    800: "#92400E",
+    900: "#78350F"
+  },
+  // Sky/Blue scale (info)
+  sky: {
+    50: "#F0F9FF",
+    100: "#E0F2FE",
+    200: "#BAE6FD",
+    300: "#7DD3FC",
+    400: "#64B6F7",
+    // Info light
+    500: "#2196F3",
+    // Info main
+    600: "#0284C7",
+    700: "#0B79D0",
+    // Info dark
+    800: "#075985",
+    900: "#0C4A6E"
+  },
+  // Neutral/Gray scale
+  neutral: {
+    50: "#FAFAFA",
+    100: "#F3F4F6",
+    200: "#E5E7EB",
+    300: "#D1D5DB",
+    400: "#9CA3AF",
+    500: "#6B7280",
+    600: "#4B5563",
+    700: "#374151",
+    800: "#1F2937",
+    900: "#111827",
+    950: "#030712"
+  },
+  // Orange scale (accent/brand color)
+  accent: {
+    100: "#FFA860",
+    200: "#FF9630",
+    300: "#FF8500",
+    400: "#FF7900",
+    500: "#F56C00",
+    600: "#E06D10",
+    700: "#D0620C",
+    800: "#B75500",
+    900: "#A34900"
+  },
+  // Charcoal scale (dark backgrounds)
+  charcoal: {
+    0: "#6E6E6E",
+    50: "#5D5D5D",
+    100: "#4C4C4C",
+    200: "#3C3C3C",
+    300: "#2C2C2C",
+    400: "#1F1F1F",
+    500: "#1C1C1C",
+    600: "#191919",
+    700: "#161616",
+    800: "#131313",
+    900: "#101010"
+  },
+  // Steel scale (cool accent)
+  steel: {
+    100: "#8AA4B8",
+    200: "#7894A8",
+    300: "#678498",
+    400: "#557488",
+    500: "#406D87",
+    600: "#39617A",
+    700: "#32556D",
+    800: "#243D53",
+    900: "#1D3146"
+  },
+  // Pure colors
+  white: "#FFFFFF",
+  black: "#000000",
+  transparent: "transparent"
+};
+var primitiveRamps = {
+  red: {
+    50: "#FFF4F4",
+    100: "#FFE3E5",
+    200: "#FFC2C5",
+    300: "#FF9A9D",
+    400: "#F77175",
+    500: "#E05254",
+    600: "#D14343",
+    // pin
+    700: "#A4221C",
+    800: "#7E1002",
+    900: "#5A0900",
+    950: "#3D0400"
+  },
+  orange: {
+    50: "#FFF5ED",
+    100: "#FFE6D4",
+    200: "#FFC7A2",
+    300: "#FFA063",
+    400: "#FF7900",
+    // pin
+    500: "#DA5F00",
+    600: "#B94A00",
+    700: "#983804",
+    800: "#6F290F",
+    900: "#4E1C0C",
+    950: "#331107"
+  },
+  amber: {
+    50: "#FFF7DD",
+    100: "#FFEAA9",
+    200: "#FFD352",
+    300: "#F9B415",
+    // pin
+    400: "#E08C00",
+    500: "#C27400",
+    600: "#A45E00",
+    700: "#814D14",
+    800: "#5B3A1A",
+    900: "#442503",
+    950: "#301500"
+  },
+  green: {
+    50: "#E3FFEE",
+    100: "#B5FFD2",
+    200: "#58F69E",
+    300: "#2ED573",
+    // pin
+    400: "#21C05D",
+    500: "#22A444",
+    600: "#298732",
+    700: "#2B6B25",
+    800: "#264D1C",
+    900: "#1B3515",
+    950: "#11220D"
+  },
+  cyan: {
+    50: "#E6FBFF",
+    100: "#C2F6FF",
+    200: "#62EAFF",
+    300: "#22D3EE",
+    // pin
+    400: "#01B5D1",
+    500: "#2697B7",
+    600: "#307B9B",
+    700: "#2A617F",
+    800: "#22465F",
+    900: "#0B3149",
+    950: "#001F36"
+  },
+  blue: {
+    50: "#EFF8FF",
+    100: "#D9EFFF",
+    200: "#ACDBFF",
+    300: "#78C2FF",
+    400: "#3CA8FF",
+    500: "#2196F3",
+    // pin
+    600: "#1072CB",
+    700: "#135AA8",
+    800: "#14407E",
+    900: "#112C5A",
+    950: "#091B3C"
+  },
+  magenta: {
+    50: "#FFF3F9",
+    100: "#FFE2F1",
+    200: "#FFBDE2",
+    300: "#FF8FD5",
+    400: "#ED69C3",
+    500: "#D548AF",
+    600: "#BA2996",
+    700: "#9C0D7A",
+    // pin
+    800: "#77005A",
+    900: "#56003F",
+    950: "#3B0029"
+  }
+};
+var categoricalPalette = {
+  default: [
+    primitiveRamps.blue[500],
+    primitiveRamps.magenta[500],
+    primitiveRamps.red[500],
+    primitiveRamps.orange[400],
+    primitiveRamps.green[300],
+    primitiveRamps.cyan[300],
+    primitiveRamps.amber[600]
+    // extended (7th) — pair with a legend
+  ],
+  dark: [
+    primitiveRamps.blue[600],
+    primitiveRamps.magenta[600],
+    primitiveRamps.red[500],
+    primitiveRamps.orange[600],
+    primitiveRamps.green[800],
+    primitiveRamps.cyan[800],
+    primitiveRamps.amber[500]
+    // extended (7th) — pair with a legend
+  ]
+};
+var CATEGORICAL_CVD_SAFE_MAX = 6;
+function getCategoricalColor(index, variant = "default") {
+  const palette = categoricalPalette[variant];
+  index = Math.max(0, Math.floor(index));
+  return palette[index % palette.length];
+}
+var divergingScale = [
+  primitiveRamps.blue[500],
+  // under
+  primitiveRamps.cyan[300],
+  // maintenance
+  primitiveRamps.green[200],
+  // optimal (light center)
+  primitiveRamps.amber[300],
+  // approaching
+  primitiveRamps.red[600]
+  // over
+];
+var sequentialEffort = [
+  primitiveRamps.green[300],
+  primitiveRamps.amber[200],
+  primitiveRamps.amber[300],
+  primitiveRamps.orange[400],
+  primitiveRamps.red[600],
+  primitiveRamps.red[700]
+];
+function bestTextColor(hex) {
+  const [r, g, b] = [0, 2, 4].map((i) => {
+    const c = parseInt(hex.replace("#", "").slice(i, i + 2), 16) / 255;
+    return c >= 0.04045 ? ((c + 0.055) / 1.055) ** 2.4 : c / 12.92;
+  });
+  const l = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  return (l + 0.05) / 0.05 >= 1.05 / (l + 0.05) ? "#000000" : "#FFFFFF";
+}
+var discreteRainbow = [
+  "#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"
+];
+var discreteRainbowPalettes = [
+  [10],
+  [10, 26],
+  [10, 18, 26],
+  [10, 15, 18, 26],
+  [10, 14, 15, 18, 26],
+  [10, 14, 15, 17, 18, 26],
+  [9, 10, 14, 15, 17, 18, 26],
+  [9, 10, 14, 15, 17, 18, 23, 26],
+  [9, 10, 14, 15, 17, 18, 23, 26, 28],
+  [9, 10, 14, 15, 17, 18, 21, 24, 26, 28],
+  [9, 10, 12, 14, 15, 17, 18, 21, 24, 26, 28],
+  [3, 6, 9, 10, 12, 14, 15, 17, 18, 21, 24, 26],
+  [3, 6, 9, 10, 12, 14, 15, 16, 17, 18, 21, 24, 26],
+  [3, 6, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26],
+  [3, 6, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28],
+  [3, 5, 7, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28],
+  [3, 5, 7, 8, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28],
+  [3, 5, 7, 8, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26, 27, 28],
+  [2, 4, 5, 7, 8, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26, 27, 28],
+  [2, 4, 5, 7, 8, 9, 10, 11, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26, 27, 28],
+  [2, 4, 5, 7, 8, 9, 10, 11, 13, 14, 15, 16, 17, 18, 19, 21, 23, 25, 26, 27, 28],
+  [2, 4, 5, 7, 8, 9, 10, 11, 13, 14, 15, 16, 17, 18, 19, 21, 23, 25, 26, 27, 28, 29],
+  [1, 2, 4, 5, 7, 8, 9, 10, 11, 13, 14, 15, 16, 17, 18, 19, 21, 23, 25, 26, 27, 28, 29]
+];
+function getDiscreteRainbowColor(index, size) {
+  index = Math.max(0, index);
+  size = Math.min(Math.max(1, size), discreteRainbowPalettes.length);
+  const palette = discreteRainbowPalettes[size - 1];
+  if (index >= palette.length) index = index % palette.length;
+  return discreteRainbow[palette[index] - 1];
+}
+var primitiveTypography = {
+  fontFamilies: {
+    sans: ["Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", "sans-serif"],
+    body: ["Nunito Sans", "sans-serif"],
+    heading: ["Space Grotesk", "sans-serif"],
+    mono: ["SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", "monospace"]
+  },
+  fontSizes: {
+    xs: "0.75rem",
+    // 12px
+    sm: "0.875rem",
+    // 14px
+    base: "1rem",
+    // 16px
+    lg: "1.125rem",
+    // 18px
+    xl: "1.5rem",
+    // 24px
+    "2xl": "2rem",
+    // 32px
+    "3xl": "2.25rem",
+    // 36px
+    "4xl": "3rem",
+    // 48px
+    "5xl": "3.5rem"
+    // 56px
+  },
+  fontWeights: {
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  },
+  lineHeights: {
+    none: 1,
+    tight: 1.375,
+    snug: 1.5,
+    normal: 1.57,
+    relaxed: 1.66,
+    loose: 1.75
+  },
+  letterSpacing: {
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0em",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.5px"
+  }
+};
+var primitiveSpacing = {
+  0: "0",
+  px: "1px",
+  0.5: "0.125rem",
+  // 2px
+  1: "0.25rem",
+  // 4px
+  1.5: "0.375rem",
+  // 6px
+  2: "0.5rem",
+  // 8px
+  2.5: "0.625rem",
+  // 10px
+  3: "0.75rem",
+  // 12px
+  3.5: "0.875rem",
+  // 14px
+  4: "1rem",
+  // 16px
+  5: "1.25rem",
+  // 20px
+  6: "1.5rem",
+  // 24px
+  7: "1.75rem",
+  // 28px
+  8: "2rem",
+  // 32px
+  9: "2.25rem",
+  // 36px
+  10: "2.5rem",
+  // 40px
+  11: "2.75rem",
+  // 44px
+  12: "3rem",
+  // 48px
+  14: "3.5rem",
+  // 56px
+  16: "4rem",
+  // 64px
+  20: "5rem",
+  // 80px
+  24: "6rem",
+  // 96px
+  28: "7rem",
+  // 112px
+  32: "8rem"
+  // 128px
+};
+var primitiveBorderRadius = {
+  none: "0",
+  sm: "4px",
+  DEFAULT: "8px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  "2xl": "24px",
+  full: "9999px"
+};
+var primitiveShadows = {
+  none: "none",
+  sm: "0px 1px 2px rgba(100, 116, 139, 0.12)",
+  DEFAULT: "0px 1px 3px rgba(100, 116, 139, 0.12), 0px 1px 2px rgba(100, 116, 139, 0.24)",
+  md: "0px 4px 6px rgba(100, 116, 139, 0.12)",
+  lg: "0px 10px 15px rgba(100, 116, 139, 0.12)",
+  xl: "0px 20px 25px rgba(100, 116, 139, 0.12)",
+  "2xl": "0px 25px 50px rgba(100, 116, 139, 0.25)",
+  inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
+};
+var primitiveBreakpoints = {
+  xs: 0,
+  sm: 600,
+  md: 1e3,
+  lg: 1200,
+  xl: 1920
+};
+var primitiveZIndex = {
+  hide: -1,
+  auto: "auto",
+  base: 0,
+  docked: 10,
+  dropdown: 1e3,
+  sticky: 1100,
+  drawer: 1100,
+  banner: 1200,
+  appBar: 1200,
+  overlay: 1300,
+  modal: 1400,
+  popover: 1500,
+  skipLink: 1600,
+  toast: 1700,
+  tooltip: 1800
+};
+
+// src/theme/tokens/semantic.ts
+var semanticColorsLight = {
+  // Brand colors (brand-*)
+  "brand-primary": primitiveRamps.orange[400],
+  "brand-primary-light": primitiveRamps.orange[300],
+  "brand-primary-dark": primitiveRamps.orange[500],
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
+  "brand-primary-hover": primitiveRamps.orange[500],
+  "brand-primary-active": primitiveRamps.orange[600],
+  "brand-secondary": primitiveRamps.cyan[600],
+  "brand-secondary-light": primitiveRamps.cyan[500],
+  "brand-secondary-dark": primitiveRamps.cyan[700],
+  "brand-secondary-subtle": "rgba(48, 123, 155, 0.08)",
+  "brand-secondary-hover": primitiveRamps.cyan[700],
+  "brand-secondary-active": primitiveRamps.cyan[800],
+  // Text on brand backgrounds (on-*)
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors (status-*)
+  "status-success": primitiveRamps.green[300],
+  "status-success-light": primitiveRamps.green[200],
+  "status-success-dark": primitiveRamps.green[600],
+  "status-success-subtle": primitiveRamps.green[50],
+  "status-error": primitiveRamps.red[600],
+  "status-error-light": primitiveRamps.red[500],
+  "status-error-dark": primitiveRamps.red[700],
+  "status-error-subtle": primitiveRamps.red[50],
+  "status-error-vivid": primitiveColors.redVivid[500],
+  // vivid alert red
+  "status-error-vivid-light": primitiveColors.redVivid[400],
+  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-warning": primitiveRamps.amber[300],
+  "status-warning-light": primitiveRamps.amber[200],
+  "status-warning-dark": primitiveRamps.amber[500],
+  "status-warning-subtle": primitiveRamps.amber[50],
+  "status-info": primitiveRamps.blue[500],
+  "status-info-light": primitiveRamps.blue[300],
+  "status-info-dark": primitiveRamps.blue[600],
+  "status-info-subtle": primitiveRamps.blue[50],
+  // Text on status backgrounds (on-status-*)
+  "on-status-success": primitiveColors.white,
+  "on-status-error": primitiveColors.white,
+  "on-status-warning": primitiveColors.white,
+  "on-status-info": primitiveColors.white,
+  // Result/outcome indicators (result-*)
+  "result-improve": "#4caf50",
+  // Green - positive outcome
+  "result-improve-light": "rgba(76, 175, 80, 0.12)",
+  "result-improve-dark": "#248a24",
+  "result-degrade": "#ef5350",
+  // Red - negative outcome
+  "result-degrade-light": "rgba(239, 83, 80, 0.12)",
+  "result-degrade-dark": "#b30000",
+  "result-inconclusive": "#9E9A97",
+  // Gray - no clear result
+  "result-inconclusive-light": "rgba(158, 154, 151, 0.12)",
+  "result-neutral": primitiveColors.neutral[500],
+  // Neutral baseline
+  // Text on result backgrounds (on-result-*)
+  "on-result-improve": primitiveColors.white,
+  "on-result-degrade": primitiveColors.white,
+  "on-result-inconclusive": primitiveColors.white,
+  // Data visualization colors (data-*)
+  // First 10 colors from discrete rainbow optimized for charts
+  "data-1": discreteRainbow[9],
+  // Blue
+  "data-2": discreteRainbow[14],
+  // Green
+  "data-3": discreteRainbow[17],
+  // Yellow
+  "data-4": discreteRainbow[25],
+  // Red
+  "data-5": discreteRainbow[8],
+  // Purple
+  "data-6": discreteRainbow[20],
+  // Orange
+  "data-7": discreteRainbow[13],
+  // Light Blue
+  "data-8": discreteRainbow[15],
+  // Light Green
+  "data-9": discreteRainbow[3],
+  // Lavender
+  "data-10": discreteRainbow[22],
+  // Dark Orange
+  // Text colors (text-*)
+  "text-primary": "#121828",
+  "text-secondary": "#65748B",
+  "text-tertiary": primitiveColors.neutral[400],
+  "text-disabled": "rgba(55, 65, 81, 0.48)",
+  "text-inverse": primitiveColors.white,
+  "text-link": primitiveColors.blue[600],
+  "text-link-hover": primitiveColors.blue[700],
+  // Surface colors (surface-*) - for elevated containers
+  "surface-base": primitiveColors.white,
+  "surface-elevated": primitiveColors.neutral[50],
+  // slightly off-white for elevated cards
+  "surface-raised": primitiveColors.neutral[100],
+  // light gray for raised cards
+  "surface-overlay": primitiveColors.white,
+  "surface-input": primitiveColors.neutral[50],
+  // Input field background (filled variant)
+  // Background colors (background-*)
+  "background-base": "#EBEBEB",
+  "background-default": primitiveColors.white,
+  "background-subtle": primitiveColors.neutral[50],
+  // Border colors (border-*)
+  "border-default": "#E8E9EB",
+  "border-subtle": primitiveColors.neutral[100],
+  "border-strong": primitiveColors.neutral[300],
+  "border-prominent": primitiveColors.neutral[400],
+  // high-visibility divider
+  "border-focus": primitiveColors.blue[600],
+  "border-input": primitiveColors.neutral[300],
+  // Input field border
+  "border-input-hover": primitiveColors.neutral[400],
+  // Input field border on hover
+  "border-input-focus": primitiveColors.blue[600],
+  // Input field border on focus
+  "border-input-error": primitiveColors.red[600],
+  // Input field border on error
+  // Interactive states (interactive-*)
+  "interactive-hover": "rgba(55, 65, 81, 0.04)",
+  "interactive-focus": "rgba(55, 65, 81, 0.12)",
+  "interactive-active": "rgba(55, 65, 81, 0.16)",
+  "interactive-selected": "rgba(55, 65, 81, 0.08)",
+  "interactive-disabled": "rgba(55, 65, 81, 0.12)",
+  "interactive-disabled-text": "rgba(55, 65, 81, 0.26)",
+  // Divider
+  "divider": "#E8E9EB",
+  // Avatar default
+  "avatar-background": primitiveColors.neutral[500],
+  "avatar-text": primitiveColors.white
+};
+var semanticColorsDark = {
+  // Brand colors stay the same in dark mode
+  "brand-primary": primitiveRamps.orange[400],
+  "brand-primary-light": primitiveRamps.orange[300],
+  "brand-primary-dark": primitiveRamps.orange[500],
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
+  "brand-primary-hover": primitiveRamps.orange[300],
+  "brand-primary-active": primitiveRamps.orange[200],
+  "brand-secondary": primitiveRamps.cyan[600],
+  "brand-secondary-light": primitiveRamps.cyan[500],
+  "brand-secondary-dark": primitiveRamps.cyan[700],
+  "brand-secondary-subtle": "rgba(48, 123, 155, 0.12)",
+  "brand-secondary-hover": primitiveRamps.cyan[500],
+  "brand-secondary-active": primitiveRamps.cyan[400],
+  // Text on brand backgrounds
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors
+  "status-success": primitiveRamps.green[300],
+  "status-success-light": primitiveRamps.green[200],
+  "status-success-dark": primitiveRamps.green[600],
+  "status-success-subtle": "rgba(46, 213, 115, 0.12)",
+  "status-error": primitiveRamps.red[600],
+  "status-error-light": primitiveRamps.red[500],
+  "status-error-dark": primitiveRamps.red[700],
+  "status-error-subtle": "rgba(209, 67, 67, 0.12)",
+  "status-error-vivid": primitiveColors.redVivid[500],
+  "status-error-vivid-light": primitiveColors.redVivid[400],
+  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-warning": primitiveRamps.amber[300],
+  "status-warning-light": primitiveRamps.amber[200],
+  "status-warning-dark": primitiveRamps.amber[500],
+  "status-warning-subtle": "rgba(249, 180, 21, 0.12)",
+  "status-info": primitiveRamps.blue[500],
+  "status-info-light": primitiveRamps.blue[300],
+  "status-info-dark": primitiveRamps.blue[600],
+  "status-info-subtle": "rgba(33, 150, 243, 0.12)",
+  // Text on status backgrounds
+  "on-status-success": primitiveColors.white,
+  "on-status-error": primitiveColors.white,
+  "on-status-warning": primitiveColors.white,
+  "on-status-info": primitiveColors.white,
+  // Result/outcome indicators (result-*)
+  "result-improve": "#4caf50",
+  "result-improve-light": "rgba(76, 175, 80, 0.16)",
+  "result-improve-dark": "#248a24",
+  "result-degrade": "#ef5350",
+  "result-degrade-light": "rgba(239, 83, 80, 0.16)",
+  "result-degrade-dark": "#b30000",
+  "result-inconclusive": "#9E9A97",
+  "result-inconclusive-light": "rgba(158, 154, 151, 0.16)",
+  "result-neutral": primitiveColors.neutral[400],
+  // Text on result backgrounds
+  "on-result-improve": primitiveColors.white,
+  "on-result-degrade": primitiveColors.white,
+  "on-result-inconclusive": primitiveColors.white,
+  // Data visualization colors (same in dark mode for consistency)
+  "data-1": discreteRainbow[9],
+  "data-2": discreteRainbow[14],
+  "data-3": discreteRainbow[17],
+  "data-4": discreteRainbow[25],
+  "data-5": discreteRainbow[8],
+  "data-6": discreteRainbow[20],
+  "data-7": discreteRainbow[13],
+  "data-8": discreteRainbow[15],
+  "data-9": discreteRainbow[3],
+  "data-10": discreteRainbow[22],
+  // Text colors - inverted for dark mode
+  "text-primary": primitiveColors.neutral[100],
+  "text-secondary": primitiveColors.neutral[400],
+  "text-tertiary": primitiveColors.neutral[500],
+  "text-disabled": "rgba(255, 255, 255, 0.38)",
+  "text-inverse": primitiveColors.neutral[900],
+  "text-link": "#828DF8",
+  "text-link-hover": primitiveColors.blue[400],
+  // Surface colors - dark backgrounds
+  "surface-base": primitiveColors.charcoal[700],
+  // main surface
+  "surface-elevated": primitiveColors.charcoal[600],
+  // elevated surface
+  "surface-raised": primitiveColors.charcoal[500],
+  // raised surface
+  "surface-overlay": primitiveColors.charcoal[600],
+  // overlay surface
+  "surface-input": primitiveColors.charcoal[600],
+  // input surface
+  // Background colors
+  "background-base": primitiveColors.charcoal[900],
+  // darkest charcoal
+  "background-default": primitiveColors.charcoal[700],
+  // main background
+  "background-subtle": primitiveColors.charcoal[500],
+  // subtle background
+  // Border colors
+  "border-default": primitiveColors.charcoal[400],
+  // default border
+  "border-subtle": primitiveColors.charcoal[500],
+  // subtle border
+  "border-strong": primitiveColors.charcoal[300],
+  // strong border
+  "border-prominent": primitiveColors.charcoal[200],
+  // high-visibility divider
+  "border-focus": "#828DF8",
+  "border-input": primitiveColors.neutral[600],
+  "border-input-hover": primitiveColors.neutral[500],
+  "border-input-focus": "#828DF8",
+  "border-input-error": primitiveColors.red[500],
+  // Interactive states
+  "interactive-hover": "rgba(255, 255, 255, 0.04)",
+  "interactive-focus": "rgba(255, 255, 255, 0.12)",
+  "interactive-active": "rgba(255, 255, 255, 0.16)",
+  "interactive-selected": "rgba(255, 255, 255, 0.08)",
+  "interactive-disabled": "rgba(255, 255, 255, 0.12)",
+  "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
+  // Divider
+  "divider": primitiveColors.charcoal[400],
+  // divider color
+  // Avatar default
+  "avatar-background": primitiveColors.neutral[600],
+  "avatar-text": primitiveColors.white
+};
+var semanticTypography = {
+  // Headings (Space Grotesk)
+  h1: {
+    fontFamily: "heading",
+    fontSize: "3.5rem",
+    fontWeight: 700,
+    lineHeight: 1.375
+  },
+  h2: {
+    fontFamily: "heading",
+    fontSize: "3rem",
+    fontWeight: 700,
+    lineHeight: 1.375
+  },
+  h3: {
+    fontFamily: "heading",
+    fontSize: "2.25rem",
+    fontWeight: 700,
+    lineHeight: 1.375
+  },
+  h4: {
+    fontFamily: "heading",
+    fontSize: "2rem",
+    fontWeight: 700,
+    lineHeight: 1.375
+  },
+  h5: {
+    fontFamily: "heading",
+    fontSize: "1.5rem",
+    fontWeight: 600,
+    lineHeight: 1.375
+  },
+  h6: {
+    fontFamily: "heading",
+    fontSize: "1.125rem",
+    fontWeight: 600,
+    lineHeight: 1.375
+  },
+  // Body text (Nunito Sans)
+  body1: {
+    fontFamily: "body",
+    fontSize: "1rem",
+    fontWeight: 400,
+    lineHeight: 1.5
+  },
+  body2: {
+    fontFamily: "body",
+    fontSize: "0.875rem",
+    fontWeight: 400,
+    lineHeight: 1.57
+  },
+  subtitle1: {
+    fontFamily: "body",
+    fontSize: "1rem",
+    fontWeight: 500,
+    lineHeight: 1.75
+  },
+  subtitle2: {
+    fontFamily: "body",
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    lineHeight: 1.57
+  },
+  caption: {
+    fontFamily: "body",
+    fontSize: "0.75rem",
+    fontWeight: 400,
+    lineHeight: 1.66
+  },
+  overline: {
+    fontFamily: "body",
+    fontSize: "0.75rem",
+    fontWeight: 600,
+    lineHeight: 2.5,
+    letterSpacing: "0.5px",
+    textTransform: "uppercase"
+  },
+  button: {
+    fontFamily: "sans",
+    fontSize: "0.875rem",
+    fontWeight: 600,
+    lineHeight: 1.75
+  }
+};
+var buttonSizes = {
+  sm: {
+    paddingX: "16px",
+    paddingY: "6px",
+    fontSize: "0.875rem"
+  },
+  md: {
+    paddingX: "20px",
+    paddingY: "8px",
+    fontSize: "0.875rem"
+  },
+  lg: {
+    paddingX: "24px",
+    paddingY: "11px",
+    fontSize: "1rem"
+  }
+};
+function getSemanticColors(mode) {
+  return mode === "dark" ? semanticColorsDark : semanticColorsLight;
+}
+
+// src/theme/config.ts
+var themeIndependentCSSVars = {
+  // RGB decomposed values for glow shadows
+  "--color-brand-primary-rgb": "255, 121, 0",
+  "--color-brand-secondary-rgb": "48, 123, 155",
+  "--color-status-success-rgb": "46, 213, 115",
+  "--color-status-error-rgb": "209, 67, 67",
+  "--color-status-error-vivid-rgb": "255, 71, 87",
+  "--color-status-warning-rgb": "249, 180, 21",
+  "--color-status-info-rgb": "33, 150, 243",
+  "--color-background-base-rgb": "16, 16, 16",
+  // Font families
+  "--font-family-sans": "'Inter'",
+  "--font-family-body": "'Nunito Sans'",
+  "--font-family-heading": "'Space Grotesk'",
+  "--font-family-mono": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
+  // Animation tokens
+  "--ease-out": "cubic-bezier(0.22, 1, 0.36, 1)",
+  "--ease-in-out": "cubic-bezier(0.65, 0, 0.35, 1)",
+  "--ease-spring": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+  "--duration-fast": "150ms",
+  "--duration-normal": "250ms",
+  "--duration-slow": "400ms"
+};
+var lightThemeCSSVars = {
+  "--color-brand-primary": semanticColorsLight["brand-primary"],
+  "--color-brand-primary-light": semanticColorsLight["brand-primary-light"],
+  "--color-brand-primary-dark": semanticColorsLight["brand-primary-dark"],
+  "--color-brand-primary-subtle": semanticColorsLight["brand-primary-subtle"],
+  "--color-brand-secondary": semanticColorsLight["brand-secondary"],
+  "--color-brand-secondary-light": semanticColorsLight["brand-secondary-light"],
+  "--color-brand-secondary-dark": semanticColorsLight["brand-secondary-dark"],
+  "--color-brand-secondary-subtle": semanticColorsLight["brand-secondary-subtle"],
+  "--color-on-brand-primary": semanticColorsLight["on-brand-primary"],
+  "--color-on-brand-secondary": semanticColorsLight["on-brand-secondary"],
+  "--color-status-success": semanticColorsLight["status-success"],
+  "--color-status-success-subtle": semanticColorsLight["status-success-subtle"],
+  "--color-status-error": semanticColorsLight["status-error"],
+  "--color-status-error-subtle": semanticColorsLight["status-error-subtle"],
+  "--color-status-warning": semanticColorsLight["status-warning"],
+  "--color-status-warning-subtle": semanticColorsLight["status-warning-subtle"],
+  "--color-status-info": semanticColorsLight["status-info"],
+  "--color-status-info-subtle": semanticColorsLight["status-info-subtle"],
+  "--color-status-error-vivid": semanticColorsLight["status-error-vivid"],
+  "--color-status-error-vivid-light": semanticColorsLight["status-error-vivid-light"],
+  "--color-status-error-vivid-dark": semanticColorsLight["status-error-vivid-dark"],
+  "--color-status-error-vivid-subtle": semanticColorsLight["status-error-vivid-subtle"],
+  "--color-text-primary": semanticColorsLight["text-primary"],
+  "--color-text-secondary": semanticColorsLight["text-secondary"],
+  "--color-text-tertiary": semanticColorsLight["text-tertiary"],
+  "--color-text-disabled": semanticColorsLight["text-disabled"],
+  "--color-text-inverse": semanticColorsLight["text-inverse"],
+  "--color-text-link": semanticColorsLight["text-link"],
+  "--color-surface-base": semanticColorsLight["surface-base"],
+  "--color-surface-elevated": semanticColorsLight["surface-elevated"],
+  "--color-surface-raised": semanticColorsLight["surface-raised"],
+  "--color-background-base": semanticColorsLight["background-base"],
+  "--color-background-default": semanticColorsLight["background-default"],
+  "--color-background-subtle": semanticColorsLight["background-subtle"],
+  "--color-border-default": semanticColorsLight["border-default"],
+  "--color-border-subtle": semanticColorsLight["border-subtle"],
+  "--color-border-strong": semanticColorsLight["border-strong"],
+  "--color-border-prominent": semanticColorsLight["border-prominent"],
+  "--color-border-focus": semanticColorsLight["border-focus"],
+  "--color-interactive-hover": semanticColorsLight["interactive-hover"],
+  "--color-interactive-focus": semanticColorsLight["interactive-focus"],
+  "--color-interactive-active": semanticColorsLight["interactive-active"],
+  "--color-interactive-selected": semanticColorsLight["interactive-selected"],
+  "--color-interactive-disabled": semanticColorsLight["interactive-disabled"],
+  "--color-divider": semanticColorsLight["divider"],
+  "--color-brand-primary-hover": semanticColorsLight["brand-primary-hover"],
+  "--color-brand-primary-active": semanticColorsLight["brand-primary-active"],
+  "--color-brand-secondary-hover": semanticColorsLight["brand-secondary-hover"],
+  "--color-brand-secondary-active": semanticColorsLight["brand-secondary-active"],
+  "--color-status-success-light": semanticColorsLight["status-success-light"],
+  "--color-status-success-dark": semanticColorsLight["status-success-dark"],
+  "--color-status-error-light": semanticColorsLight["status-error-light"],
+  "--color-status-error-dark": semanticColorsLight["status-error-dark"],
+  "--color-status-warning-light": semanticColorsLight["status-warning-light"],
+  "--color-status-warning-dark": semanticColorsLight["status-warning-dark"],
+  "--color-status-info-light": semanticColorsLight["status-info-light"],
+  "--color-status-info-dark": semanticColorsLight["status-info-dark"],
+  "--color-on-status-success": semanticColorsLight["on-status-success"],
+  "--color-on-status-error": semanticColorsLight["on-status-error"],
+  "--color-on-status-warning": semanticColorsLight["on-status-warning"],
+  "--color-on-status-info": semanticColorsLight["on-status-info"],
+  "--color-result-improve": semanticColorsLight["result-improve"],
+  "--color-result-improve-light": semanticColorsLight["result-improve-light"],
+  "--color-result-improve-dark": semanticColorsLight["result-improve-dark"],
+  "--color-result-degrade": semanticColorsLight["result-degrade"],
+  "--color-result-degrade-light": semanticColorsLight["result-degrade-light"],
+  "--color-result-degrade-dark": semanticColorsLight["result-degrade-dark"],
+  "--color-result-inconclusive": semanticColorsLight["result-inconclusive"],
+  "--color-result-inconclusive-light": semanticColorsLight["result-inconclusive-light"],
+  "--color-result-neutral": semanticColorsLight["result-neutral"],
+  "--color-on-result-improve": semanticColorsLight["on-result-improve"],
+  "--color-on-result-degrade": semanticColorsLight["on-result-degrade"],
+  "--color-on-result-inconclusive": semanticColorsLight["on-result-inconclusive"],
+  "--color-data-1": semanticColorsLight["data-1"],
+  "--color-data-2": semanticColorsLight["data-2"],
+  "--color-data-3": semanticColorsLight["data-3"],
+  "--color-data-4": semanticColorsLight["data-4"],
+  "--color-data-5": semanticColorsLight["data-5"],
+  "--color-data-6": semanticColorsLight["data-6"],
+  "--color-data-7": semanticColorsLight["data-7"],
+  "--color-data-8": semanticColorsLight["data-8"],
+  "--color-data-9": semanticColorsLight["data-9"],
+  "--color-data-10": semanticColorsLight["data-10"],
+  "--color-text-link-hover": semanticColorsLight["text-link-hover"],
+  "--color-surface-overlay": semanticColorsLight["surface-overlay"],
+  "--color-surface-input": semanticColorsLight["surface-input"],
+  "--color-border-input": semanticColorsLight["border-input"],
+  "--color-border-input-hover": semanticColorsLight["border-input-hover"],
+  "--color-border-input-focus": semanticColorsLight["border-input-focus"],
+  "--color-border-input-error": semanticColorsLight["border-input-error"],
+  "--color-interactive-disabled-text": semanticColorsLight["interactive-disabled-text"],
+  "--color-avatar-background": semanticColorsLight["avatar-background"],
+  "--color-avatar-text": semanticColorsLight["avatar-text"],
+  ...themeIndependentCSSVars
+};
+var darkThemeCSSVars = {
+  "--color-brand-primary": semanticColorsDark["brand-primary"],
+  "--color-brand-primary-light": semanticColorsDark["brand-primary-light"],
+  "--color-brand-primary-dark": semanticColorsDark["brand-primary-dark"],
+  "--color-brand-primary-subtle": semanticColorsDark["brand-primary-subtle"],
+  "--color-brand-secondary": semanticColorsDark["brand-secondary"],
+  "--color-brand-secondary-light": semanticColorsDark["brand-secondary-light"],
+  "--color-brand-secondary-dark": semanticColorsDark["brand-secondary-dark"],
+  "--color-brand-secondary-subtle": semanticColorsDark["brand-secondary-subtle"],
+  "--color-on-brand-primary": semanticColorsDark["on-brand-primary"],
+  "--color-on-brand-secondary": semanticColorsDark["on-brand-secondary"],
+  "--color-status-success": semanticColorsDark["status-success"],
+  "--color-status-success-subtle": semanticColorsDark["status-success-subtle"],
+  "--color-status-error": semanticColorsDark["status-error"],
+  "--color-status-error-subtle": semanticColorsDark["status-error-subtle"],
+  "--color-status-warning": semanticColorsDark["status-warning"],
+  "--color-status-warning-subtle": semanticColorsDark["status-warning-subtle"],
+  "--color-status-info": semanticColorsDark["status-info"],
+  "--color-status-info-subtle": semanticColorsDark["status-info-subtle"],
+  "--color-status-error-vivid": semanticColorsDark["status-error-vivid"],
+  "--color-status-error-vivid-light": semanticColorsDark["status-error-vivid-light"],
+  "--color-status-error-vivid-dark": semanticColorsDark["status-error-vivid-dark"],
+  "--color-status-error-vivid-subtle": semanticColorsDark["status-error-vivid-subtle"],
+  "--color-text-primary": semanticColorsDark["text-primary"],
+  "--color-text-secondary": semanticColorsDark["text-secondary"],
+  "--color-text-tertiary": semanticColorsDark["text-tertiary"],
+  "--color-text-disabled": semanticColorsDark["text-disabled"],
+  "--color-text-inverse": semanticColorsDark["text-inverse"],
+  "--color-text-link": semanticColorsDark["text-link"],
+  "--color-surface-base": semanticColorsDark["surface-base"],
+  "--color-surface-elevated": semanticColorsDark["surface-elevated"],
+  "--color-surface-raised": semanticColorsDark["surface-raised"],
+  "--color-background-base": semanticColorsDark["background-base"],
+  "--color-background-default": semanticColorsDark["background-default"],
+  "--color-background-subtle": semanticColorsDark["background-subtle"],
+  "--color-border-default": semanticColorsDark["border-default"],
+  "--color-border-subtle": semanticColorsDark["border-subtle"],
+  "--color-border-strong": semanticColorsDark["border-strong"],
+  "--color-border-prominent": semanticColorsDark["border-prominent"],
+  "--color-border-focus": semanticColorsDark["border-focus"],
+  "--color-interactive-hover": semanticColorsDark["interactive-hover"],
+  "--color-interactive-focus": semanticColorsDark["interactive-focus"],
+  "--color-interactive-active": semanticColorsDark["interactive-active"],
+  "--color-interactive-selected": semanticColorsDark["interactive-selected"],
+  "--color-interactive-disabled": semanticColorsDark["interactive-disabled"],
+  "--color-divider": semanticColorsDark["divider"],
+  "--color-brand-primary-hover": semanticColorsDark["brand-primary-hover"],
+  "--color-brand-primary-active": semanticColorsDark["brand-primary-active"],
+  "--color-brand-secondary-hover": semanticColorsDark["brand-secondary-hover"],
+  "--color-brand-secondary-active": semanticColorsDark["brand-secondary-active"],
+  "--color-status-success-light": semanticColorsDark["status-success-light"],
+  "--color-status-success-dark": semanticColorsDark["status-success-dark"],
+  "--color-status-error-light": semanticColorsDark["status-error-light"],
+  "--color-status-error-dark": semanticColorsDark["status-error-dark"],
+  "--color-status-warning-light": semanticColorsDark["status-warning-light"],
+  "--color-status-warning-dark": semanticColorsDark["status-warning-dark"],
+  "--color-status-info-light": semanticColorsDark["status-info-light"],
+  "--color-status-info-dark": semanticColorsDark["status-info-dark"],
+  "--color-on-status-success": semanticColorsDark["on-status-success"],
+  "--color-on-status-error": semanticColorsDark["on-status-error"],
+  "--color-on-status-warning": semanticColorsDark["on-status-warning"],
+  "--color-on-status-info": semanticColorsDark["on-status-info"],
+  "--color-result-improve": semanticColorsDark["result-improve"],
+  "--color-result-improve-light": semanticColorsDark["result-improve-light"],
+  "--color-result-improve-dark": semanticColorsDark["result-improve-dark"],
+  "--color-result-degrade": semanticColorsDark["result-degrade"],
+  "--color-result-degrade-light": semanticColorsDark["result-degrade-light"],
+  "--color-result-degrade-dark": semanticColorsDark["result-degrade-dark"],
+  "--color-result-inconclusive": semanticColorsDark["result-inconclusive"],
+  "--color-result-inconclusive-light": semanticColorsDark["result-inconclusive-light"],
+  "--color-result-neutral": semanticColorsDark["result-neutral"],
+  "--color-on-result-improve": semanticColorsDark["on-result-improve"],
+  "--color-on-result-degrade": semanticColorsDark["on-result-degrade"],
+  "--color-on-result-inconclusive": semanticColorsDark["on-result-inconclusive"],
+  "--color-data-1": semanticColorsDark["data-1"],
+  "--color-data-2": semanticColorsDark["data-2"],
+  "--color-data-3": semanticColorsDark["data-3"],
+  "--color-data-4": semanticColorsDark["data-4"],
+  "--color-data-5": semanticColorsDark["data-5"],
+  "--color-data-6": semanticColorsDark["data-6"],
+  "--color-data-7": semanticColorsDark["data-7"],
+  "--color-data-8": semanticColorsDark["data-8"],
+  "--color-data-9": semanticColorsDark["data-9"],
+  "--color-data-10": semanticColorsDark["data-10"],
+  "--color-text-link-hover": semanticColorsDark["text-link-hover"],
+  "--color-surface-overlay": semanticColorsDark["surface-overlay"],
+  "--color-surface-input": semanticColorsDark["surface-input"],
+  "--color-border-input": semanticColorsDark["border-input"],
+  "--color-border-input-hover": semanticColorsDark["border-input-hover"],
+  "--color-border-input-focus": semanticColorsDark["border-input-focus"],
+  "--color-border-input-error": semanticColorsDark["border-input-error"],
+  "--color-interactive-disabled-text": semanticColorsDark["interactive-disabled-text"],
+  "--color-avatar-background": semanticColorsDark["avatar-background"],
+  "--color-avatar-text": semanticColorsDark["avatar-text"],
+  ...themeIndependentCSSVars
+};
+function getThemeCSSVars(mode) {
+  return mode === "dark" ? darkThemeCSSVars : lightThemeCSSVars;
+}
+var gluestackConfig = {
+  tokens: {
+    colors: {
+      // Map to our semantic colors via CSS vars
+      primary500: "var(--color-brand-primary)",
+      primary600: "var(--color-brand-primary-dark)",
+      primary400: "var(--color-brand-primary-light)",
+      secondary500: "var(--color-brand-secondary)",
+      secondary600: "var(--color-brand-secondary-dark)",
+      secondary400: "var(--color-brand-secondary-light)",
+      success500: "var(--color-status-success)",
+      error500: "var(--color-status-error)",
+      warning500: "var(--color-status-warning)",
+      info500: "var(--color-status-info)",
+      textLight: "var(--color-text-primary)",
+      textDark: "var(--color-text-inverse)",
+      backgroundLight: "var(--color-background-default)",
+      backgroundDark: "var(--color-surface-base)"
+    },
+    space: {
+      "0": 0,
+      "1": 4,
+      "2": 8,
+      "3": 12,
+      "4": 16,
+      "5": 20,
+      "6": 24,
+      "8": 32,
+      "10": 40,
+      "12": 48,
+      "16": 64,
+      "20": 80,
+      "24": 96
+    },
+    radii: {
+      none: 0,
+      sm: 4,
+      md: 8,
+      lg: 12,
+      xl: 16,
+      "2xl": 24,
+      full: 9999
+    },
+    fontSizes: {
+      xs: 12,
+      sm: 14,
+      md: 16,
+      lg: 18,
+      xl: 20,
+      "2xl": 24,
+      "3xl": 30,
+      "4xl": 36,
+      "5xl": 48
+    }
+  },
+  aliases: {
+    bg: "backgroundColor",
+    p: "padding",
+    px: "paddingHorizontal",
+    py: "paddingVertical",
+    m: "margin",
+    mx: "marginHorizontal",
+    my: "marginVertical",
+    h: "height",
+    w: "width",
+    rounded: "borderRadius"
+  }
+};
+function hexToRgb(hex) {
+  const cleaned = hex.replace("#", "");
+  let r, g, b;
+  if (cleaned.length === 3) {
+    r = parseInt(cleaned[0] + cleaned[0], 16);
+    g = parseInt(cleaned[1] + cleaned[1], 16);
+    b = parseInt(cleaned[2] + cleaned[2], 16);
+  } else if (cleaned.length === 6) {
+    r = parseInt(cleaned.slice(0, 2), 16);
+    g = parseInt(cleaned.slice(2, 4), 16);
+    b = parseInt(cleaned.slice(4, 6), 16);
+  } else {
+    return null;
+  }
+  return { r, g, b };
+}
+function rgbToHsv(r, g, b) {
+  const rNorm = r / 255;
+  const gNorm = g / 255;
+  const bNorm = b / 255;
+  const max = Math.max(rNorm, gNorm, bNorm);
+  const min = Math.min(rNorm, gNorm, bNorm);
+  const delta = max - min;
+  const v = max;
+  const s = max === 0 ? 0 : delta / max;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === rNorm) {
+      h = 60 * ((gNorm - bNorm) / delta % 6);
+    } else if (max === gNorm) {
+      h = 60 * ((bNorm - rNorm) / delta + 2);
+    } else {
+      h = 60 * ((rNorm - gNorm) / delta + 4);
+    }
+  }
+  if (h < 0) h += 360;
+  return { h, s, v };
+}
+function hsvToRgb(h, s, v) {
+  const c = v * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = v - c;
+  let rPrime, gPrime, bPrime;
+  if (h >= 0 && h < 60) {
+    rPrime = c;
+    gPrime = x;
+    bPrime = 0;
+  } else if (h >= 60 && h < 120) {
+    rPrime = x;
+    gPrime = c;
+    bPrime = 0;
+  } else if (h >= 120 && h < 180) {
+    rPrime = 0;
+    gPrime = c;
+    bPrime = x;
+  } else if (h >= 180 && h < 240) {
+    rPrime = 0;
+    gPrime = x;
+    bPrime = c;
+  } else if (h >= 240 && h < 300) {
+    rPrime = x;
+    gPrime = 0;
+    bPrime = c;
+  } else {
+    rPrime = c;
+    gPrime = 0;
+    bPrime = x;
+  }
+  return {
+    r: Math.round((rPrime + m) * 255),
+    g: Math.round((gPrime + m) * 255),
+    b: Math.round((bPrime + m) * 255)
+  };
+}
+function rgbToHex(r, g, b) {
+  const toHex = (n) => {
+    const clamped = Math.max(0, Math.min(255, Math.round(n)));
+    return clamped.toString(16).padStart(2, "0");
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function lighten(hex, amount = 0.1) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+  const newV = Math.min(1, hsv.v + amount);
+  const newRgb = hsvToRgb(hsv.h, hsv.s, newV);
+  return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
+}
+function darken(hex, amount = 0.1) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+  const newV = Math.max(0, hsv.v - amount);
+  const newRgb = hsvToRgb(hsv.h, hsv.s, newV);
+  return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
+}
+function getHoverColors(bgColor, intensity = "medium") {
+  const amounts = {
+    subtle: 0.01,
+    medium: 0.02,
+    strong: 0.03
+  };
+  const amount = amounts[intensity];
+  return {
+    raised: lighten(bgColor, amount),
+    // Raised hover: lighten (lifting up)
+    pressed: darken(bgColor, amount)
+    // Pressed hover: darken (pressing down)
+  };
+}
+function isDark(hex) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return true;
+  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+  return hsv.v < 0.6;
+}
+var shadowColors = {
+  // For charcoal surfaces (~#2C2C2C to #3C3C3C)
+  charcoal: {
+    dark: "rgba(0, 0, 0, 0.5)",
+    light: "rgba(255, 255, 255, 0.12)",
+    // brighter for crisp rim light
+    darker: "rgba(0, 0, 0, 0.6)"
+  },
+  // For neutral dark surfaces (~#1F2937)
+  neutralDark: {
+    dark: "rgba(0, 0, 0, 0.4)",
+    light: "rgba(255, 255, 255, 0.08)",
+    darker: "rgba(0, 0, 0, 0.5)"
+  },
+  // For light surfaces (white/light gray backgrounds)
+  neutralLight: {
+    dark: "rgba(0, 0, 0, 0.15)",
+    // Visible dark shadow for depth on light backgrounds
+    light: "rgba(255, 255, 255, 1)",
+    // Bright highlight for raised effect (visible on light gray)
+    darker: "rgba(0, 0, 0, 0.2)"
+    // Deeper shadow for pressed states
+  }
+};
+var intensityConfig = {
+  subtle: { offset: 1, blur: 2 },
+  // very light, barely visible
+  medium: { offset: 2, blur: 4 },
+  // noticeable but restrained
+  strong: { offset: 2, blur: 5 }
+  // slightly deeper blur, same offset as medium
+};
+function createRaisedShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const rimBlur = 1;
+  return Platform.select({
+    web: {
+      boxShadow: `${offset}px ${offset}px ${blur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      // React Native shadow approximation (limited compared to web)
+      shadowColor: "#000",
+      shadowOffset: { width: offset, height: offset },
+      shadowOpacity: 0.3,
+      shadowRadius: blur / 2,
+      elevation: offset
+    }
+  });
+}
+function createPressedShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const rimOffset = 1;
+  const rimBlur = 1;
+  return Platform.select({
+    web: {
+      boxShadow: `inset ${offset}px ${offset}px ${blur}px ${colors.darker}, inset -${rimOffset}px -${rimOffset}px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      // React Native doesn't support inset shadows, approximate with darker bg
+      shadowOpacity: 0,
+      elevation: 0
+    }
+  });
+}
+function createFlatShadow() {
+  return Platform.select({
+    web: {
+      boxShadow: "none"
+    },
+    default: {
+      shadowOpacity: 0,
+      elevation: 0
+    }
+  });
+}
+function createRaisedHoverShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const hoverOffset = Math.max(1, Math.round(offset / 2));
+  const hoverBlur = Math.max(1, Math.round(blur / 2));
+  const rimBlur = 1;
+  return Platform.select({
+    web: {
+      // Keep same offsets as normal state for rim to prevent "shrinking" effect
+      boxShadow: `${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      shadowColor: "#000",
+      shadowOffset: { width: hoverOffset, height: hoverOffset },
+      shadowOpacity: 0.2,
+      shadowRadius: hoverBlur / 2,
+      elevation: hoverOffset
+    }
+  });
+}
+function createPressedHoverShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const hoverOffset = Math.max(1, Math.round(offset / 2));
+  const hoverBlur = Math.max(1, Math.round(blur / 2));
+  const rimBlur = 1;
+  return Platform.select({
+    web: {
+      // Keep rim offset at 1px (same as pressed normal) to prevent "shrinking" effect
+      boxShadow: `inset ${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.darker}, inset -1px -1px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      shadowOpacity: 0,
+      elevation: 0
+    }
+  });
+}
+var neumorphicShadows = {
+  // Charcoal surface shadows (for dark toolbars, cards)
+  charcoal: {
+    raised: {
+      subtle: createRaisedShadow("charcoal", "subtle"),
+      medium: createRaisedShadow("charcoal", "medium"),
+      strong: createRaisedShadow("charcoal", "strong")
+    },
+    raisedHover: {
+      subtle: createRaisedHoverShadow("charcoal", "subtle"),
+      medium: createRaisedHoverShadow("charcoal", "medium"),
+      strong: createRaisedHoverShadow("charcoal", "strong")
+    },
+    pressed: {
+      subtle: createPressedShadow("charcoal", "subtle"),
+      medium: createPressedShadow("charcoal", "medium"),
+      strong: createPressedShadow("charcoal", "strong")
+    },
+    pressedHover: {
+      subtle: createPressedHoverShadow("charcoal", "subtle"),
+      medium: createPressedHoverShadow("charcoal", "medium"),
+      strong: createPressedHoverShadow("charcoal", "strong")
+    },
+    flat: createFlatShadow()
+  },
+  // Neutral dark surface shadows
+  neutralDark: {
+    raised: {
+      subtle: createRaisedShadow("neutralDark", "subtle"),
+      medium: createRaisedShadow("neutralDark", "medium"),
+      strong: createRaisedShadow("neutralDark", "strong")
+    },
+    raisedHover: {
+      subtle: createRaisedHoverShadow("neutralDark", "subtle"),
+      medium: createRaisedHoverShadow("neutralDark", "medium"),
+      strong: createRaisedHoverShadow("neutralDark", "strong")
+    },
+    pressed: {
+      subtle: createPressedShadow("neutralDark", "subtle"),
+      medium: createPressedShadow("neutralDark", "medium"),
+      strong: createPressedShadow("neutralDark", "strong")
+    },
+    pressedHover: {
+      subtle: createPressedHoverShadow("neutralDark", "subtle"),
+      medium: createPressedHoverShadow("neutralDark", "medium"),
+      strong: createPressedHoverShadow("neutralDark", "strong")
+    },
+    flat: createFlatShadow()
+  },
+  // Neutral light surface shadows
+  neutralLight: {
+    raised: {
+      subtle: createRaisedShadow("neutralLight", "subtle"),
+      medium: createRaisedShadow("neutralLight", "medium"),
+      strong: createRaisedShadow("neutralLight", "strong")
+    },
+    raisedHover: {
+      subtle: createRaisedHoverShadow("neutralLight", "subtle"),
+      medium: createRaisedHoverShadow("neutralLight", "medium"),
+      strong: createRaisedHoverShadow("neutralLight", "strong")
+    },
+    pressed: {
+      subtle: createPressedShadow("neutralLight", "subtle"),
+      medium: createPressedShadow("neutralLight", "medium"),
+      strong: createPressedShadow("neutralLight", "strong")
+    },
+    pressedHover: {
+      subtle: createPressedHoverShadow("neutralLight", "subtle"),
+      medium: createPressedHoverShadow("neutralLight", "medium"),
+      strong: createPressedHoverShadow("neutralLight", "strong")
+    },
+    flat: createFlatShadow()
+  }
+};
+var elevationSystem = {
+  // Deep inset (recessed input fields, deeply pressed buttons)
+  [-2]: {
+    name: "deep-inset",
+    colorAdjustment: 0,
+    shadowIntensity: "strong",
+    shadowStyle: "pressed",
+    description: "Deeply recessed elements (e.g., input fields, deeply pressed buttons)"
+  },
+  // Shallow inset (pressed buttons, sunken panels)
+  [-1]: {
+    name: "inset",
+    colorAdjustment: 0,
+    shadowIntensity: "medium",
+    shadowStyle: "pressed",
+    description: "Shallow inset elements (e.g., pressed buttons, sunken panels within cards)"
+  },
+  // Base level (page background, default surface)
+  [0]: {
+    name: "base",
+    colorAdjustment: 0,
+    shadowIntensity: "subtle",
+    shadowStyle: "raised",
+    description: "Base surface level (page background, default containers)"
+  },
+  // Level 1: Subtle elevation (outline cards, subtle containers)
+  [1]: {
+    name: "subtle",
+    colorAdjustment: 0.01,
+    shadowIntensity: "subtle",
+    shadowStyle: "raised",
+    description: "Subtle elevation (outline cards, subtle containers)"
+  },
+  // Level 2: Standard elevation (default cards, buttons)
+  [2]: {
+    name: "standard",
+    colorAdjustment: 0.02,
+    shadowIntensity: "medium",
+    shadowStyle: "raised",
+    description: "Standard elevation (default cards, raised buttons)"
+  },
+  // Level 3: Prominent elevation (important cards, modals)
+  [3]: {
+    name: "prominent",
+    colorAdjustment: 0.04,
+    shadowIntensity: "strong",
+    shadowStyle: "raised",
+    description: "Prominent elevation (important cards, modals, dropdowns)"
+  },
+  // Level 4: High elevation (overlays, popovers)
+  [4]: {
+    name: "high",
+    colorAdjustment: 0.06,
+    shadowIntensity: "strong",
+    shadowStyle: "raised",
+    description: "High elevation (overlays, popovers, tooltips)"
+  },
+  // Level 5: Floating (toasts, floating action buttons)
+  [5]: {
+    name: "floating",
+    colorAdjustment: 0.08,
+    shadowIntensity: "strong",
+    shadowStyle: "raised",
+    description: "Floating elevation (toasts, floating action buttons, highest z-index)"
+  }
+};
+function calculateRimLightColor(baseColor, level) {
+  const rgb = hexToRgb(baseColor);
+  if (!rgb) {
+    return "rgba(255, 255, 255, 0.5)";
+  }
+  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+  const isLight = hsv.v > 0.6;
+  const isSaturated = hsv.s > 0.3;
+  const absLevel = Math.abs(level);
+  const opacityBoost = Math.max(0, (absLevel - 1) * 0.05);
+  if (isSaturated) {
+    const rimLightValue = 0.95;
+    const rimLightRgb = hsvToRgb(hsv.h, hsv.s * 0.3, rimLightValue);
+    const baseOpacity = isLight ? 0.9 : 0.5;
+    const finalOpacity = Math.min(1, baseOpacity + opacityBoost);
+    return `rgba(${rimLightRgb.r}, ${rimLightRgb.g}, ${rimLightRgb.b}, ${finalOpacity.toFixed(2)})`;
+  } else {
+    const baseOpacity = isLight ? 0.9 : 0.12;
+    const finalOpacity = Math.min(1, baseOpacity + opacityBoost);
+    return `rgba(255, 255, 255, ${finalOpacity.toFixed(2)})`;
+  }
+}
+function calculateDarkShadowColors(surfaceColor) {
+  const rgb = hexToRgb(surfaceColor);
+  if (!rgb) {
+    return {
+      dark: "rgba(0, 0, 0, 0.3)",
+      darker: "rgba(0, 0, 0, 0.4)"
+    };
+  }
+  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+  const isLight = hsv.v > 0.6;
+  const isSaturated = hsv.s > 0.3;
+  if (isSaturated) {
+    const darkShadowValue = 0.15;
+    const darkShadowRgb = hsvToRgb(hsv.h, hsv.s, darkShadowValue);
+    if (isLight) {
+      return {
+        dark: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.3)`,
+        darker: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.4)`
+      };
+    } else {
+      return {
+        dark: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.5)`,
+        darker: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.6)`
+      };
+    }
+  } else {
+    if (isLight) {
+      return {
+        dark: "rgba(0, 0, 0, 0.2)",
+        darker: "rgba(0, 0, 0, 0.3)"
+      };
+    } else {
+      return {
+        dark: "rgba(0, 0, 0, 0.5)",
+        darker: "rgba(0, 0, 0, 0.6)"
+      };
+    }
+  }
+}
+function getRimLightConfig() {
+  return {
+    offset: 1,
+    // Fixed 1px for crisp rim
+    blur: 1
+    // Tight blur for crisp edge
+  };
+}
+function getElevationConfig(level) {
+  return elevationSystem[level];
+}
+var elevationSurfaceCache = /* @__PURE__ */ new Map();
+var MAX_CACHE_SIZE = 100;
+function getCacheKey(baseColor, level, theme) {
+  return `${baseColor}-${level}-${theme}`;
+}
+function calculateElevationSurface(baseColor, level, theme) {
+  const config = elevationSystem[level];
+  if (config.colorAdjustment === 0) {
+    return baseColor;
+  }
+  if (level < 0) {
+    return baseColor;
+  }
+  return lighten(baseColor, config.colorAdjustment);
+}
+function getElevationSurface(baseColor, level, theme) {
+  const cacheKey = getCacheKey(baseColor, level, theme);
+  if (elevationSurfaceCache.has(cacheKey)) {
+    return elevationSurfaceCache.get(cacheKey);
+  }
+  const result = calculateElevationSurface(baseColor, level);
+  if (elevationSurfaceCache.size >= MAX_CACHE_SIZE) {
+    const firstKey = elevationSurfaceCache.keys().next().value;
+    elevationSurfaceCache.delete(firstKey);
+  }
+  elevationSurfaceCache.set(cacheKey, result);
+  return result;
+}
+var elevationShadowCache = /* @__PURE__ */ new Map();
+var MAX_SHADOW_CACHE_SIZE = 50;
+function getShadowCacheKey(baseColor, level, theme, isHovered) {
+  return `${baseColor}-${level}-${theme}-${isHovered}`;
+}
+function calculateElevationShadow(baseColor, level, theme, isHovered = false) {
+  const config = elevationSystem[level];
+  if (level === 0) {
+    return {};
+  }
+  const elevatedSurfaceColor = calculateElevationSurface(baseColor, level);
+  const rimLightColor = calculateRimLightColor(baseColor, level);
+  const darkShadowColors = calculateDarkShadowColors(elevatedSurfaceColor);
+  const intensityConfig2 = {
+    subtle: { offset: 1, blur: 2 },
+    medium: { offset: 2, blur: 4 },
+    strong: { offset: 2, blur: 5 }
+  };
+  const { offset, blur } = intensityConfig2[config.shadowIntensity];
+  const rimConfig = getRimLightConfig();
+  if (config.shadowStyle === "pressed") {
+    if (isHovered) {
+      const hoverOffset = Math.max(1, Math.round(offset / 2));
+      const hoverBlur = Math.max(1, Math.round(blur / 2));
+      return Platform.select({
+        web: {
+          boxShadow: `inset ${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${darkShadowColors.darker}, inset -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
+        },
+        default: {
+          shadowOpacity: 0,
+          elevation: 0
+        }
+      });
+    }
+    return Platform.select({
+      web: {
+        boxShadow: `inset ${offset}px ${offset}px ${blur}px ${darkShadowColors.darker}, inset -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
+      },
+      default: {
+        shadowOpacity: 0,
+        elevation: 0
+      }
+    });
+  } else {
+    if (isHovered) {
+      const hoverOffset = Math.max(1, Math.round(offset / 2));
+      const hoverBlur = Math.max(1, Math.round(blur / 2));
+      return Platform.select({
+        web: {
+          boxShadow: `${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${darkShadowColors.dark}, -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
+        },
+        default: {
+          shadowColor: "#000",
+          shadowOffset: { width: hoverOffset, height: hoverOffset },
+          shadowOpacity: 0.2,
+          shadowRadius: hoverBlur / 2,
+          elevation: hoverOffset
+        }
+      });
+    }
+    return Platform.select({
+      web: {
+        boxShadow: `${offset}px ${offset}px ${blur}px ${darkShadowColors.dark}, -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
+      },
+      default: {
+        shadowColor: "#000",
+        shadowOffset: { width: offset, height: offset },
+        shadowOpacity: 0.3,
+        shadowRadius: blur / 2,
+        elevation: offset
+      }
+    });
+  }
+}
+function getElevationShadow(baseColor, level, theme, isHovered = false) {
+  const cacheKey = getShadowCacheKey(baseColor, level, theme, isHovered);
+  if (elevationShadowCache.has(cacheKey)) {
+    return elevationShadowCache.get(cacheKey);
+  }
+  const result = calculateElevationShadow(baseColor, level, theme, isHovered);
+  if (elevationShadowCache.size >= MAX_SHADOW_CACHE_SIZE) {
+    const firstKey = elevationShadowCache.keys().next().value;
+    elevationShadowCache.delete(firstKey);
+  }
+  elevationShadowCache.set(cacheKey, result);
+  return result;
+}
+function getBaseSurfaceColor(theme) {
+  return theme === "light" ? semanticColorsLight["surface-raised"] : semanticColorsDark["surface-elevated"];
+}
+var componentElevationRanges = {
+  button: {
+    allowed: [2],
+    default: 2,
+    hover: 3
+  },
+  card: {
+    allowed: [1, 2, 3],
+    default: 2,
+    hover: 3
+  },
+  input: {
+    allowed: [-2, -1, 0],
+    default: -1
+  },
+  overlay: {
+    allowed: [4, 5],
+    default: 4
+  }
+};
+function getValidatedElevation(component, requested) {
+  const range = componentElevationRanges[component];
+  if (range.allowed.includes(requested)) {
+    return requested;
+  }
+  const sorted = [...range.allowed].sort((a, b) => a - b);
+  if (requested < sorted[0]) return sorted[0];
+  if (requested > sorted[sorted.length - 1]) return sorted[sorted.length - 1];
+  return sorted.reduce(
+    (prev, curr) => Math.abs(curr - requested) < Math.abs(prev - requested) ? curr : prev
+  );
+}
+var glowConfig = {
+  subtle: { blur: 12, spread: 0, opacity: 0.25 },
+  medium: { blur: 20, spread: 2, opacity: 0.4 },
+  strong: { blur: 30, spread: 4, opacity: 0.55 }
+};
+function getGlowShadow(color, intensity = "medium") {
+  const config = glowConfig[intensity];
+  const rgb = hexToRgb(color);
+  if (!rgb) return {};
+  return Platform.select({
+    web: {
+      boxShadow: `0 0 ${config.blur}px ${config.spread}px rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${config.opacity})`
+    },
+    default: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: config.opacity,
+      shadowRadius: config.blur / 2,
+      elevation: 0
+    }
+  });
+}
+
+// src/theme/manifest/css-property-manifest.validate.ts
+var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var isVariantAxes = (value) => isPlainObject(value) && Object.keys(value).length > 0 && Object.values(value).every((axisValue) => typeof axisValue === "string");
+function collectVariantOverrideErrors(override, path) {
+  if (!isPlainObject(override)) return [`${path} must be an object`];
+  const errors = [];
+  if (!isVariantAxes(override.variant))
+    errors.push(`${path}.variant must be a non-empty string-keyed object`);
+  if (override.token !== void 0 && override.token !== null && typeof override.token !== "string") {
+    errors.push(`${path}.token must be a string or null`);
+  }
+  if (typeof override.resolvedValue !== "string" || override.resolvedValue.length === 0) {
+    errors.push(`${path}.resolvedValue must be a non-empty string`);
+  }
+  return errors;
+}
+function collectPropertyErrors(entry, path) {
+  if (!isPlainObject(entry)) return [`${path} must be an object`];
+  const errors = [];
+  if (typeof entry.property !== "string" || entry.property.length === 0) {
+    errors.push(`${path}.property must be a non-empty string`);
+  }
+  if (entry.token !== null && typeof entry.token !== "string") {
+    errors.push(`${path}.token must be a string or null`);
+  }
+  if (typeof entry.resolvedValue !== "string" || entry.resolvedValue.length === 0) {
+    errors.push(`${path}.resolvedValue must be a non-empty string`);
+  }
+  if (entry.variantOverrides !== void 0) {
+    if (!Array.isArray(entry.variantOverrides)) {
+      errors.push(`${path}.variantOverrides must be an array`);
+    } else {
+      entry.variantOverrides.forEach(
+        (override, i) => errors.push(...collectVariantOverrideErrors(override, `${path}.variantOverrides[${i}]`))
+      );
+    }
+  }
+  return errors;
+}
+function validateCssPropertyManifest(candidate) {
+  if (!isPlainObject(candidate)) return { valid: false, errors: ["manifest must be an object"] };
+  const errors = [];
+  if (typeof candidate.component !== "string" || candidate.component.length === 0) {
+    errors.push("component must be a non-empty string");
+  }
+  if (candidate.baseVariant !== void 0 && !isVariantAxes(candidate.baseVariant)) {
+    errors.push("baseVariant must be a non-empty string-keyed object");
+  }
+  if (!Array.isArray(candidate.properties) || candidate.properties.length === 0) {
+    errors.push("properties must be a non-empty array");
+  } else {
+    candidate.properties.forEach(
+      (entry, i) => errors.push(...collectPropertyErrors(entry, `properties[${i}]`))
+    );
+  }
+  return { valid: errors.length === 0, errors };
+}
+function isCssPropertyManifest(candidate) {
+  return validateCssPropertyManifest(candidate).valid;
+}
+function resolveColor(token, mode = "dark") {
+  return Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
+}
+
+// src/theme/gradients.ts
+function linearGradient(from, to, angle = 180, mode = "dark") {
+  return {
+    backgroundImage: `linear-gradient(${angle}deg, ${resolveColor(from, mode)}, ${resolveColor(to, mode)})`
+  };
+}
+var surfaceGradient = {
+  /** Chrome bands (top bar, headers): elevated → base, a subtle dark wash. */
+  chrome: (mode = "dark") => linearGradient("surface-elevated", "background-base", 180, mode)
+};
+
+// src/theme/presets/apply.ts
+function colorKeyToVar(key) {
+  return `--color-${key}`;
+}
+function applyColorOverrides(colors, root) {
+  for (const [key, value] of Object.entries(colors)) {
+    if (value !== void 0) {
+      root.style.setProperty(colorKeyToVar(key), value);
+    }
+  }
+}
+function applyFontOverrides(fonts, root) {
+  const fontVarMap = {
+    sans: "--font-family-sans",
+    body: "--font-family-body",
+    heading: "--font-family-heading",
+    mono: "--font-family-mono"
+  };
+  for (const [key, value] of Object.entries(fonts)) {
+    if (value !== void 0 && fontVarMap[key]) {
+      root.style.setProperty(fontVarMap[key], value);
+    }
+  }
+}
+function injectFontImport(url) {
+  if (typeof document === "undefined") return;
+  const existing = document.querySelector(`link[href="${url}"]`);
+  if (existing) return;
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = url;
+  document.head.appendChild(link);
+}
+function applyThemePreset(preset) {
+  if (typeof document === "undefined") {
+    return () => {
+    };
+  }
+  const root = document.documentElement;
+  const removals = [];
+  if (preset.fontImport) {
+    injectFontImport(preset.fontImport);
+  }
+  const isLight = root.classList.contains("light");
+  const modeColors = isLight ? preset.colors?.light : preset.colors?.dark;
+  if (modeColors) {
+    const previousValues = {};
+    for (const key of Object.keys(modeColors)) {
+      previousValues[colorKeyToVar(key)] = root.style.getPropertyValue(colorKeyToVar(key)) || null;
+    }
+    applyColorOverrides(modeColors, root);
+    removals.push(() => {
+      for (const [varName, prev] of Object.entries(previousValues)) {
+        if (prev === null) {
+          root.style.removeProperty(varName);
+        } else {
+          root.style.setProperty(varName, prev);
+        }
+      }
+    });
+  }
+  if (preset.fonts) {
+    applyFontOverrides(preset.fonts, root);
+  }
+  if (preset.rootClasses) {
+    for (const cls of preset.rootClasses) {
+      root.classList.add(cls);
+    }
+    removals.push(() => {
+      for (const cls of preset.rootClasses) {
+        root.classList.remove(cls);
+      }
+    });
+  }
+  return () => {
+    for (const remove of removals) {
+      remove();
+    }
+  };
+}
+
+// src/theme/presets/default.ts
+var defaultPreset = {
+  name: "default",
+  description: "Titan Design System default theme \u2014 orange accent, steel secondary"
+};
+
+// src/theme/presets/audiobook.ts
+var audiobookPreset = {
+  name: "audiobook",
+  description: "Warm copper/patina theme with editorial typography",
+  fontImport: "https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,600;0,700;1,400&family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap",
+  fonts: {
+    sans: "'Outfit', 'Avenir', 'Avenir Next', system-ui, sans-serif",
+    body: "'Outfit', 'Avenir', 'Avenir Next', system-ui, sans-serif",
+    heading: "'Newsreader', 'Libre Baskerville', Georgia, serif",
+    mono: "'JetBrains Mono', 'SF Mono', 'Fira Code', monospace"
+  },
+  colors: {
+    dark: {
+      // Brand: Copper accent
+      "brand-primary": "#d4782a",
+      "brand-primary-light": "#e8944a",
+      "brand-primary-dark": "#9a4a15",
+      "brand-primary-subtle": "rgba(212, 120, 42, 0.12)",
+      "brand-primary-hover": "#e8944a",
+      "brand-primary-active": "#f5b070",
+      // Brand secondary: Patina/verdigris
+      "brand-secondary": "#3a9b8a",
+      "brand-secondary-light": "#55baa7",
+      "brand-secondary-dark": "#1f5c52",
+      "brand-secondary-subtle": "rgba(58, 155, 138, 0.12)",
+      "brand-secondary-hover": "#55baa7",
+      "brand-secondary-active": "#7ed4c4",
+      "on-brand-primary": "#FFFFFF",
+      "on-brand-secondary": "#FFFFFF",
+      // Status colors (audiobook's warmer status palette)
+      "status-success": "#5fb870",
+      "status-error": "#d85c4a",
+      "status-warning": "#d4a43a",
+      "status-info": "#5a8fd4",
+      // Text: warm off-whites
+      "text-primary": "#f4f3f1",
+      "text-secondary": "#b5b3af",
+      "text-tertiary": "#7a7875",
+      // Surfaces: warm charcoals (not pure gray)
+      "surface-base": "#101114",
+      "surface-elevated": "#15171c",
+      "surface-raised": "#1a1d24",
+      "surface-overlay": "#15171c",
+      "surface-input": "#15171c",
+      // Backgrounds
+      "background-base": "#0a0b0d",
+      "background-default": "#101114",
+      "background-subtle": "#1a1d24",
+      // Borders
+      "border-default": "rgba(255, 255, 255, 0.06)",
+      "border-subtle": "rgba(255, 255, 255, 0.03)",
+      "border-strong": "#2d323d",
+      "border-focus": "#d4782a",
+      "border-input": "#2d323d",
+      "border-input-hover": "#454c5c",
+      "border-input-focus": "#d4782a",
+      "border-input-error": "#d85c4a",
+      // Interactive
+      "interactive-hover": "rgba(255, 255, 255, 0.04)",
+      "interactive-focus": "rgba(255, 255, 255, 0.12)",
+      "interactive-active": "rgba(255, 255, 255, 0.16)",
+      "interactive-selected": "rgba(255, 255, 255, 0.08)",
+      "divider": "rgba(255, 255, 255, 0.06)",
+      // Glow RGB values for shadow utilities
+      "brand-primary-rgb": "212, 120, 42",
+      "brand-secondary-rgb": "58, 155, 138",
+      "status-success-rgb": "95, 184, 112",
+      "status-error-rgb": "216, 92, 74",
+      "status-warning-rgb": "212, 164, 58",
+      "status-info-rgb": "90, 143, 212",
+      "background-base-rgb": "10, 11, 13"
+    }
+  },
+  rootClasses: ["atmosphere-warm", "grain"]
+};
+function wrapJsx(fn) {
+  return function(type, props, ...rest) {
+    if (props && typeof props.className === "string" && props.className) {
+      const cn = props.className;
+      const cssStyle = { $$css: true, [cn]: cn };
+      const existing = props.style;
+      props = {
+        ...props,
+        style: existing ? [cssStyle, existing] : cssStyle
+      };
+      delete props.className;
+    }
+    return fn(type, props, ...rest);
+  };
+}
+var jsx = wrapJsx(jsx$1);
+
+// src/theme/ThemeProvider.tsx
+var MODE_VARS = {
+  dark: vars(darkThemeCSSVars),
+  light: vars(lightThemeCSSVars)
+};
+function ThemeProvider({
+  mode = "dark",
+  style,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(View, { style: [MODE_VARS[mode], { flex: 1 }, style], ...props, children });
+}
+
+export { CATEGORICAL_CVD_SAFE_MAX, ThemeProvider, applyThemePreset, audiobookPreset, bestTextColor, buttonSizes, categoricalPalette, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultPreset, discreteRainbow, divergingScale, elevationSystem, getBaseSurfaceColor, getCategoricalColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, lightThemeCSSVars, lighten, linearGradient, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort, shadowColors, surfaceGradient, validateCssPropertyManifest };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map