@titan-design/react-ui 0.0.1

package/dist/theme/index.js

@@ -0,0 +1,1522 @@
+'use strict';
+
+var reactNative = require('react-native');
+
+// 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"
+  },
+  // 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 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": primitiveColors.accent[400],
+  // #FF7900
+  "brand-primary-light": primitiveColors.accent[200],
+  // #FF9630
+  "brand-primary-dark": primitiveColors.accent[700],
+  // #D0620C
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
+  "brand-primary-hover": primitiveColors.accent[500],
+  "brand-primary-active": primitiveColors.accent[600],
+  "brand-secondary": primitiveColors.steel[500],
+  // #406D87
+  "brand-secondary-light": primitiveColors.steel[300],
+  // #678498
+  "brand-secondary-dark": primitiveColors.steel[700],
+  // #32556D
+  "brand-secondary-subtle": "rgba(64, 109, 135, 0.08)",
+  "brand-secondary-hover": primitiveColors.steel[600],
+  "brand-secondary-active": primitiveColors.steel[700],
+  // Text on brand backgrounds (on-*)
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors (status-*)
+  "status-success": primitiveColors.teal[500],
+  // #14B8A6
+  "status-success-light": primitiveColors.teal[400],
+  // #43C6B7
+  "status-success-dark": primitiveColors.teal[700],
+  // #0E8074
+  "status-success-subtle": primitiveColors.teal[50],
+  "status-error": primitiveColors.red[600],
+  // #D14343
+  "status-error-light": primitiveColors.red[400],
+  // #DA6868
+  "status-error-dark": primitiveColors.red[700],
+  // #922E2E
+  "status-error-subtle": primitiveColors.red[50],
+  "status-warning": primitiveColors.amber[500],
+  // #FFB020
+  "status-warning-light": primitiveColors.amber[400],
+  // #FFBF4C
+  "status-warning-dark": primitiveColors.amber[600],
+  // #B27B16
+  "status-warning-subtle": primitiveColors.amber[50],
+  "status-info": primitiveColors.sky[500],
+  // #2196F3
+  "status-info-light": primitiveColors.sky[400],
+  // #64B6F7
+  "status-info-dark": primitiveColors.sky[700],
+  // #0B79D0
+  "status-info-subtle": primitiveColors.sky[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],
+  // #1965B0 - Blue
+  "data-2": discreteRainbow[14],
+  // #4EB265 - Green
+  "data-3": discreteRainbow[17],
+  // #F7F056 - Yellow
+  "data-4": discreteRainbow[25],
+  // #DC050C - Red
+  "data-5": discreteRainbow[8],
+  // #882E72 - Purple
+  "data-6": discreteRainbow[20],
+  // #F4A736 - Orange
+  "data-7": discreteRainbow[13],
+  // #7BAFDE - Light Blue
+  "data-8": discreteRainbow[15],
+  // #90C987 - Light Green
+  "data-9": discreteRainbow[3],
+  // #CAACCB - Lavender
+  "data-10": discreteRainbow[22],
+  // #EE8026 - 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],
+  // #FAFAFA - slightly off-white for elevated cards
+  "surface-raised": primitiveColors.neutral[100],
+  // #F3F4F6 - 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-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": primitiveColors.accent[400],
+  "brand-primary-light": primitiveColors.accent[200],
+  "brand-primary-dark": primitiveColors.accent[700],
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
+  "brand-primary-hover": primitiveColors.accent[300],
+  "brand-primary-active": primitiveColors.accent[200],
+  "brand-secondary": primitiveColors.steel[500],
+  "brand-secondary-light": primitiveColors.steel[300],
+  "brand-secondary-dark": primitiveColors.steel[700],
+  "brand-secondary-subtle": "rgba(64, 109, 135, 0.12)",
+  "brand-secondary-hover": primitiveColors.steel[400],
+  "brand-secondary-active": primitiveColors.steel[300],
+  // Text on brand backgrounds
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors
+  "status-success": primitiveColors.teal[500],
+  "status-success-light": primitiveColors.teal[400],
+  "status-success-dark": primitiveColors.teal[700],
+  "status-success-subtle": "rgba(20, 184, 166, 0.12)",
+  "status-error": primitiveColors.red[600],
+  "status-error-light": primitiveColors.red[400],
+  "status-error-dark": primitiveColors.red[700],
+  "status-error-subtle": "rgba(209, 67, 67, 0.12)",
+  "status-warning": primitiveColors.amber[500],
+  "status-warning-light": primitiveColors.amber[400],
+  "status-warning-dark": primitiveColors.amber[600],
+  "status-warning-subtle": "rgba(255, 176, 32, 0.12)",
+  "status-info": primitiveColors.sky[500],
+  "status-info-light": primitiveColors.sky[400],
+  "status-info-dark": primitiveColors.sky[700],
+  "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],
+  // #161616 - main surface
+  "surface-elevated": primitiveColors.charcoal[600],
+  // #191919 - elevated surface
+  "surface-raised": primitiveColors.charcoal[500],
+  // #1C1C1C - raised surface
+  "surface-overlay": primitiveColors.charcoal[600],
+  // #191919 - overlay surface
+  "surface-input": primitiveColors.charcoal[600],
+  // #191919 - input surface
+  // Background colors
+  "background-base": primitiveColors.charcoal[900],
+  // #101010 - darkest charcoal
+  "background-default": primitiveColors.charcoal[700],
+  // #161616 - main background
+  "background-subtle": primitiveColors.charcoal[500],
+  // #1C1C1C - subtle background
+  // Border colors
+  "border-default": primitiveColors.charcoal[400],
+  // #1F1F1F - default border
+  "border-subtle": primitiveColors.charcoal[500],
+  // #1C1C1C - subtle border
+  "border-strong": primitiveColors.charcoal[300],
+  // #2C2C2C - strong border
+  "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],
+  // #1F1F1F - 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 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-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-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"]
+};
+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-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-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"]
+};
+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 = 0, gPrime = 0, bPrime = 0;
+  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 reactNative.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 reactNative.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 reactNative.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 reactNative.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 reactNative.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 reactNative.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 reactNative.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 reactNative.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 reactNative.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
+  );
+}
+
+exports.buttonSizes = buttonSizes;
+exports.componentElevationRanges = componentElevationRanges;
+exports.createFlatShadow = createFlatShadow;
+exports.createPressedHoverShadow = createPressedHoverShadow;
+exports.createPressedShadow = createPressedShadow;
+exports.createRaisedHoverShadow = createRaisedHoverShadow;
+exports.createRaisedShadow = createRaisedShadow;
+exports.darkThemeCSSVars = darkThemeCSSVars;
+exports.darken = darken;
+exports.discreteRainbow = discreteRainbow;
+exports.elevationSystem = elevationSystem;
+exports.getBaseSurfaceColor = getBaseSurfaceColor;
+exports.getDiscreteRainbowColor = getDiscreteRainbowColor;
+exports.getElevationConfig = getElevationConfig;
+exports.getElevationShadow = getElevationShadow;
+exports.getElevationSurface = getElevationSurface;
+exports.getHoverColors = getHoverColors;
+exports.getSemanticColors = getSemanticColors;
+exports.getThemeCSSVars = getThemeCSSVars;
+exports.getValidatedElevation = getValidatedElevation;
+exports.gluestackConfig = gluestackConfig;
+exports.hexToRgb = hexToRgb;
+exports.hsvToRgb = hsvToRgb;
+exports.isDark = isDark;
+exports.lightThemeCSSVars = lightThemeCSSVars;
+exports.lighten = lighten;
+exports.neumorphicShadows = neumorphicShadows;
+exports.primitiveBorderRadius = primitiveBorderRadius;
+exports.primitiveBreakpoints = primitiveBreakpoints;
+exports.primitiveColors = primitiveColors;
+exports.primitiveShadows = primitiveShadows;
+exports.primitiveSpacing = primitiveSpacing;
+exports.primitiveTypography = primitiveTypography;
+exports.primitiveZIndex = primitiveZIndex;
+exports.rgbToHex = rgbToHex;
+exports.rgbToHsv = rgbToHsv;
+exports.semanticColorsDark = semanticColorsDark;
+exports.semanticColorsLight = semanticColorsLight;
+exports.semanticTypography = semanticTypography;
+exports.shadowColors = shadowColors;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map