aura-glass 2.0.2 → 2.0.4

package/dist/index.mjs

@@ -1181,7 +1181,7 @@ const AURA_GLASS = {
           px: 12
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(59,130,246,0.15) 50%, rgba(147,51,234,0.08) 100%)'
+          base: 'linear-gradient(135deg, rgba(255,255,255,0.35) 0%, var(--glass-color-primary,0.15) 50%, rgba(147,51,234,0.08) 100%)'
         },
         border: {
           color: 'rgba(255,255,255,0.5)',
@@ -1213,10 +1213,10 @@ const AURA_GLASS = {
           px: 16
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(59,130,246,0.2) 50%, rgba(147,51,234,0.12) 100%)'
+          base: 'linear-gradient(135deg, rgba(255,255,255,0.4) 0%, var(--glass-color-primary,0.2) 50%, rgba(147,51,234,0.12) 100%)'
         },
         border: {
-          color: 'rgba(255,255,255,0.6)',
+          color: 'var(--glass-text-tertiary)',
           width: 2,
           style: 'solid'
         },
@@ -1245,10 +1245,10 @@ const AURA_GLASS = {
           px: 20
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(59,130,246,0.25) 50%, rgba(147,51,234,0.15) 100%)'
+          base: 'linear-gradient(135deg, rgba(255,255,255,0.5) 0%, var(--glass-color-primary,0.25) 50%, rgba(147,51,234,0.15) 100%)'
         },
         border: {
-          color: 'rgba(255,255,255,0.7)',
+          color: 'var(--glass-text-secondary)',
           width: 2,
           style: 'solid'
         },
@@ -1277,10 +1277,10 @@ const AURA_GLASS = {
           px: 24
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(59,130,246,0.3) 50%, rgba(147,51,234,0.2) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-text-tertiary) 0%, var(--glass-color-primary,0.3) 50%, rgba(147,51,234,0.2) 100%)'
         },
         border: {
-          color: 'rgba(255,255,255,0.8)',
+          color: 'var(--glass-text-secondary)',
           width: 3,
           style: 'solid'
         },
@@ -1311,15 +1311,15 @@ const AURA_GLASS = {
           px: 8
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(59,130,246,0.3) 0%, rgba(29,78,216,0.2) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-primary,0.3) 0%, rgba(29,78,216,0.2) 100%)'
         },
         border: {
-          color: 'rgba(59,130,246,0.5)',
+          color: 'var(--glass-color-primary,0.5)',
           width: 1,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(59,130,246,0.15)',
+          color: 'var(--glass-color-primary,0.15)',
           x: 0,
           y: 4,
           blur: 16,
@@ -1338,22 +1338,22 @@ const AURA_GLASS = {
           px: 12
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(59,130,246,0.4) 0%, rgba(29,78,216,0.25) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-primary,0.4) 0%, rgba(29,78,216,0.25) 100%)'
         },
         border: {
-          color: 'rgba(59,130,246,0.6)',
+          color: 'var(--glass-color-primary,0.6)',
           width: 1,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(59,130,246,0.2)',
+          color: 'var(--glass-color-primary,0.2)',
           x: 0,
           y: 8,
           blur: 24,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(59,130,246,0.2)',
+          color: 'var(--glass-color-primary,0.2)',
           spread: 0,
           blur: 8
         },
@@ -1370,22 +1370,22 @@ const AURA_GLASS = {
           px: 16
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(59,130,246,0.5) 0%, rgba(29,78,216,0.35) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-primary,0.5) 0%, rgba(29,78,216,0.35) 100%)'
         },
         border: {
-          color: 'rgba(59,130,246,0.7)',
+          color: 'var(--glass-color-primary,0.7)',
           width: 2,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(59,130,246,0.25)',
+          color: 'var(--glass-color-primary,0.25)',
           x: 0,
           y: 12,
           blur: 32,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(59,130,246,0.25)',
+          color: 'var(--glass-color-primary,0.25)',
           spread: 1,
           blur: 12
         },
@@ -1402,22 +1402,22 @@ const AURA_GLASS = {
           px: 20
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(59,130,246,0.6) 0%, rgba(29,78,216,0.45) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-primary,0.6) 0%, rgba(29,78,216,0.45) 100%)'
         },
         border: {
-          color: 'rgba(59,130,246,0.8)',
+          color: 'var(--glass-color-primary,0.8)',
           width: 2,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(59,130,246,0.3)',
+          color: 'var(--glass-color-primary,0.3)',
           x: 0,
           y: 16,
           blur: 40,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(59,130,246,0.3)',
+          color: 'var(--glass-color-primary,0.3)',
           spread: 1,
           blur: 16
         },
@@ -1434,22 +1434,22 @@ const AURA_GLASS = {
           px: 24
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(59,130,246,0.7) 0%, rgba(29,78,216,0.5) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-primary,0.7) 0%, rgba(29,78,216,0.5) 100%)'
         },
         border: {
-          color: 'rgba(59,130,246,0.9)',
+          color: 'var(--glass-color-primary,0.9)',
           width: 3,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(59,130,246,0.35)',
+          color: 'var(--glass-color-primary,0.35)',
           x: 0,
           y: 20,
           blur: 48,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(59,130,246,0.35)',
+          color: 'var(--glass-color-primary,0.35)',
           spread: 2,
           blur: 20
         },
@@ -1625,15 +1625,15 @@ const AURA_GLASS = {
           px: 8
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(245,158,11,0.25) 0%, rgba(217,119,6,0.18) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-warning,0.25) 0%, rgba(217,119,6,0.18) 100%)'
         },
         border: {
-          color: 'rgba(245,158,11,0.4)',
+          color: 'var(--glass-color-warning,0.4)',
           width: 1,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(245,158,11,0.12)',
+          color: 'var(--glass-color-warning,0.12)',
           x: 0,
           y: 4,
           blur: 16,
@@ -1652,22 +1652,22 @@ const AURA_GLASS = {
           px: 12
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(245,158,11,0.3) 0%, rgba(217,119,6,0.22) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-warning,0.3) 0%, rgba(217,119,6,0.22) 100%)'
         },
         border: {
-          color: 'rgba(245,158,11,0.5)',
+          color: 'var(--glass-color-warning,0.5)',
           width: 1,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(245,158,11,0.15)',
+          color: 'var(--glass-color-warning,0.15)',
           x: 0,
           y: 8,
           blur: 24,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(245,158,11,0.15)',
+          color: 'var(--glass-color-warning,0.15)',
           spread: 0,
           blur: 8
         },
@@ -1684,22 +1684,22 @@ const AURA_GLASS = {
           px: 16
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(245,158,11,0.4) 0%, rgba(217,119,6,0.28) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-warning,0.4) 0%, rgba(217,119,6,0.28) 100%)'
         },
         border: {
-          color: 'rgba(245,158,11,0.6)',
+          color: 'var(--glass-color-warning,0.6)',
           width: 2,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(245,158,11,0.18)',
+          color: 'var(--glass-color-warning,0.18)',
           x: 0,
           y: 12,
           blur: 32,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(245,158,11,0.18)',
+          color: 'var(--glass-color-warning,0.18)',
           spread: 1,
           blur: 12
         },
@@ -1716,22 +1716,22 @@ const AURA_GLASS = {
           px: 20
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(245,158,11,0.5) 0%, rgba(217,119,6,0.35) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-warning,0.5) 0%, rgba(217,119,6,0.35) 100%)'
         },
         border: {
-          color: 'rgba(245,158,11,0.7)',
+          color: 'var(--glass-color-warning,0.7)',
           width: 2,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(245,158,11,0.22)',
+          color: 'var(--glass-color-warning,0.22)',
           x: 0,
           y: 16,
           blur: 40,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(245,158,11,0.22)',
+          color: 'var(--glass-color-warning,0.22)',
           spread: 1,
           blur: 16
         },
@@ -1748,22 +1748,22 @@ const AURA_GLASS = {
           px: 24
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(245,158,11,0.6) 0%, rgba(217,119,6,0.4) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-warning,0.6) 0%, rgba(217,119,6,0.4) 100%)'
         },
         border: {
-          color: 'rgba(245,158,11,0.8)',
+          color: 'var(--glass-color-warning,0.8)',
           width: 3,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(245,158,11,0.25)',
+          color: 'var(--glass-color-warning,0.25)',
           x: 0,
           y: 20,
           blur: 48,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(245,158,11,0.25)',
+          color: 'var(--glass-color-warning,0.25)',
           spread: 2,
           blur: 20
         },
@@ -1782,15 +1782,15 @@ const AURA_GLASS = {
           px: 8
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(239,68,68,0.25) 0%, rgba(220,38,38,0.18) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-danger,0.25) 0%, rgba(220,38,38,0.18) 100%)'
         },
         border: {
-          color: 'rgba(239,68,68,0.4)',
+          color: 'var(--glass-color-danger,0.4)',
           width: 1,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(239,68,68,0.12)',
+          color: 'var(--glass-color-danger,0.12)',
           x: 0,
           y: 4,
           blur: 16,
@@ -1809,22 +1809,22 @@ const AURA_GLASS = {
           px: 12
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(239,68,68,0.3) 0%, rgba(220,38,38,0.22) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-danger,0.3) 0%, rgba(220,38,38,0.22) 100%)'
         },
         border: {
-          color: 'rgba(239,68,68,0.5)',
+          color: 'var(--glass-color-danger,0.5)',
           width: 1,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(239,68,68,0.15)',
+          color: 'var(--glass-color-danger,0.15)',
           x: 0,
           y: 8,
           blur: 24,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(239,68,68,0.15)',
+          color: 'var(--glass-color-danger,0.15)',
           spread: 0,
           blur: 8
         },
@@ -1841,22 +1841,22 @@ const AURA_GLASS = {
           px: 16
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(239,68,68,0.4) 0%, rgba(220,38,38,0.28) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-danger,0.4) 0%, rgba(220,38,38,0.28) 100%)'
         },
         border: {
-          color: 'rgba(239,68,68,0.6)',
+          color: 'var(--glass-color-danger,0.6)',
           width: 2,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(239,68,68,0.18)',
+          color: 'var(--glass-color-danger,0.18)',
           x: 0,
           y: 12,
           blur: 32,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(239,68,68,0.18)',
+          color: 'var(--glass-color-danger,0.18)',
           spread: 1,
           blur: 12
         },
@@ -1873,22 +1873,22 @@ const AURA_GLASS = {
           px: 20
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(239,68,68,0.5) 0%, rgba(220,38,38,0.35) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-danger,0.5) 0%, rgba(220,38,38,0.35) 100%)'
         },
         border: {
-          color: 'rgba(239,68,68,0.7)',
+          color: 'var(--glass-color-danger,0.7)',
           width: 2,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(239,68,68,0.22)',
+          color: 'var(--glass-color-danger,0.22)',
           x: 0,
           y: 16,
           blur: 40,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(239,68,68,0.22)',
+          color: 'var(--glass-color-danger,0.22)',
           spread: 1,
           blur: 16
         },
@@ -1905,22 +1905,22 @@ const AURA_GLASS = {
           px: 24
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(239,68,68,0.6) 0%, rgba(220,38,38,0.4) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-danger,0.6) 0%, rgba(220,38,38,0.4) 100%)'
         },
         border: {
-          color: 'rgba(239,68,68,0.8)',
+          color: 'var(--glass-color-danger,0.8)',
           width: 3,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(239,68,68,0.25)',
+          color: 'var(--glass-color-danger,0.25)',
           x: 0,
           y: 20,
           blur: 48,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(239,68,68,0.25)',
+          color: 'var(--glass-color-danger,0.25)',
           spread: 2,
           blur: 20
         },
@@ -2249,7 +2249,7 @@ const glassTokens = {
   // Gradient patterns
   gradients: {
     primary: 'linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.15) 100%)',
-    secondary: 'linear-gradient(135deg, rgba(59,130,246,0.2) 0%, rgba(147,51,234,0.1) 100%)',
+    secondary: 'linear-gradient(135deg, var(--glass-color-primary,0.2) 0%, rgba(147,51,234,0.1) 100%)',
     primaryRadial: 'radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%)',
     mesh: 'linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, transparent 25%)',
     iridescent: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7)',
@@ -2269,8 +2269,8 @@ const glassTokens = {
     primary: 'rgba(255,255,255,0.25)',
     secondary: 'rgba(255,255,255,0.15)',
     success: 'rgba(34,197,94,0.25)',
-    warning: 'rgba(245,158,11,0.25)',
-    error: 'rgba(239,68,68,0.25)',
+    warning: 'var(--glass-color-warning,0.25)',
+    error: 'var(--glass-color-danger,0.25)',
     dark: 'rgba(0,0,0,0.25)',
     darkSubtle: 'rgba(0,0,0,0.15)'
   },
@@ -2280,11 +2280,11 @@ const glassTokens = {
   },
   // Glow effects
   glow: {
-    primary: 'rgba(59,130,246,0.6)',
+    primary: 'var(--glass-color-primary,0.6)',
     secondary: 'rgba(147,51,234,0.6)',
     success: 'rgba(34,197,94,0.6)',
-    warning: 'rgba(245,158,11,0.6)',
-    error: 'rgba(239,68,68,0.6)'
+    warning: 'var(--glass-color-warning,0.6)',
+    error: 'var(--glass-color-danger,0.6)'
   }
 };
 // Alias for backward compatibility
@@ -2621,7 +2621,7 @@ function createGlassFocusMixin() {
   console.warn('[AuraGlass] createGlassFocusMixin is deprecated. Use CSS :focus-visible with focusRing option.');
   return {
     outline: 'none',
-    boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.3)'
+    boxShadow: '0 0 0 3px var(--glass-color-primary, 0.3)'
   };
 }
 /**
@@ -3248,7 +3248,7 @@ function useSpringTransform() {
 }
 // Hook for spring-based color transitions
 function useSpringColor() {
-  let initialColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#000000';
+  let initialColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'var(--glass-black)';
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   // Parse initial color
   const parseColor = color => {
@@ -10355,6 +10355,7 @@ const ResponsiveContext = /*#__PURE__*/createContext$1({
 });
 // ------ ThemeProvider Presence Context ------
 const ThemeProviderPresenceContext = /*#__PURE__*/createContext$1(false);
+const useThemeProviderPresence = () => useContext(ThemeProviderPresenceContext);
 /**
  * Unified Theme Provider Component
  *
@@ -10622,7 +10623,7 @@ const UnifiedThemeProvider = _ref => {
     const backgroundColor = isDarkMode ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.1)';
     const borderColor = isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
     const shadowColor = isDarkMode ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.1)';
-    const glowColor = isDarkMode ? '#3b82f6' : '#6366f1';
+    const glowColor = isDarkMode ? 'var(--glass-color-primary)' : '#6366f1';
     // Get opacity and blur values from qualityTier
     const bgOpacity = getBackgroundOpacity('medium');
     const borderOpacityValue = getBorderOpacity('medium');
@@ -10654,7 +10655,7 @@ const UnifiedThemeProvider = _ref => {
         variantStyles = "\n          background-color: rgba(255, 255, 255, ".concat(dimBgOpacity, ");\n          box-shadow: \n            0 ").concat(dimElev2, "px ").concat(dimElev6, "px ").concat(shadowColor, ",\n            0 ").concat(dimElev05, "px ").concat(dimElev1, "px rgba(0, 0, 0, 0.03),\n            inset 0 0 0 1px rgba(255, 255, 255, ").concat(borderOpacityValue, ");\n          border-width: 0;\n        ");
         break;
       case 'metallic':
-        const accentColor = isDarkMode ? '#3b82f6' : '#6366f1';
+        const accentColor = isDarkMode ? 'var(--glass-color-primary)' : '#6366f1';
         const bgOpacityTop = bgOpacity * 0.6;
         const bgOpacityBottom = bgOpacity * 0.4;
         const elevationDouble = elevation * 2;
@@ -10997,6 +10998,38 @@ const UnifiedThemeProvider = _ref => {
  * This component provides theme context.
  */
 const ThemeProvider = UnifiedThemeProvider;
+// ------ Theme Hooks ------
+/**
+ * Returns the full theme object based on current settings.
+ */
+const useTheme = () => {
+  const colorModeContext = useContext(ColorModeContext);
+  const themeVariantContext = useContext(ThemeVariantContext);
+  const styleUtilsContext = useContext(StyleUtilsContext);
+  if (!colorModeContext || !themeVariantContext || !styleUtilsContext) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return _objectSpread2({
+    isDark: colorModeContext.isDarkMode,
+    currentColorMode: colorModeContext.colorMode,
+    toggleColorMode: colorModeContext.toggleColorMode,
+    setColorMode: colorModeContext.setColorMode,
+    currentTheme: themeVariantContext.themeVariant,
+    setTheme: themeVariantContext.setThemeVariant,
+    availableThemes: themeVariantContext.availableThemes
+  }, styleUtilsContext);
+};
+/**
+ * Hook for accessing only theme variant aspects.
+ * More efficient than useTheme when only theme variant is needed.
+ */
+const useThemeVariant = () => {
+  const context = useContext(ThemeVariantContext);
+  if (!context) {
+    throw new Error('useThemeVariant must be used within a ThemeProvider');
+  }
+  return context;
+};
 
 /**
  * Liquid Glass Contrast Guard System
@@ -11098,7 +11131,7 @@ class ContrastGuard {
       targetLevel = 'AA',
       material = 'liquid',
       variant = 'regular',
-      textColor = 'rgba(255,255,255,0.95)'
+      textColor = 'var(--glass-text-primary)'
     } = options;
     // Throttled update function
     const updateContrast = () => {
@@ -18868,13 +18901,13 @@ const GlassSidebar = /*#__PURE__*/forwardRef((_ref, ref) => {
           title: isCollapsed ? 'Expand sidebar' : 'Collapse sidebar',
           className: cn('absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 glass-radius-full', 'flex items-center justify-center',
           // Frosted surface
-          'backdrop-blur-md2xl bg-white/55 border border-white/80', 'shadow-[0_6px_18px_rgba(0,0,0,0.35),inset_0_1px_2px_rgba(255,255,255,0.35)] ring-1 ring-white/40', 'hover:bg-white/65 active:bg-white/70'),
+          'backdrop-blur-md2xl bg-white/55 border border-white/80', 'shadow-[0_6px_18px_rgba(var(--glass-color-black) / var(--glass-opacity-35)),inset_0_1px_2px_var(--glass-bg-active)] ring-1 ring-white/40', 'hover:bg-white/65 active:bg-white/70'),
           "aria-label": isCollapsed ? 'Expand sidebar' : 'Collapse sidebar',
           children: isCollapsed ? jsx(ChevronRight, {
-            className: "w-5 h-5 text-primary drop-shadow-[0_1px_8px_rgba(0,0,0,0.8)]",
+            className: "w-5 h-5 text-primary drop-shadow-[0_1px_8px_var(--glass-text-secondary-dark)]",
             strokeWidth: 3
           }) : jsx(ChevronLeft, {
-            className: "w-5 h-5 text-primary drop-shadow-[0_1px_8px_rgba(0,0,0,0.8)]",
+            className: "w-5 h-5 text-primary drop-shadow-[0_1px_8px_var(--glass-text-secondary-dark)]",
             strokeWidth: 3
           })
         })
@@ -18934,7 +18967,7 @@ function SidebarNavigationItem(_ref3) {
     variant: "ghost",
     onClick: handleClick,
     disabled: item === null || item === void 0 ? void 0 : item.disabled,
-    className: cn('w-full flex items-center glass-gap-3 glass-radius-md transition-all duration-200 relative group', 'hover:bg-white/10 focus:outline-none', collapsed ? 'glass-px-2 glass-py-2.5 justify-center' : 'glass-px-3 glass-py-2', 'glass-text-sm font-medium', isActive ? 'bg-primary/15 text-primary shadow-[0_0_0_2px_${glassStyles.borderColor || "rgba(59, 130, 246, 0.2)"}]' : '', !isActive && 'glass-text-secondary hover:text-foreground', (item === null || item === void 0 ? void 0 : item.disabled) && 'opacity-50 cursor-not-allowed'),
+    className: cn('w-full flex items-center glass-gap-3 glass-radius-md transition-all duration-200 relative group', 'hover:bg-white/10 focus:outline-none', collapsed ? 'glass-px-2 glass-py-2.5 justify-center' : 'glass-px-3 glass-py-2', 'glass-text-sm font-medium', isActive ? 'bg-primary/15 text-primary shadow-[0_0_0_2px_${glassStyles.borderColor || "var(--glass-color-primary, 0.2)"}]' : '', !isActive && 'glass-text-secondary hover:text-foreground', (item === null || item === void 0 ? void 0 : item.disabled) && 'opacity-50 cursor-not-allowed'),
     children: [(item === null || item === void 0 ? void 0 : item.icon) && jsx("span", {
       className: "flex-shrink-0 w-6 h-6 flex items-center justify-center text-lg",
       children: /*#__PURE__*/React.cloneElement(item === null || item === void 0 ? void 0 : item.icon, {
@@ -18948,7 +18981,7 @@ function SidebarNavigationItem(_ref3) {
         className: cn('flex-shrink-0 glass-px-2 glass-py-1 glass-text-xs glass-radius-full font-medium transition-all duration-200', 'bg-black/15 border border-black/20 shadow-md backdrop-blur-md', 'group-hover:bg-black/20 group-hover:border-black/25 group-hover:shadow-lg', 'relative z-10' // Ensure badge stays above any background effects
         ),
         style: {
-          color: '#ffffff' // white text on dark background
+          color: 'var(--glass-white)' // white text on dark background
         },
         children: item === null || item === void 0 ? void 0 : item.badge
       }), hasChildren && jsx("svg", {
@@ -19283,7 +19316,7 @@ const TabItemComponent = _ref => {
       background: active ? glassTokenUtils.getSurface('neutral', 'level1').surface.base : 'transparent',
       border: 'none',
       borderRadius: '6px',
-      color: active ? '#ffffff' : glassTokenUtils.getSurface('neutral', 'level1').text.secondary,
+      color: active ? 'var(--glass-white)' : glassTokenUtils.getSurface('neutral', 'level1').text.secondary,
       cursor: disabled ? 'not-allowed' : 'pointer',
       opacity: disabled ? 0.5 : 1,
       fontSize: '0.875rem',
@@ -19299,7 +19332,7 @@ const TabItemComponent = _ref => {
       children: label
     }), badge && jsx("span", {
       style: {
-        background: '#ef4444',
+        background: 'var(--glass-color-danger)',
         color: 'white',
         borderRadius: '10px',
         padding: '2px 6px',
@@ -19497,6 +19530,39 @@ const defaultContextValue = {
   }
 };
 const AnimationContext = /*#__PURE__*/createContext$1(defaultContextValue);
+const AnimationProvider = _ref => {
+  let {
+    children,
+    defaultReducedMotion = false,
+    defaultSpring = {
+      stiffness: 100,
+      damping: 10,
+      mass: 1
+    }
+  } = _ref;
+  const [reducedMotion, setReducedMotion] = useState(defaultReducedMotion);
+  // Check for prefers-reduced-motion
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+      setReducedMotion(mediaQuery.matches);
+      const handleChange = e => {
+        setReducedMotion(e.matches);
+      };
+      mediaQuery.addEventListener('change', handleChange);
+      return () => mediaQuery.removeEventListener('change', handleChange);
+    }
+  }, []);
+  const contextValue = {
+    reducedMotion,
+    setReducedMotion,
+    defaultSpring
+  };
+  return jsx(AnimationContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+};
 const useAnimation = () => {
   const context = useContext(AnimationContext);
   if (!context) {
@@ -22605,7 +22671,7 @@ const GlassModal = /*#__PURE__*/forwardRef((_ref, ref) => {
           className: cn('w-full flex flex-col liquid-glass-modal-surface', 'focus:outline-none', variant === 'fullscreen' ? 'h-full' : 'max-h-full overflow-hidden', consciousness && 'consciousness-modal-glass', eyeTracking && 'consciousness-eye-trackable-content', adaptive && (modalInsights === null || modalInsights === void 0 ? void 0 : modalInsights.urgency) === 'high' && 'consciousness-urgent-glass', predictive && modalInsights && 'consciousness-predictive-glass', className),
           style: {
             '--liquid-glass-depth-offset': variant === 'drawer' ? '8px' : '12px',
-            '--liquid-glass-tint-adaptive': (modalInsights === null || modalInsights === void 0 ? void 0 : modalInsights.urgency) === 'high' ? 'rgba(220, 38, 38, 0.15)' : 'rgba(0, 0, 0, 0.1)'
+            '--liquid-glass-tint-adaptive': (modalInsights === null || modalInsights === void 0 ? void 0 : modalInsights.urgency) === 'high' ? 'rgba(220, 38, 38, 0.15)' : 'rgba(var(--glass-color-black) / var(--glass-opacity-10))'
           },
           "data-liquid-glass-modal": "true",
           "data-modal-urgency": modalInsights === null || modalInsights === void 0 ? void 0 : modalInsights.urgency
@@ -23972,7 +24038,7 @@ const hslToRgb = (h, s, l, a) => {
   };
 };
 // Predefined color palettes
-const defaultPalette = ['#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffa500', '#800080', '#ffc0cb', '#a52a2a', '#808080', '#000080', '#008000'];
+const defaultPalette = ['var(--glass-black)', 'var(--glass-white)', '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffa500', '#800080', '#ffc0cb', '#a52a2a', '#808080', '#000080', '#008000'];
 const materialPalette = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#9e9e9e', '#607d8b'];
 /**
  * GlassColorPicker component
@@ -23981,7 +24047,7 @@ const materialPalette = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
 const GlassColorPicker = _ref => {
   let {
       value,
-      defaultValue = '#3b82f6',
+      defaultValue = 'var(--glass-color-primary)',
       onChange,
       format = 'hex',
       showAlpha = false,
@@ -24190,7 +24256,7 @@ const GlassColorPicker = _ref => {
                 children: [showInput && jsx(GlassInput, {
                   value: inputValue,
                   onChange: e => handleInputChange(e.target.value),
-                  placeholder: "#000000",
+                  placeholder: "var(--glass-black)",
                   className: "text-sm"
                 }), jsx("div", {
                   className: "text-xs text-primary/60 glass-mt-1",
@@ -25807,23 +25873,23 @@ dt.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral(["\n
   }
 }, props => props.$hasError ? 'rgba(240, 82, 82, 0.8)' : props.$focused ? 'rgba(99, 102, 241, 0.8)' : 'rgba(255, 255, 255, 0.12)', props => props.$focused && lt(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteral(["\n    border-color: rgba(99, 102, 241, 0.8);\n    box-shadow: var(--glass-elev-2);\n  "]))), props => props.$hasError && lt(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral(["\n    border-color: rgba(240, 82, 82, 0.8);\n    box-shadow: var(--glass-elev-2);\n  "]))), props => props.$disabled && lt(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteral(["\n    opacity: 0.6;\n    cursor: not-allowed;\n    background: var(--glass-bg-default);\n  "]))));
 dt.div(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  flex: 1;\n"])));
-dt.div(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 8px;\n  border-radius: 16px;\n  font-size: 0.85rem;\n  gap: 6px;\n  max-width: 200px;\n  background: var(--glass-bg-default);\n  backdrop-filter: var(--glass-backdrop-blur);\n  border: 1px solid var(--glass-border-default);\n  color: rgba(255, 255, 255, 0.95);\n  transition: background-color 0.2s ease;\n  user-select: none;\n  transform: translate(", "px, ", "px)\n             scale(", ");\n  will-change: transform, opacity;\n  opacity: ", ";\n  \n  /* Dragging state */\n  ", "\n  \n  /* Hover styles */\n  &:hover {\n    background: var(--glass-bg-default);\n    \n    /* Only show the remove button hover effect when not disabled */\n    ", "\n  }\n  \n  /* Disabled state */\n  ", "\n"])), props => props.$translateX, props => props.$translateY, props => props.$scale, props => {
+dt.div(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 8px;\n  border-radius: 16px;\n  font-size: 0.85rem;\n  gap: 6px;\n  max-width: 200px;\n  background: var(--glass-bg-default);\n  backdrop-filter: var(--glass-backdrop-blur);\n  border: 1px solid var(--glass-border-default);\n  color: var(--glass-text-primary);\n  transition: background-color 0.2s ease;\n  user-select: none;\n  transform: translate(", "px, ", "px)\n             scale(", ");\n  will-change: transform, opacity;\n  opacity: ", ";\n  \n  /* Dragging state */\n  ", "\n  \n  /* Hover styles */\n  &:hover {\n    background: var(--glass-bg-default);\n    \n    /* Only show the remove button hover effect when not disabled */\n    ", "\n  }\n  \n  /* Disabled state */\n  ", "\n"])), props => props.$translateX, props => props.$translateY, props => props.$scale, props => {
   var _props$$initialOpacit;
   return (_props$$initialOpacit = props.$initialOpacity) !== null && _props$$initialOpacit !== void 0 ? _props$$initialOpacit : 1;
 }, props => props.$isDragging && lt(_templateObject0$5 || (_templateObject0$5 = _taggedTemplateLiteral(["\n    opacity: 0.8;\n    z-index: 10;\n    cursor: grabbing;\n  "]))), props => !props.$isDisabled && lt(_templateObject1$4 || (_templateObject1$4 = _taggedTemplateLiteral(["\n      .remove-button {\n        background: var(--glass-bg-default);\n        \n        &:hover {\n          background: var(--glass-bg-default);\n        }\n      }\n    "]))), props => props.$isDisabled && lt(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n    opacity: 0.5;\n    cursor: not-allowed;\n  "]))));
 dt.span(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-dt.button(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  border: none;\n  padding: 0;\n  background-color: transparent;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  \n  &:focus {\n    outline: none;\n    box-shadow: var(--glass-elev-2);\n  }\n  \n  /* Icon sizing */\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n  \n  /* Disabled state inherited from parent */\n"])));
-dt.input(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 50px;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.9);\n  font-size: ", ";\n  \n  &::placeholder {\n    color: rgba(255, 255, 255, 0.5);\n  }\n  \n  &:disabled {\n    cursor: not-allowed;\n  }\n"])), props => props.$size === 'small' ? '0.85rem' : props.$size === 'large' ? '1.05rem' : '0.95rem');
+dt.button(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  border: none;\n  padding: 0;\n  background-color: transparent;\n  color: rgba(var(--glass-color-white) / var(--glass-opacity-80));\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  \n  &:focus {\n    outline: none;\n    box-shadow: var(--glass-elev-2);\n  }\n  \n  /* Icon sizing */\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n  \n  /* Disabled state inherited from parent */\n"])));
+dt.input(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 50px;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: rgba(var(--glass-color-white) / var(--glass-opacity-90));\n  font-size: ", ";\n  \n  &::placeholder {\n    color: var(--glass-border-hover);\n  }\n  \n  &:disabled {\n    cursor: not-allowed;\n  }\n"])), props => props.$size === 'small' ? '0.85rem' : props.$size === 'large' ? '1.05rem' : '0.95rem');
 dt.div(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: ", ";\n  max-height: ", ";\n  overflow-y: auto;\n  z-index: 1000;\n  ", "\n  left: 0;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  \n  /* Enhanced glass styling */\n  background: var(--glass-bg-default);\n  backdrop-filter: var(--glass-backdrop-blur);\n  -webkit-backdrop-filter: var(--glass-backdrop-blur);\n  border: 1px solid var(--glass-border-default);\n  \n  border-radius: 8px;\n  border: 1px solid var(--glass-border-default);\n  will-change: transform, opacity;\n  transform-origin: ", ";\n"])), props => props.$popperWidth || "".concat(props.$width, "px"), props => typeof props.$maxHeight === 'number' ? "".concat(props.$maxHeight, "px") : props.$maxHeight, props => props.$openUp ? 'bottom: 100%;' : 'top: 100%;', props => props.$openUp ? '0' : '4px', props => props.$openUp ? '4px' : '0', props => props.$openUp ? 'bottom center' : 'top center');
 dt.ul(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 6px 0;\n  list-style: none;\n"])));
 dt.li(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteral(["\n  padding: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  transition: background-color 0.15s ease;\n  position: relative;\n  \n  /* Text styling */\n  color: rgba(255, 255, 255, ", ");\n  \n  /* Selected state */\n  ", "\n  \n  /* Focus state */\n  ", "\n  \n  /* Hover state - only when not disabled */\n  ", "\n  \n  /* Disabled state */\n  ", "\n"])), props => props.$size === 'small' ? '6px 10px' : props.$size === 'large' ? '10px 16px' : '8px 12px', props => props.$isDisabled ? 'not-allowed' : 'pointer', props => props.$isDisabled ? '0.5' : '0.9', props => props.$isSelected && lt(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteral(["\n    background: var(--glass-bg-default);\n    font-weight: var(--typography-subheading-weight);\n    \n    &::after {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 3px;\n      background: var(--glass-bg-default);\n    }\n  "]))), props => props.$isFocused && !props.$isDisabled && lt(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteral(["\n    background: var(--glass-bg-default);\n  "]))), props => !props.$isDisabled && lt(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteral(["\n    &:hover {\n      background: var(--glass-bg-default);\n    }\n  "]))), props => props.$isDisabled && lt(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteral(["\n    opacity: 0.6;\n  "]))));
-dt.div(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteral(["\n  padding: ", ";\n  font-size: 0.8rem;\n  font-weight: var(--typography-heading-weight);\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.6);\n  background: var(--glass-bg-default);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n  letter-spacing: 0.5px;\n"])), props => props.$size === 'small' ? '6px 10px' : props.$size === 'large' ? '10px 16px' : '8px 12px');
-dt.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  padding: 12px;\n  color: rgba(255, 255, 255, 0.5);\n  text-align: center;\n  font-style: italic;\n"])));
-dt.button(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  padding: 4px;\n  margin-left: 4px;\n  color: rgba(255, 255, 255, 0.5);\n  cursor: pointer;\n  transition: color 0.2s ease;\n  \n  &:hover {\n    color: rgba(255, 255, 255, 0.8);\n  }\n  \n  &:focus {\n    outline: none;\n    color: rgba(255, 255, 255, 0.8);\n  }\n  \n  /* Icon sizing */\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
-dt.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px;\n  color: rgba(255, 255, 255, 0.7);\n  \n  /* Simple loading spinner */\n  .spinner {\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    border: 2px solid rgba(99, 102, 241, 0.3);\n    border-top-color: rgba(99, 102, 241, 0.8);\n    animation: spin 0.8s linear infinite;\n  }\n  \n  @keyframes spin {\n    to { transform: rotate(360deg); }\n  }\n"])));
+dt.div(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteral(["\n  padding: ", ";\n  font-size: 0.8rem;\n  font-weight: var(--typography-heading-weight);\n  text-transform: uppercase;\n  color: rgba(var(--glass-color-white) / var(--glass-opacity-60));\n  background: var(--glass-bg-default);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n  letter-spacing: 0.5px;\n"])), props => props.$size === 'small' ? '6px 10px' : props.$size === 'large' ? '10px 16px' : '8px 12px');
+dt.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  padding: 12px;\n  color: var(--glass-border-hover);\n  text-align: center;\n  font-style: italic;\n"])));
+dt.button(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  padding: 4px;\n  margin-left: 4px;\n  color: var(--glass-border-hover);\n  cursor: pointer;\n  transition: color 0.2s ease;\n  \n  &:hover {\n    color: rgba(var(--glass-color-white) / var(--glass-opacity-80));\n  }\n  \n  &:focus {\n    outline: none;\n    color: rgba(var(--glass-color-white) / var(--glass-opacity-80));\n  }\n  \n  /* Icon sizing */\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
+dt.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px;\n  color: rgba(var(--glass-color-white) / var(--glass-opacity-70));\n  \n  /* Simple loading spinner */\n  .spinner {\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    border: 2px solid rgba(99, 102, 241, 0.3);\n    border-top-color: rgba(99, 102, 241, 0.8);\n    animation: spin 0.8s linear infinite;\n  }\n  \n  @keyframes spin {\n    to { transform: rotate(360deg); }\n  }\n"])));
 dt.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  color: rgba(240, 82, 82, 0.9);\n  font-size: 0.8rem;\n  margin-top: 4px;\n  padding-left: 4px;\n"])));
-dt.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  color: rgba(255, 255, 255, 0.6);\n  font-size: 0.8rem;\n  margin-top: 4px;\n  padding-left: 4px;\n"])));
-dt.label(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  display: block;\n  margin-bottom: 6px;\n  font-size: 0.9rem;\n  font-weight: var(--typography-subheading-weight);\n  color: rgba(255, 255, 255, 0.8);\n"])));
+dt.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  color: rgba(var(--glass-color-white) / var(--glass-opacity-60));\n  font-size: 0.8rem;\n  margin-top: 4px;\n  padding-left: 4px;\n"])));
+dt.label(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  display: block;\n  margin-bottom: 6px;\n  font-size: 0.9rem;\n  font-weight: var(--typography-subheading-weight);\n  color: rgba(var(--glass-color-white) / var(--glass-opacity-80));\n"])));
 // Define the actual component function that accepts props and ref
 const GlassMultiSelectInternal = (props, ref) => {
   return jsx("div", {
@@ -26459,7 +26525,7 @@ const StyledTable = dt.table(_templateObject$l || (_templateObject$l = _taggedTe
   return ((_props$theme$typograp = (props === null || props === void 0 ? void 0 : props.theme).typography) === null || _props$theme$typograp === void 0 || (_props$theme$typograp = _props$theme$typograp.body) === null || _props$theme$typograp === void 0 ? void 0 : _props$theme$typograp.fontFamily) || 'sans-serif';
 }, props => {
   var _props$theme$colors;
-  return ((_props$theme$colors = (props === null || props === void 0 ? void 0 : props.theme).colors) === null || _props$theme$colors === void 0 || (_props$theme$colors = _props$theme$colors.text) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.primary) || '#000';
+  return ((_props$theme$colors = (props === null || props === void 0 ? void 0 : props.theme).colors) === null || _props$theme$colors === void 0 || (_props$theme$colors = _props$theme$colors.text) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.primary) || 'var(--glass-black)';
 });
 // Sort Indicator with transition removed
 const SortIndicator = dt.span(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  /* transform: translateY(-50%); // Initial transform set by style prop now */\n  font-size: 0.8em;\n  color: ", ";\n  /* REMOVED transition: transform 0.2s ease, opacity 0.2s ease; */\n  opacity: 0; /* Start hidden, animation controls visibility */\n  transform-origin: center center; /* Useful for scale/rotate transforms */\n  will-change: transform, opacity; /* Explicitly add will-change here */\n"])), props => {
@@ -26493,7 +26559,7 @@ const StyledTd = dt.td(_templateObject4$a || (_templateObject4$a = _taggedTempla
   return ((_props$theme$typograp4 = (props === null || props === void 0 ? void 0 : props.theme).typography) === null || _props$theme$typograp4 === void 0 || (_props$theme$typograp4 = _props$theme$typograp4.body) === null || _props$theme$typograp4 === void 0 ? void 0 : _props$theme$typograp4.fontSize) || '1rem';
 }, props => {
   var _props$theme$colors8;
-  return ((_props$theme$colors8 = (props === null || props === void 0 ? void 0 : props.theme).colors) === null || _props$theme$colors8 === void 0 || (_props$theme$colors8 = _props$theme$colors8.text) === null || _props$theme$colors8 === void 0 ? void 0 : _props$theme$colors8.primary) || '#000';
+  return ((_props$theme$colors8 = (props === null || props === void 0 ? void 0 : props.theme).colors) === null || _props$theme$colors8 === void 0 || (_props$theme$colors8 = _props$theme$colors8.text) === null || _props$theme$colors8 === void 0 ? void 0 : _props$theme$colors8.primary) || 'var(--glass-black)';
 });
 // Wrapper for applying Glass effect
 dt.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteral(["\n  /* Takes styles from GlassSurface component or createSurface function */\n"])));
@@ -27582,8 +27648,8 @@ const GlassHeatmap = /*#__PURE__*/forwardRef((_ref, ref) => {
       xAxis,
       yAxis,
       colorScale = {
-        min: '#3B82F6',
-        max: '#EF4444'
+        min: 'var(--glass-color-primary)',
+        max: 'var(--glass-color-danger)'
       },
       cellSize = 20,
       cellGap = 1,
@@ -27773,7 +27839,7 @@ const GlassHeatmap = /*#__PURE__*/forwardRef((_ref, ref) => {
       className: cn('glass-heatmap-cell flex items-center justify-center glass-text-xs font-medium transition-all', 'cursor-pointer hover:scale-110 hover:z-10', isSelected && 'ring-2 ring-primary ring-offset-1', isHovered && 'shadow-lg scale-110 z-20', showGrid && 'border border-border/20'),
       style: {
         backgroundColor: cellColor,
-        color: cell.normalizedValue > 0.5 ? '#ffffff' : '#000000',
+        color: cell.normalizedValue > 0.5 ? 'var(--glass-white)' : 'var(--glass-black)',
         width: cellSize * internalZoomLevel,
         height: cellSize * internalZoomLevel,
         fontSize: "".concat(Math.max(8, cellSize * internalZoomLevel * 0.4), "px")
@@ -28014,7 +28080,7 @@ const GlassLoadingSkeleton = /*#__PURE__*/forwardRef((_ref, ref) => {
   const getSkeletonStyle = () => ({
     background: "\n        linear-gradient(135deg, rgba(255,255,255,0.015) 0%, rgba(255,255,255,0.005) 50%, rgba(255,255,255,0.015) 100%),\n        linear-gradient(135deg, ".concat(glassTokenUtils.getSurface('neutral', 'level1').border.color, " 0%, rgba(147,51,234,0.1) 100%)\n      "),
     border: '1px solid rgba(255,255,255,0.04)',
-    boxShadow: '0 4px 16px rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.03) inset'
+    boxShadow: '0 4px 16px rgba(var(--glass-color-black) / var(--glass-opacity-10)), 0 1px 0 rgba(255,255,255,0.03) inset'
   });
   const renderBasicSkeleton = () => jsxs("div", {
     className: "glass-auto-gap glass-auto-gap-md",
@@ -30115,7 +30181,7 @@ const GlassAnimatedNumber = /*#__PURE__*/forwardRef((_ref, ref) => {
         };
       case 'glow':
         return {
-          textShadow: isAnimating ? '0 0 20px rgba(255,255,255,0.5), 0 0 40px ${glassStyles.borderColor || "rgba(255, 255, 255, 0.3)"}' : 'none',
+          textShadow: isAnimating ? '0 0 20px var(--glass-border-hover), 0 0 40px ${glassStyles.borderColor || "var(--glass-bg-hover)"}' : 'none',
           transition: 'text-shadow 0.3s ease'
         };
       case 'count':
@@ -31498,7 +31564,7 @@ GlassSlider.displayName = 'GlassSlider';
 // Get icon state classes
 const getIconStateClasses = (active, completed) => {
   if (active) {
-    return 'bg-primary-500 glass-text-primary border-primary-300 shadow-[0_0_12px_3px_rgba(59,130,246,0.5)]';
+    return 'bg-primary-500 glass-text-primary border-primary-300 shadow-[0_0_12px_3px_var(--glass-color-primary,0.5)]';
   }
   if (completed) {
     return 'bg-success-500 glass-text-primary border-success-300';
@@ -32344,7 +32410,7 @@ const GlassAreaChart = _ref => {
       showLegend = true,
       xAxisLabel,
       yAxisLabel,
-      colors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6b7280'],
+      colors = ['var(--glass-color-primary)', 'var(--glass-color-danger)', 'var(--glass-color-success)', 'var(--glass-color-warning)', '#8b5cf6', '#06b6d4', '#84cc16', '#f97316', '#ec4899', 'var(--glass-gray-500)'],
       animationDuration = 1200,
       showTooltips = true,
       formatYValue = value => value.toString(),
@@ -32637,7 +32703,7 @@ const GlassAreaChart = _ref => {
                 cy: point.scaledY,
                 r: "4",
                 fill: s.color,
-                stroke: "rgba(255, 255, 255, 0.8)",
+                stroke: "rgba(var(--glass-color-white) / var(--glass-opacity-80))",
                 strokeWidth: "2",
                 className: "cursor-pointer hover:r-6 transition-all duration-200",
                 role: "button",
@@ -32804,7 +32870,7 @@ const GlassBarChart = _ref => {
       showLegend = true,
       xAxisLabel,
       yAxisLabel,
-      colors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6b7280'],
+      colors = ['var(--glass-color-primary)', 'var(--glass-color-danger)', 'var(--glass-color-success)', 'var(--glass-color-warning)', '#8b5cf6', '#06b6d4', '#84cc16', '#f97316', '#ec4899', 'var(--glass-gray-500)'],
       animationDuration = 1000,
       showTooltips = true,
       formatYValue = value => value.toString(),
@@ -33272,7 +33338,7 @@ const GlassLineChart = _ref => {
       showLegend = true,
       xAxisLabel,
       yAxisLabel,
-      colors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6b7280'],
+      colors = ['var(--glass-color-primary)', 'var(--glass-color-danger)', 'var(--glass-color-success)', 'var(--glass-color-warning)', '#8b5cf6', '#06b6d4', '#84cc16', '#f97316', '#ec4899', 'var(--glass-gray-500)'],
       animationDuration = 1000,
       showTooltips = true,
       formatYValue = value => value.toString(),
@@ -33470,7 +33536,7 @@ const GlassLineChart = _ref => {
                 cy: point.scaledY,
                 r: "4",
                 fill: s.color,
-                stroke: "rgba(255, 255, 255, 0.8)",
+                stroke: "rgba(var(--glass-color-white) / var(--glass-opacity-80))",
                 strokeWidth: "2",
                 className: "cursor-pointer hover:r-6 transition-all duration-200",
                 onMouseEnter: () => handlePointHover(s.id, pointIndex, point.scaledX, point.scaledY),
@@ -33642,7 +33708,7 @@ const GlassPieChart = /*#__PURE__*/forwardRef(function GlassPieChartComponent(_r
       className
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded$1i);
-  const defaultColors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6b7280'];
+  const defaultColors = ['var(--glass-color-primary)', 'var(--glass-color-danger)', 'var(--glass-color-success)', 'var(--glass-color-warning)', '#8b5cf6', '#06b6d4', '#84cc16', '#f97316', '#ec4899', 'var(--glass-gray-500)'];
   const actualColors = colors || defaultColors;
   const actualAnimationDuration = animationDuration;
   const actualShowTooltips = showTooltips;
@@ -33784,7 +33850,7 @@ const GlassPieChart = /*#__PURE__*/forwardRef(function GlassPieChartComponent(_r
                 children: [jsx("path", {
                   d: segment.path,
                   fill: segment.color,
-                  stroke: "rgba(255, 255, 255, 0.2)",
+                  stroke: "rgba(var(--glass-color-white) / var(--glass-opacity-20))",
                   strokeWidth: "1",
                   className: "cursor-pointer transition-all duration-200 hover:opacity-80",
                   onMouseEnter: e => handleSegmentHover(segment, e),
@@ -33813,8 +33879,8 @@ const GlassPieChart = /*#__PURE__*/forwardRef(function GlassPieChartComponent(_r
                   cx: centerX,
                   cy: centerY,
                   r: innerRadius,
-                  fill: "rgba(255, 255, 255, 0.1)",
-                  stroke: "rgba(255, 255, 255, 0.2)",
+                  fill: "var(--glass-bg-default)",
+                  stroke: "rgba(var(--glass-color-white) / var(--glass-opacity-20))",
                   strokeWidth: "1"
                 }), jsx("text", {
                   x: centerX,
@@ -34019,14 +34085,14 @@ const defaultTheme = {
       accentPrimary: '#6366F1',
       accentSecondary: '#8B5CF6',
       accentTertiary: '#EC4899',
-      stateCritical: '#EF4444',
-      stateOptimal: '#10B981',
-      stateAttention: '#F59E0B',
-      stateInformational: '#3B82F6',
-      neutralBackground: '#F9FAFB',
-      neutralForeground: '#1F2937',
-      neutralBorder: '#E5E7EB',
-      neutralSurface: '#FFFFFF'
+      stateCritical: 'var(--glass-color-danger)',
+      stateOptimal: 'var(--glass-color-success)',
+      stateAttention: 'var(--glass-color-warning)',
+      stateInformational: 'var(--glass-color-primary)',
+      neutralBackground: 'var(--glass-gray-50)',
+      neutralForeground: 'var(--glass-gray-800)',
+      neutralBorder: 'var(--glass-gray-200)',
+      neutralSurface: 'var(--glass-white)'
     },
     glass: {
       light: createGlassStyle$1({
@@ -34608,7 +34674,7 @@ const GlassChartComponent = /*#__PURE__*/forwardRef((_ref, ref) => {
           style: {
             marginTop: '4px',
             fontSize: '10px',
-            color: 'rgba(255, 255, 255, 0.6)',
+            color: 'rgba(var(--glass-color-white) / var(--glass-opacity-60))',
             fontStyle: 'italic'
           },
           "data-adaptation-indicator": "true",
@@ -48105,7 +48171,7 @@ const usePhysicsAnimation = options => ({
   applyOscillation: intensity => {},
   applyPopIn: () => {}
 });
-const useChartPhysicsInteraction = (chartRef, wrapperRef, options) => ({
+const useChartPhysicsInteraction$1 = (chartRef, wrapperRef, options) => ({
   isPanning: false,
   zoomLevel: 1,
   applyZoom: level => {},
@@ -48142,10 +48208,10 @@ const LegendItem = dt.div(_templateObject7$4 || (_templateObject7$4 = _taggedTem
 const LegendColor = dt.div(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  border-radius: 2px;\n  background-color: ", ";\n  opacity: ", ";\n"])), props => props.$color || '#6366F1', props => props.$active ? 1 : 0.3);
 const LegendLabel = dt.span(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n  font-size: var(--typography-body-size);\n  color: ", ";\n"])), props => props.$active ? 'var(--glass-text-primary)' : 'var(--glass-text-secondary)');
 const DynamicTooltip = dt.div(_templateObject0$3 || (_templateObject0$3 = _taggedTemplateLiteral(["\n  position: absolute;\n  background: var(--glass-overlay-bg);\n  backdrop-filter: var(--glass-backdrop-blur);\n  border-radius: 6px;\n  padding: 12px;\n  pointer-events: none;\n  z-index: 1000;\n  border: 1px solid var(--glass-border-default);\n  box-shadow: var(--glass-elev-2);\n"])));
-const TooltipHeader = dt.div(_templateObject1$3 || (_templateObject1$3 = _taggedTemplateLiteral(["\n  font-weight: var(--typography-heading-weight);\n  margin-bottom: 8px;\n  color: ", ";\n"])), props => props.$color || '#ffffff');
+const TooltipHeader = dt.div(_templateObject1$3 || (_templateObject1$3 = _taggedTemplateLiteral(["\n  font-weight: var(--typography-heading-weight);\n  margin-bottom: 8px;\n  color: ", ";\n"])), props => props.$color || 'var(--glass-white)');
 const TooltipRow = dt.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 4px;\n"])));
 const TooltipLabel = dt.span(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n  color: var(--glass-text-secondary);\n  font-size: var(--typography-body-size);\n"])));
-const TooltipValue = dt.span(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: ", ";\n"])), props => props.$highlighted ? '#ffffff' : glassTokenUtils.getSurface('neutral', 'level1').text.primary, props => props.$highlighted ? '600' : '400');
+const TooltipValue = dt.span(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: ", ";\n"])), props => props.$highlighted ? 'var(--glass-white)' : glassTokenUtils.getSurface('neutral', 'level1').text.primary, props => props.$highlighted ? '600' : '400');
 // Register required Chart.js components
 Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, RadialLinearScale, plugin_tooltip, plugin_legend, index);
 // Custom SVG path animation plugin
@@ -48204,8 +48270,8 @@ if (defaults !== null && defaults !== void 0 && defaults.font) {
   defaults.font.family = "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
 }
 // Set colors safely
-defaults.color = '${glassStyles.text?.secondary || "rgba(255, 255, 255, 0.7)"}';
-defaults.borderColor = '${glassStyles.surface?.base || "rgba(255, 255, 255, 0.1)"}';
+defaults.color = '${glassStyles.text?.secondary || "rgba(var(--glass-color-white) / var(--glass-opacity-70))"}';
+defaults.borderColor = '${glassStyles.surface?.base || "var(--glass-bg-default)"}';
 /**
  * Register required Chart.js components
  */
@@ -48293,7 +48359,7 @@ const zoomControlsStyle = createGlassStyle$1({
   elevation: "level2"
 });
 const zoomLevelStyle = {
-  color: '${glassStyles.text?.primary || "rgba(255, 255, 255, 0.9)"}',
+  color: '${glassStyles.text?.primary || "rgba(var(--glass-color-white) / var(--glass-opacity-90))"}',
   fontSize: 'var(--typography-caption-size)',
   padding: '0 8px',
   minWidth: '40px',
@@ -48402,8 +48468,8 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
       showYGrid: true,
       showXLabels: true,
       showYLabels: true,
-      axisColor: '${glassStyles.borderColor || "rgba(255, 255, 255, 0.3)"}',
-      gridColor: '${glassStyles.surface?.base || "rgba(255, 255, 255, 0.1)"}',
+      axisColor: '${glassStyles.borderColor || "var(--glass-bg-hover)"}',
+      gridColor: '${glassStyles.surface?.base || "var(--glass-bg-default)"}',
       gridStyle: 'solid'
     },
     initialSelection,
@@ -48413,17 +48479,17 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
     // primary
     '#8B5CF6',
     // secondary
-    '#3B82F6',
+    'var(--glass-color-primary)',
     // blue
-    '#10B981',
+    'var(--glass-color-success)',
     // green
-    '#F59E0B',
+    'var(--glass-color-warning)',
     // yellow
-    '#EF4444',
+    'var(--glass-color-danger)',
     // red
     '#EC4899',
     // pink
-    '#6B7280' // gray
+    'var(--glass-gray-500)' // gray
     ],
     allowTypeSwitch = true,
     borderRadius = 12,
@@ -48493,7 +48559,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
     zoomLevel,
     applyZoom,
     resetZoom
-  } = useChartPhysicsInteraction(chartRef, chartWrapperRef, {
+  } = useChartPhysicsInteraction$1(chartRef, chartWrapperRef, {
     enabled: interaction.zoomPanEnabled || false,
     mode: interaction.zoomMode || 'xy',
     physics: {
@@ -48654,7 +48720,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
   // Memoized hex to RGB conversion function
   const hexToRgb = useCallback(hex => {
     // Provide a default color if hex is undefined
-    const safeHex = hex || '#FFFFFF';
+    const safeHex = hex || 'var(--glass-white)';
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(safeHex);
     return result ? "".concat(parseInt(result === null || result === void 0 ? void 0 : result[1], 16), ", ").concat(parseInt(result === null || result === void 0 ? void 0 : result[2], 16), ", ").concat(parseInt(result === null || result === void 0 ? void 0 : result[3], 16)) : '255, 255, 255';
   }, []);
@@ -48669,7 +48735,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
       return {
         id: dataset.id,
         label: dataset.label,
-        color: color || '#FFFFFF',
+        color: color || 'var(--glass-white)',
         rgbColor,
         isActive,
         index
@@ -48744,7 +48810,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
           const key = "".concat(datasetIndex, "_").concat(dataIndex);
           setElementAnimationTargets(prev => {
             var _physicsOptions$click, _physicsOptions$click2, _physicsOptions$click3, _physicsOptions$click4;
-            return new Map(prev).set(key, _objectSpread2(_objectSpread2({}, prev.get(key)), {}, {
+            return new Map(prev).set(key, _objectSpread2(_objectSpread2({}, prev.get(key) || {}), {}, {
               targetScale: (_physicsOptions$click = (_physicsOptions$click2 = physicsOptions.clickEffect) === null || _physicsOptions$click2 === void 0 ? void 0 : _physicsOptions$click2.scale) !== null && _physicsOptions$click !== void 0 ? _physicsOptions$click : 1,
               targetOpacity: (_physicsOptions$click3 = (_physicsOptions$click4 = physicsOptions.clickEffect) === null || _physicsOptions$click4 === void 0 ? void 0 : _physicsOptions$click4.opacity) !== null && _physicsOptions$click3 !== void 0 ? _physicsOptions$click3 : 1
               // Add other effects
@@ -48803,7 +48869,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
         if (physicsOptions !== null && physicsOptions !== void 0 && physicsOptions.hoverEffect) {
           setElementAnimationTargets(prev => {
             var _physicsOptions$hover, _physicsOptions$hover2, _physicsOptions$hover3, _physicsOptions$hover4;
-            return new Map(prev).set(currentHoveredKey, _objectSpread2(_objectSpread2({}, prev.get(currentHoveredKey)), {}, {
+            return new Map(prev).set(currentHoveredKey, _objectSpread2(_objectSpread2({}, prev.get(currentHoveredKey) || {}), {}, {
               targetScale: (_physicsOptions$hover = (_physicsOptions$hover2 = physicsOptions.hoverEffect) === null || _physicsOptions$hover2 === void 0 ? void 0 : _physicsOptions$hover2.scale) !== null && _physicsOptions$hover !== void 0 ? _physicsOptions$hover : 1,
               targetOpacity: (_physicsOptions$hover3 = (_physicsOptions$hover4 = physicsOptions.hoverEffect) === null || _physicsOptions$hover4 === void 0 ? void 0 : _physicsOptions$hover4.opacity) !== null && _physicsOptions$hover3 !== void 0 ? _physicsOptions$hover3 : 1
               // Add other effects
@@ -48847,7 +48913,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
     // Reset animation targets for previously hovered element if it's different
     // Only reset if physics hover effects are enabled
     if (interaction.physicsHoverEffects && previousHoveredKey && previousHoveredKey !== currentHoveredKey) {
-      setElementAnimationTargets(prev => new Map(prev).set(previousHoveredKey, _objectSpread2(_objectSpread2({}, prev.get(previousHoveredKey)), {}, {
+      setElementAnimationTargets(prev => new Map(prev).set(previousHoveredKey, _objectSpread2(_objectSpread2({}, prev.get(previousHoveredKey) || {}), {}, {
         targetScale: 1,
         targetOpacity: 1
         // Reset other effects
@@ -48937,12 +49003,12 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
       exportContext.textBaseline = 'middle';
       if (title) {
         exportContext.font = "bold ".concat(16 * devicePixelRatio, "px Inter, sans-serif");
-        exportContext.fillStyle = '#ffffff';
+        exportContext.fillStyle = 'var(--glass-white)';
         exportContext.fillText(title, exportCanvas.width / 2, 25 * devicePixelRatio);
       }
       if (subtitle) {
         exportContext.font = "".concat(14 * devicePixelRatio, "px Inter, sans-serif");
-        exportContext.fillStyle = '${glassStyles.text?.secondary || "rgba(255, 255, 255, 0.7)"}';
+        exportContext.fillStyle = '${glassStyles.text?.secondary || "rgba(var(--glass-color-white) / var(--glass-opacity-70))"}';
         exportContext.fillText(subtitle, exportCanvas.width / 2, title ? 45 * devicePixelRatio : 25 * devicePixelRatio);
       }
     }
@@ -49081,7 +49147,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
         top: "".concat((_hoveredPoint$y = hoveredPoint.y) !== null && _hoveredPoint$y !== void 0 ? _hoveredPoint$y : 0, "px")
       },
       children: [jsx(TooltipHeader, {
-        "$color": ((_hoveredPoint$value = hoveredPoint.value) === null || _hoveredPoint$value === void 0 ? void 0 : _hoveredPoint$value.color) || '#FFFFFF',
+        "$color": ((_hoveredPoint$value = hoveredPoint.value) === null || _hoveredPoint$value === void 0 ? void 0 : _hoveredPoint$value.color) || 'var(--glass-white)',
         children: ((_hoveredPoint$value2 = hoveredPoint.value) === null || _hoveredPoint$value2 === void 0 ? void 0 : _hoveredPoint$value2.dataset) || 'Data'
       }), jsxs(TooltipRow, {
         children: [jsxs(TooltipLabel, {
@@ -49106,7 +49172,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
       content: jsxs("div", {
         children: [jsx("div", {
           style: {
-            color: ((_hoveredPoint$value6 = hoveredPoint.value) === null || _hoveredPoint$value6 === void 0 ? void 0 : _hoveredPoint$value6.color) || '#FFFFFF'
+            color: ((_hoveredPoint$value6 = hoveredPoint.value) === null || _hoveredPoint$value6 === void 0 ? void 0 : _hoveredPoint$value6.color) || 'var(--glass-white)'
           },
           children: String((_hoveredPoint$value$d = (_hoveredPoint$value7 = hoveredPoint.value) === null || _hoveredPoint$value7 === void 0 ? void 0 : _hoveredPoint$value7.dataset) !== null && _hoveredPoint$value$d !== void 0 ? _hoveredPoint$value$d : 'Dataset')
         }), jsxs("div", {
@@ -50089,10 +50155,10 @@ const GlassColorSchemeGenerator = _ref => {
     }
     return _objectSpread2(_objectSpread2({}, colors), {}, {
       neutral: hslToHex(h, 10, 50),
-      success: '#10b981',
-      warning: '#f59e0b',
-      error: '#ef4444',
-      info: '#3b82f6',
+      success: 'var(--glass-color-success)',
+      warning: 'var(--glass-color-warning)',
+      error: 'var(--glass-color-danger)',
+      info: 'var(--glass-color-primary)',
       background: hslToHex(h, 20, 5),
       surface: hslToHex(h, 15, 10),
       text: hslToHex(h, 10, 95)
@@ -51241,7 +51307,7 @@ const GlassMindMap = _ref => {
     const lines = [];
     const addConnection = (fromNode, toNode) => {
       const connection = connections.find(c => c.from === fromNode.id && c.to === toNode.id);
-      const color = (connection === null || connection === void 0 ? void 0 : connection.color) || '#ffffff40';
+      const color = (connection === null || connection === void 0 ? void 0 : connection.color) || 'var(--glass-white)40';
       const strokeDasharray = (connection === null || connection === void 0 ? void 0 : connection.type) === 'dashed' ? '5,5' : (connection === null || connection === void 0 ? void 0 : connection.type) === 'dotted' ? '2,2' : 'none';
       lines.push(jsx("line", {
         x1: fromNode.position.x + 50,
@@ -51324,8 +51390,8 @@ const GlassMindMap = _ref => {
               width: nodeSize,
               height: nodeHeight,
               rx: "8",
-              fill: node.color || '#ffffff20',
-              stroke: isSelected ? '#ffffff60' : '#ffffff30',
+              fill: node.color || 'var(--glass-white)20',
+              stroke: isSelected ? 'var(--glass-white)60' : 'var(--glass-white)30',
               strokeWidth: isSelected ? '2' : '1'
             });
             break;
@@ -51334,8 +51400,8 @@ const GlassMindMap = _ref => {
             const centerY = node.position.y + nodeHeight / 2;
             shapeElement = jsx("polygon", {
               points: "".concat(centerX, ",").concat(centerY - nodeHeight / 2, " ").concat(centerX + nodeSize / 2, ",").concat(centerY, " ").concat(centerX, ",").concat(centerY + nodeHeight / 2, " ").concat(centerX - nodeSize / 2, ",").concat(centerY),
-              fill: node.color || '#ffffff20',
-              stroke: isSelected ? '#ffffff60' : '#ffffff30',
+              fill: node.color || 'var(--glass-white)20',
+              stroke: isSelected ? 'var(--glass-white)60' : 'var(--glass-white)30',
               strokeWidth: isSelected ? '2' : '1'
             });
             break;
@@ -51345,8 +51411,8 @@ const GlassMindMap = _ref => {
               cx: node.position.x + nodeSize / 2,
               cy: node.position.y + nodeHeight / 2,
               r: Math.min(nodeSize, nodeHeight) / 2,
-              fill: node.color || '#ffffff20',
-              stroke: isSelected ? '#ffffff60' : '#ffffff30',
+              fill: node.color || 'var(--glass-white)20',
+              stroke: isSelected ? 'var(--glass-white)60' : 'var(--glass-white)30',
               strokeWidth: isSelected ? '2' : '1'
             });
         }
@@ -51400,7 +51466,7 @@ const GlassMindMap = _ref => {
           cx: (node.position.x + 160) / 3,
           cy: (node.position.y + 120) / 3,
           r: "2",
-          fill: "#ffffff60"
+          fill: "var(--glass-white)60"
         }, "mini-".concat(node.id)))
       })
     }), jsx("div", {
@@ -51428,7 +51494,7 @@ const GlassMindMap = _ref => {
             orient: "auto",
             children: jsx("polygon", {
               points: "0 0, 10 3.5, 0 7",
-              fill: "#ffffff40"
+              fill: "var(--glass-white)40"
             })
           })
         }), renderConnections(), renderNodes()]
@@ -51486,7 +51552,7 @@ const useMindMap = initialData => {
   };
 };
 
-const defaultColors = ['#ffffff', '#000000', '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
+const defaultColors = ['var(--glass-white)', 'var(--glass-black)', '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
 const defaultTools = ['pen', 'eraser', 'rectangle', 'circle', 'line', 'text', 'select'];
 const GlassWhiteboard = _ref => {
   let {
@@ -51506,7 +51572,7 @@ const GlassWhiteboard = _ref => {
     onColorChange
   } = _ref;
   const [currentTool, setCurrentTool] = useState('pen');
-  const [currentColor, setCurrentColor] = useState('#000000');
+  const [currentColor, setCurrentColor] = useState('var(--glass-black)');
   const [brushSize, setBrushSize] = useState(2);
   const [opacity, setOpacity] = useState(1);
   const [isDrawing, setIsDrawing] = useState(false);
@@ -51570,7 +51636,7 @@ const GlassWhiteboard = _ref => {
         id: "path-".concat(Date.now(), "-").concat(Math.random()),
         tool: currentTool,
         points: [pos],
-        color: currentTool === 'eraser' ? '#ffffff' : currentColor,
+        color: currentTool === 'eraser' ? 'var(--glass-white)' : currentColor,
         width: brushSize,
         opacity,
         timestamp: Date.now()
@@ -51671,7 +51737,7 @@ const GlassWhiteboard = _ref => {
     ctx.clearRect(0, 0, width, height);
     switch (backgroundPattern) {
       case 'grid':
-        ctx.strokeStyle = '#ffffff10';
+        ctx.strokeStyle = 'var(--glass-white)10';
         ctx.lineWidth = 1;
         for (let x = 0; x < width; x += 20) {
           ctx.beginPath();
@@ -51687,7 +51753,7 @@ const GlassWhiteboard = _ref => {
         }
         break;
       case 'dots':
-        ctx.fillStyle = '#ffffff20';
+        ctx.fillStyle = 'var(--glass-white)20';
         for (let x = 20; x < width; x += 20) {
           for (let y = 20; y < height; y += 20) {
             ctx.beginPath();
@@ -51697,7 +51763,7 @@ const GlassWhiteboard = _ref => {
         }
         break;
       case 'lines':
-        ctx.strokeStyle = '#ffffff10';
+        ctx.strokeStyle = 'var(--glass-white)10';
         ctx.lineWidth = 1;
         for (let y = 0; y < height; y += 40) {
           ctx.beginPath();
@@ -51773,7 +51839,7 @@ const GlassWhiteboard = _ref => {
       var _element$points3;
       const element = drawingData.find(item => (item === null || item === void 0 ? void 0 : item.id) === elementId);
       if (!element) return;
-      ctx.strokeStyle = '#ffffff';
+      ctx.strokeStyle = 'var(--glass-white)';
       ctx.lineWidth = 2;
       ctx.setLineDash([5, 5]);
       if ('points' in element && (((_element$points3 = element.points) === null || _element$points3 === void 0 ? void 0 : _element$points3.length) || 0) > 0) {
@@ -51827,7 +51893,7 @@ const GlassWhiteboard = _ref => {
     drawSelection(ctx);
     // Draw selection box
     if (selectionBox && isSelecting) {
-      overlayCtx.strokeStyle = '#ffffff80';
+      overlayCtx.strokeStyle = 'var(--glass-white)80';
       overlayCtx.lineWidth = 1;
       overlayCtx.setLineDash([5, 5]);
       overlayCtx.strokeRect(selectionBox.x, selectionBox.y, selectionBox.width, selectionBox.height);
@@ -57082,7 +57148,7 @@ const FilterGroupContent = _ref2 => {
 const _excluded$10 = ["elements", "loop"];
 const DEFAULT_OPTIONS$4 = {
   enabled: true,
-  color: 'rgba(59, 130, 246, 0.5)',
+  color: 'var(--glass-color-primary, 0.5)',
   width: 2,
   blur: 4,
   spread: 2,
@@ -57362,7 +57428,7 @@ const ACCESSIBILITY = {
   focusRing: {
     width: '2px',
     style: 'solid',
-    color: 'rgba(59, 130, 246, 0.5)',
+    color: 'var(--glass-color-primary, 0.5)',
     offset: '2px'
   },
   // Reduced motion
@@ -58686,7 +58752,7 @@ const GlassGradientPicker = _ref => {
   const [selectedType, setSelectedType] = useState('linear');
   const [angle, setAngle] = useState(45);
   const [stops, setStops] = useState([{
-    color: '#3b82f6',
+    color: 'var(--glass-color-primary)',
     position: 0
   }, {
     color: '#8b5cf6',
@@ -58781,7 +58847,7 @@ const GlassGradientPicker = _ref => {
   const handleAddStop = useCallback(() => {
     if (stops.length >= maxStops) return;
     const newStop = {
-      color: '#ffffff',
+      color: 'var(--glass-white)',
       position: 50
     };
     setStops(prev => [...prev, newStop]);
@@ -58842,7 +58908,7 @@ const GlassGradientPicker = _ref => {
     setSelectedType('linear');
     setAngle(45);
     setStops([{
-      color: '#3b82f6',
+      color: 'var(--glass-color-primary)',
       position: 0
     }, {
       color: '#8b5cf6',
@@ -60891,7 +60957,7 @@ function GlassSpotlight(_ref) {
     width: targetRect.width + pad * 2,
     height: targetRect.height + pad * 2,
     borderRadius: 12,
-    boxShadow: '0 0 0 9999px rgba(0,0,0,0.6)',
+    boxShadow: '0 0 0 9999px var(--glass-text-tertiary-dark)',
     pointerEvents: 'none'
   };
   return jsx("div", {
@@ -61080,10 +61146,10 @@ const GlassThemeSwitcher = _ref => {
   const [selectedTheme, setSelectedTheme] = useState(currentTheme);
   const [showCustomizer, setShowCustomizer] = useState(false);
   const [customColors, setCustomColors] = useState({
-    primary: '#3b82f6',
+    primary: 'var(--glass-color-primary)',
     secondary: '#64748b',
-    background: '#ffffff',
-    text: '#000000'
+    background: 'var(--glass-white)',
+    text: 'var(--glass-black)'
   });
   // System theme options
   const systemThemes = [{
@@ -61091,20 +61157,20 @@ const GlassThemeSwitcher = _ref => {
     name: 'Light',
     icon: Sun,
     preview: {
-      primary: '#3b82f6',
+      primary: 'var(--glass-color-primary)',
       secondary: '#64748b',
-      background: '#ffffff',
-      text: '#000000'
+      background: 'var(--glass-white)',
+      text: 'var(--glass-black)'
     }
   }, {
     id: 'dark',
     name: 'Dark',
     icon: Moon,
     preview: {
-      primary: '#60a5fa',
+      primary: 'var(--glass-color-primary-light)',
       secondary: '#94a3b8',
       background: '#0f172a',
-      text: '#ffffff'
+      text: 'var(--glass-white)'
     }
   }, ...(enableSystemTheme ? [{
     id: 'system',
@@ -61342,7 +61408,7 @@ const CursorGlow = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       size = 280,
       intensity = 0.6,
-      color = '#ffffff',
+      color = 'var(--glass-white)',
       opacity = 0.18,
       global = true,
       respectMotionPreference = true,
@@ -61728,7 +61794,7 @@ const GlassThemeDemo = /*#__PURE__*/forwardRef((_ref, ref) => {
             style: {
               marginTop: '16px',
               marginBottom: '16px',
-              borderTop: '1px solid rgba(0,0,0,0.1)'
+              borderTop: '1px solid rgba(var(--glass-color-black) / var(--glass-opacity-10))'
             }
           }), jsx(Typography, {
             children: "Below divider"
@@ -66847,9 +66913,9 @@ const DynamicAtmosphere = /*#__PURE__*/forwardRef((props, ref) => {
       type = 'subtle',
       primaryColor = '#6366F1',
       // Primary (purple)
-      secondaryColor = '#3B82F6',
+      secondaryColor = 'var(--glass-color-primary)',
       // Secondary (blue)
-      accentColor = '#10B981',
+      accentColor = 'var(--glass-color-success)',
       // Accent (green)
       intensity = 0.5,
       speed = 1,
@@ -67030,7 +67096,7 @@ const DimensionalGlass = /*#__PURE__*/forwardRef((_ref, ref) => {
       dynamicShadow = true,
       animate = false,
       zIndex = 1,
-      backgroundColor = 'rgba(255, 255, 255, 0.1)',
+      backgroundColor = 'var(--glass-bg-default)',
       maxTilt = 5,
       hoverScale = 1.02,
       animationConfig,
@@ -67227,7 +67293,7 @@ const FrostedGlass = /*#__PURE__*/forwardRef((_ref, ref) => {
       interactive = true,
       padding = 16,
       intensity = 0.5,
-      frostColor = 'rgba(255, 255, 255, 0.8)',
+      frostColor = 'rgba(var(--glass-color-white) / var(--glass-opacity-80))',
       animate = true,
       pattern = 'noise',
       backgroundColor,
@@ -67334,10 +67400,10 @@ const FrostedGlass = /*#__PURE__*/forwardRef((_ref, ref) => {
       interactive && ['cursor-pointer', 'hover:-translate-y-0.5', 'active:translate-y-0'],
       // Glow effect
       glowColor && {
-        'primary': 'drop-shadow-[0_0_18px_rgba(59,130,246,0.28)]',
-        'success': 'drop-shadow-[0_0_18px_rgba(16,185,129,0.28)]',
-        'warning': 'drop-shadow-[0_0_18px_rgba(245,158,11,0.28)]',
-        'danger': 'drop-shadow-[0_0_18px_rgba(239,68,68,0.28)]',
+        'primary': 'drop-shadow-[0_0_18px_var(--glass-color-primary,0.28)]',
+        'success': 'drop-shadow-[0_0_18px_var(--glass-color-success,0.28)]',
+        'warning': 'drop-shadow-[0_0_18px_var(--glass-color-warning,0.28)]',
+        'danger': 'drop-shadow-[0_0_18px_var(--glass-color-danger,0.28)]',
         'info': 'drop-shadow-[0_0_18px_rgba(14,165,233,0.28)]'
       }[glowColor], className),
       style: _objectSpread2({
@@ -67828,7 +67894,7 @@ var _templateObject$g, _templateObject2$d, _templateObject3$a, _templateObject4$
 const gradientShift = mt(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n  0% {\n    background-position: 0% 50%;\n  }\n  50% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n"])));
 const cloudMove = mt(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(-5%) translateY(0);\n  }\n  50% {\n    transform: translateX(5%) translateY(-3%);\n  }\n  100% {\n    transform: translateX(-5%) translateY(0);\n  }\n"])));
 // Default gradient colors
-const defaultGradientColors = ['rgba(59, 130, 246, 0.5)',
+const defaultGradientColors = ['var(--glass-color-primary, 0.5)',
 // Blue
 'rgba(99, 102, 241, 0.5)',
 // Indigo
@@ -67978,7 +68044,7 @@ const ParticleBackgroundComponent = (props, ref) => {
       className,
       style,
       baseColor = 'rgba(10, 10, 20, 0.8)',
-      particleColor = 'rgba(255, 255, 255, 0.7)',
+      particleColor = 'rgba(var(--glass-color-white) / var(--glass-opacity-70))',
       particleCount = 50,
       particleSize = 2,
       particleSpeed = 1,
@@ -68014,7 +68080,7 @@ const ParticleBackgroundComponent = (props, ref) => {
   const actualCount = (_ref = count !== null && count !== void 0 ? count : particleCount) !== null && _ref !== void 0 ? _ref : 50;
   const actualSize = (_ref2 = size !== null && size !== void 0 ? size : particleSize) !== null && _ref2 !== void 0 ? _ref2 : 2;
   const actualSpeed = (_ref3 = speed !== null && speed !== void 0 ? speed : particleSpeed) !== null && _ref3 !== void 0 ? _ref3 : 1;
-  const actualColor = (_ref4 = color !== null && color !== void 0 ? color : particleColor) !== null && _ref4 !== void 0 ? _ref4 : 'rgba(255, 255, 255, 0.7)';
+  const actualColor = (_ref4 = color !== null && color !== void 0 ? color : particleColor) !== null && _ref4 !== void 0 ? _ref4 : 'rgba(var(--glass-color-white) / var(--glass-opacity-70))';
   // Helper function to get color values
   const getColorValues = colorStr => {
     if (colorStr.startsWith('rgba(')) {
@@ -69703,7 +69769,7 @@ const DefaultEndIcon = () => jsx("svg", {
 });
 // Styled components
 const TreeItemRoot = dt.li(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  outline: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));
-const TreeItemContent = dt.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: ", ";\n  border-radius: 4px;\n  cursor: ", ";\n  user-select: none;\n  transition: background-color 0.2s ease;\n  color: ", ";\n\n  /* Selected state */\n  background-color: ", ";\n\n  /* Focused state */\n  ", "\n\n  /* Accessible focus ring */\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ", 0 0 0 6px rgba(59, 130, 246, 0.15);\n  }\n\n  /* Glass hover effect */\n  ", "\n"])), props => props.$size === 'small' ? '4px 8px' : props.$size === 'large' ? '8px 16px' : '6px 12px', props => props.$disabled ? 'default' : 'pointer', props => props.$disabled ? 'rgba(255, 255, 255, 0.5)' : props.$selected ? 'var(--tree-view-color, ${glassStyles.text?.primary || "rgba(255, 255, 255, 0.9)"})' : 'rgba(255, 255, 255, 0.8)', props => props.$selected ? 'rgba(255, 255, 255, 0.08)' : 'transparent', props => props.$focused && !props.$disabled && "\n    outline: 1px dashed var(--tree-view-color, ".concat(AURA_GLASS.surfaces.neutral.level2.text.primary, ");\n  "), AURA_GLASS.surfaces.neutral.level2.border.color, props => !props.$disabled && "\n    &:hover {\n      background-color: ".concat(props.$glass ? '${glassStyles.surface?.base || "rgba(255, 255, 255, 0.05)"}' : 'rgba(255, 255, 255, 0.04)', ";\n    }\n  "));
+const TreeItemContent = dt.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: ", ";\n  border-radius: 4px;\n  cursor: ", ";\n  user-select: none;\n  transition: background-color 0.2s ease;\n  color: ", ";\n\n  /* Selected state */\n  background-color: ", ";\n\n  /* Focused state */\n  ", "\n\n  /* Accessible focus ring */\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ", 0 0 0 6px var(--glass-color-primary, 0.15);\n  }\n\n  /* Glass hover effect */\n  ", "\n"])), props => props.$size === 'small' ? '4px 8px' : props.$size === 'large' ? '8px 16px' : '6px 12px', props => props.$disabled ? 'default' : 'pointer', props => props.$disabled ? 'var(--glass-border-hover)' : props.$selected ? 'var(--tree-view-color, ${glassStyles.text?.primary || "rgba(var(--glass-color-white) / var(--glass-opacity-90))"})' : 'rgba(var(--glass-color-white) / var(--glass-opacity-80))', props => props.$selected ? 'rgba(255, 255, 255, 0.08)' : 'transparent', props => props.$focused && !props.$disabled && "\n    outline: 1px dashed var(--tree-view-color, ".concat(AURA_GLASS.surfaces.neutral.level2.text.primary, ");\n  "), AURA_GLASS.surfaces.neutral.level2.border.color, props => !props.$disabled && "\n    &:hover {\n      background-color: ".concat(props.$glass ? '${glassStyles.surface?.base || "rgba(255, 255, 255, 0.05)"}' : 'rgba(255, 255, 255, 0.04)', ";\n    }\n  "));
 const ContentLabel = dt.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  flex: 1;\n  margin-left: 4px;\n"])));
 const IconContainer = dt.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 4px;\n"])));
 const TreeItemChildren = dt.ul(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  padding-left: 16px;\n  overflow: hidden;\n"])));
@@ -70059,7 +70125,7 @@ function FocusIndicatorComponent(props, ref) {
     });
     // Add blur for glow + glass
     if (finalFocusStyle === 'glow' && glass) {
-      style.backdropFilter = 'blur(4px)';
+      style.backdropFilter = 'blur(var(--glass-blur-sm))';
     }
     return style;
   }, [componentStyle, animatedValues, finalFocusStyle, finalColor, finalHighContrast, glass]);
@@ -70399,7 +70465,7 @@ const getStateColor = (state, color) => {
     case 'focus':
       return "rgba(".concat(userColor, ", 0.2)");
     case 'disabled':
-      return '${glassStyles.surface?.base || "rgba(255, 255, 255, 0.1)"}';
+      return '${glassStyles.surface?.base || "var(--glass-bg-default)"}';
     case 'loading':
       return "rgba(".concat(userColor, ", 0.2)");
     case 'success':
@@ -70979,7 +71045,7 @@ const getCookie$2 = name => {
   }
   return null;
 };
-const StyledCompactCookieNotice = dt.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  position: fixed;\n  z-index: 1000;\n  padding: 0.75rem 1rem;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  box-sizing: border-box;\n  width: auto;\n  max-width: 100%;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  will-change: transform, opacity;\n\n  ", "\n\n  ", "\n  \n  ", "\n  \n  @media (max-width: 600px) {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.75rem;\n\n    ", "\n  }\n"])), _ref => {
+const StyledCompactCookieNotice = dt.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  position: fixed;\n  z-index: 1000;\n  padding: 0.75rem 1rem;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  box-sizing: border-box;\n  width: auto;\n  max-width: 100%;\n  box-shadow: 0 2px 10px rgba(var(--glass-color-black) / var(--glass-opacity-10));\n  will-change: transform, opacity;\n\n  ", "\n\n  ", "\n  \n  ", "\n  \n  @media (max-width: 600px) {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.75rem;\n\n    ", "\n  }\n"])), _ref => {
   let {
     $position
   } = _ref;
@@ -71009,7 +71075,7 @@ const StyledCompactCookieNotice = dt.div(_templateObject$2 || (_templateObject$2
     return "".concat(key.replace(/([A-Z])/g, '-$1').toLowerCase(), ":").concat(value, ";");
   }).join('');
 }, _ref3 => {
-  return "\n    border: 1px solid rgba(255, 255, 255, 0.25);\n  ";
+  return "\n    border: 1px solid var(--glass-bg-default);\n  ";
 }, _ref4 => {
   let {
     $position
@@ -71764,8 +71830,8 @@ const GlassLinkButton = /*#__PURE__*/forwardRef((_ref, ref) => {
         borderRadius: 'inherit',
         padding: '1px',
         background: '/* Use createGlassStyle({ intent: "neutral", elevation: "level3" }) */',
-        mask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
-        WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
+        mask: 'linear-gradient(var(--glass-black) 0 0) content-box, linear-gradient(var(--glass-black) 0 0)',
+        WebkitMask: 'linear-gradient(var(--glass-black) 0 0) content-box, linear-gradient(var(--glass-black) 0 0)',
         WebkitMaskComposite: 'xor',
         maskComposite: 'exclude',
         opacity: 0.8
@@ -72324,7 +72390,7 @@ function GlassPrismComparison() {
           className: "text-primary/50 text-lg",
           children: [jsx(motion.span, {
             animate: {
-              color: ["#ffffff", "#00f5ff", "#ffffff"]
+              color: ["var(--glass-white)", "#00f5ff", "var(--glass-white)"]
             },
             transition: {
               duration: 2,
@@ -72789,7 +72855,7 @@ const GlassWipeSliderComponent = _ref => {
         left: "".concat(position, "%"),
         transform: 'translateX(-50%)'
       }), {}, {
-        boxShadow: isDragging || isHovered ? '0 0 20px ${glassStyles.borderColor || "rgba(59, 130, 246, 0.6)"}' : '0 0 10px ${glassStyles.borderColor || "rgba(255, 255, 255, 0.3)"}'
+        boxShadow: isDragging || isHovered ? '0 0 20px ${glassStyles.borderColor || "var(--glass-color-primary, 0.6)"}' : '0 0 10px ${glassStyles.borderColor || "var(--glass-bg-hover)"}'
       }),
       children: [jsx("div", {
         className: cn("absolute inset-0", isVertical ? "bg-gradient-to-t from-transparent via-white/20 to-transparent" : "bg-gradient-to-r from-transparent via-white/20 to-transparent")
@@ -72822,7 +72888,7 @@ const GlassWipeSliderComponent = _ref => {
         scale: 0.95
       },
       animate: {
-        boxShadow: isDragging || isFocused ? '0 0 30px ${glassStyles.borderColor || "rgba(59, 130, 246, 0.6)"}' : isHovered ? '0 0 25px rgba(255, 255, 255, 0.4)' : '0 0 20px ${glassStyles.borderColor || "rgba(255, 255, 255, 0.3)"}'
+        boxShadow: isDragging || isFocused ? '0 0 30px ${glassStyles.borderColor || "var(--glass-color-primary, 0.6)"}' : isHovered ? '0 0 25px var(--glass-border-default)' : '0 0 20px ${glassStyles.borderColor || "var(--glass-bg-hover)"}'
       }
     })), {}, {
       transition: getTransition(duration / 1000),
@@ -73153,7 +73219,7 @@ const MotionAwareGlass = /*#__PURE__*/forwardRef((_ref, ref) => {
       return {
         hover: {
           backgroundColor: '/* Use createGlassStyle({ intent: "neutral", elevation: "level2" }) */',
-          borderColor: 'rgba(255, 255, 255, 0.25)',
+          borderColor: 'var(--glass-bg-default)',
           transition: {
             duration: 0.001
           }
@@ -73163,7 +73229,7 @@ const MotionAwareGlass = /*#__PURE__*/forwardRef((_ref, ref) => {
     return {
       hover: {
         backgroundColor: '/* Use createGlassStyle({ intent: "neutral", elevation: "level2" }) */',
-        borderColor: 'rgba(255, 255, 255, 0.25)',
+        borderColor: 'var(--glass-bg-default)',
         y: -2,
         transition: {
           duration: 0.2
@@ -74462,7 +74528,7 @@ function useGlassOptimization() {
       }),
       focus: _objectSpread2(_objectSpread2({}, baseStyles), {}, {
         outline: 'none',
-        boxShadow: "".concat(baseStyles.boxShadow, ", 0 0 0 3px rgba(59, 130, 246, 0.3)")
+        boxShadow: "".concat(baseStyles.boxShadow, ", 0 0 0 3px var(--glass-color-primary, 0.3)")
       }),
       disabled: _objectSpread2(_objectSpread2({}, baseStyles), {}, {
         opacity: 0.5,
@@ -74649,6 +74715,53 @@ function useAdaptiveComponentLoading(heavyComponent, lightComponent) {
   };
 }
 
+/**
+ * Enhanced hook for detecting user's reduced motion preference.
+ *
+ * This hook monitors the user's system-level preference for reduced motion
+ * and updates reactively when the preference changes. It's SSR-safe and
+ * provides more granular control compared to the basic `useReducedMotion` hook.
+ *
+ * @returns {boolean} True if the user prefers reduced motion, false otherwise
+ *
+ * @example
+ * ```tsx
+ * function AnimatedComponent() {
+ *   const prefersReducedMotion = useEnhancedReducedMotion();
+ *
+ *   return (
+ *     <motion.div
+ *       animate={{ opacity: 1 }}
+ *       transition={{ duration: prefersReducedMotion ? 0 : 0.3 }}
+ *     >
+ *       Content
+ *     </motion.div>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link useReducedMotion} for a simpler version
+ */
+function useEnhancedReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+    // SSR-safe initialization
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  });
+  useEffect(() => {
+    // Guard against SSR
+    if (typeof window === 'undefined') return;
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = event => {
+      setPrefersReducedMotion(event.matches);
+    };
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+  return prefersReducedMotion;
+}
+
 const _excluded$5 = ["loadMore", "hasMore", "isLoading"];
 /**
  * High-performance virtualization hook for large datasets
@@ -75154,6 +75267,354 @@ function useTableVirtualization(data, options) {
   };
 }
 
+/**
+ * Hook for accessing device capabilities and information.
+ *
+ * This hook wraps the device detection utility and provides React state management
+ * for device information. It's SSR-safe and provides a reload function for
+ * refreshing device detection when needed.
+ *
+ * @returns Object containing device information and reload function
+ *
+ * @example
+ * ```tsx
+ * function ResponsiveComponent() {
+ *   const { deviceInfo, reload } = useDeviceCapabilities();
+ *
+ *   return (
+ *     <div>
+ *       <p>Device Type: {deviceInfo.type}</p>
+ *       <p>Performance Tier: {deviceInfo.performance.tier}</p>
+ *       <button onClick={reload}>Refresh Detection</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+function useDeviceCapabilities() {
+  const [deviceInfo, setDeviceInfo] = useState(() => {
+    // SSR-safe initialization with defaults
+    if (typeof window === 'undefined') {
+      return {
+        type: 'unknown',
+        os: 'unknown',
+        browser: 'Unknown',
+        capabilities: {
+          touch: false,
+          multiTouch: false,
+          hover: false,
+          pointer: false,
+          gpu: false,
+          webgl: false,
+          webgl2: false,
+          hardwareAcceleration: false,
+          highDPI: false,
+          vibration: false,
+          geolocation: false,
+          camera: false,
+          microphone: false,
+          speakers: false,
+          bluetooth: false,
+          usb: false
+        },
+        performance: {
+          memory: 4,
+          cores: 4,
+          clockSpeed: 2000,
+          battery: false,
+          network: 'unknown',
+          storage: 'medium',
+          tier: 'medium'
+        },
+        screen: {
+          width: 1920,
+          height: 1080,
+          pixelRatio: 1,
+          orientation: 'landscape',
+          colorDepth: 24,
+          refreshRate: 60,
+          touchScreen: false,
+          ppi: 96
+        },
+        input: {
+          keyboard: true,
+          mouse: true,
+          touch: false,
+          stylus: false,
+          gamepad: false,
+          microphone: false,
+          camera: false
+        }
+      };
+    }
+    return detectDevice();
+  });
+  // Detect device on mount (client-side only)
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const info = detectDevice();
+    setDeviceInfo(info);
+  }, []);
+  // Provide a reload function to refresh device detection
+  const reload = useCallback(() => {
+    if (typeof window === 'undefined') return;
+    const info = refreshDeviceDetection();
+    setDeviceInfo(info);
+  }, []);
+  return {
+    deviceInfo,
+    reload
+  };
+}
+
+const isRecord = value => typeof value === 'object' && value !== null;
+const getScaleAxis = (scale, scaleId) => {
+  if (isRecord(scale)) {
+    const {
+      axis
+    } = scale;
+    if (axis === 'x' || axis === 'y') {
+      return axis;
+    }
+  }
+  const fallback = scaleId.charAt(0).toLowerCase();
+  return fallback === 'x' || fallback === 'y' ? fallback : null;
+};
+const hasNumericRange = scale => {
+  if (!isRecord(scale)) {
+    return false;
+  }
+  const {
+    min,
+    max
+  } = scale;
+  return typeof min === 'number' && typeof max === 'number' && Number.isFinite(min) && Number.isFinite(max);
+};
+const axisMatchesMode = (axis, mode) => mode === 'xy' || mode === axis;
+/**
+ * Hook for physics-based chart interactions (zoom/pan)
+ *
+ * Provides smooth, physics-based zoom and pan interactions for Chart.js charts
+ * with configurable spring physics and constraints.
+ *
+ * @param chartRef - Reference to the Chart.js instance
+ * @param wrapperRef - Reference to the chart wrapper element
+ * @param options - Configuration options for interactions
+ *
+ * @returns Object containing interaction state and control functions
+ *
+ * @example
+ * ```tsx
+ * function PhysicsChart() {
+ *   const chartRef = useRef<ChartJS>(null);
+ *   const wrapperRef = useRef<HTMLDivElement>(null);
+ *
+ *   const { isPanning, zoomLevel, applyZoom, resetZoom } = useChartPhysicsInteraction(
+ *     chartRef,
+ *     wrapperRef,
+ *     {
+ *       enabled: true,
+ *       mode: 'xy',
+ *       minZoom: 0.5,
+ *       maxZoom: 5,
+ *     }
+ *   );
+ *
+ *   return (
+ *     <div ref={wrapperRef}>
+ *       <Chart ref={chartRef} {...chartProps} />
+ *       <button onClick={resetZoom}>Reset</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+function useChartPhysicsInteraction(chartRef, wrapperRef) {
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const {
+    enabled = false,
+    mode = 'xy',
+    physics = {
+      tension: 300,
+      friction: 30,
+      mass: 1
+    },
+    minZoom = 0.5,
+    maxZoom = 5,
+    wheelSensitivity = 0.1,
+    inertiaDuration = 500,
+    respectReducedMotion = true
+  } = options;
+  const [isPanning, setIsPanning] = useState(false);
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const panStartRef = useRef(null);
+  const velocityRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const lastPosRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const animationFrameRef = useRef(null);
+  /**
+   * Apply zoom with physics constraints
+   */
+  const applyZoom = useCallback(level => {
+    if (!enabled || !chartRef.current) return;
+    // Clamp zoom level
+    const clampedLevel = Math.max(minZoom, Math.min(maxZoom, level));
+    setZoomLevel(clampedLevel);
+    const chart = chartRef.current;
+    // Apply zoom transformations to chart scales
+    if (chart.options.scales) {
+      Object.keys(chart.options.scales).forEach(scaleId => {
+        const scale = chart.options.scales[scaleId];
+        if (!scale) return;
+        const axis = getScaleAxis(scale, scaleId);
+        if (!axis || !axisMatchesMode(axis, mode)) return;
+        // Only apply zoom to enabled axes based on mode
+        if (!hasNumericRange(scale)) return;
+        const range = scale.max - scale.min;
+        const center = (scale.max + scale.min) / 2;
+        const newRange = range / clampedLevel;
+        scale.min = center - newRange / 2;
+        scale.max = center + newRange / 2;
+      });
+    }
+    chart.update('none');
+  }, [enabled, chartRef, minZoom, maxZoom, mode]);
+  /**
+   * Reset zoom to default level
+   */
+  const resetZoom = useCallback(() => {
+    applyZoom(1);
+  }, [applyZoom]);
+  /**
+   * Handle wheel events for zooming
+   */
+  const handleWheel = useCallback(event => {
+    if (!enabled || !chartRef.current) return;
+    event.preventDefault();
+    const delta = -event.deltaY * wheelSensitivity;
+    const newZoom = zoomLevel * (1 + delta);
+    applyZoom(newZoom);
+  }, [enabled, chartRef, wheelSensitivity, zoomLevel, applyZoom]);
+  /**
+   * Handle mouse down for panning
+   */
+  const handleMouseDown = useCallback(event => {
+    if (!enabled || !chartRef.current) return;
+    setIsPanning(true);
+    panStartRef.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    lastPosRef.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    velocityRef.current = {
+      x: 0,
+      y: 0
+    };
+  }, [enabled, chartRef]);
+  /**
+   * Handle mouse move for panning
+   */
+  const handleMouseMove = useCallback(event => {
+    if (!isPanning || !panStartRef.current || !chartRef.current) return;
+    const deltaX = event.clientX - lastPosRef.current.x;
+    const deltaY = event.clientY - lastPosRef.current.y;
+    // Update velocity for inertia
+    velocityRef.current = {
+      x: deltaX,
+      y: deltaY
+    };
+    const chart = chartRef.current;
+    // Apply pan transformations to chart scales
+    if (chart.options.scales) {
+      Object.keys(chart.options.scales).forEach(scaleId => {
+        var _wrapperRef$current, _wrapperRef$current2;
+        const scale = chart.options.scales[scaleId];
+        if (!scale) return;
+        const axis = getScaleAxis(scale, scaleId);
+        if (!axis || !axisMatchesMode(axis, mode)) return;
+        // Only pan enabled axes based on mode
+        if (!hasNumericRange(scale)) return;
+        const range = scale.max - scale.min;
+        const panAmount = axis === 'x' ? -(deltaX / (((_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.offsetWidth) || 1)) * range : deltaY / (((_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.offsetHeight) || 1) * range;
+        scale.min += panAmount;
+        scale.max += panAmount;
+      });
+      chart.update('none');
+    }
+    lastPosRef.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }, [isPanning, chartRef, mode, wrapperRef]);
+  /**
+   * Handle mouse up to end panning with inertia
+   */
+  const handleMouseUp = useCallback(() => {
+    if (!isPanning) return;
+    setIsPanning(false);
+    panStartRef.current = null;
+    // Apply inertia if enabled
+    if (!respectReducedMotion) {
+      const applyInertia = () => {
+        const {
+          x,
+          y
+        } = velocityRef.current;
+        if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
+          // Inertia complete
+          if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+          }
+          return;
+        }
+        // Apply friction
+        velocityRef.current.x *= 0.95;
+        velocityRef.current.y *= 0.95;
+        // Continue animation
+        animationFrameRef.current = requestAnimationFrame(applyInertia);
+      };
+      applyInertia();
+    }
+  }, [isPanning, respectReducedMotion]);
+  /**
+   * Setup event listeners
+   */
+  useEffect(() => {
+    if (!enabled || !wrapperRef.current) return;
+    const wrapper = wrapperRef.current;
+    wrapper.addEventListener('wheel', handleWheel, {
+      passive: false
+    });
+    wrapper.addEventListener('mousedown', handleMouseDown);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      wrapper.removeEventListener('wheel', handleWheel);
+      wrapper.removeEventListener('mousedown', handleMouseDown);
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [enabled, wrapperRef, handleWheel, handleMouseDown, handleMouseMove, handleMouseUp]);
+  return {
+    isPanning,
+    zoomLevel,
+    applyZoom,
+    resetZoom
+  };
+}
+
 /**
  * AuraGlass Sound Design System
  * Haptic and audio feedback for glass interactions
@@ -78291,7 +78752,7 @@ const glowEffects = {
 const createGlowEffect = function () {
   let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
-    color = '#ffffff',
+    color = 'var(--glass-white)',
     intensity = 'standard',
     size = 30,
     spread = 0,
@@ -78321,22 +78782,22 @@ const hexToRgba = (hex, alpha) => {
 };
 // Predefined glow colors
 const glowColors = {
-  white: '#ffffff',
-  blue: '#3b82f6',
+  white: 'var(--glass-white)',
+  blue: 'var(--glass-color-primary)',
   indigo: '#6366f1',
   purple: '#8b5cf6',
   pink: '#ec4899',
-  red: '#ef4444',
+  red: 'var(--glass-color-danger)',
   orange: '#f97316',
-  amber: '#f59e0b',
+  amber: 'var(--glass-color-warning)',
   yellow: '#eab308',
   lime: '#84cc16',
   green: '#22c55e',
-  emerald: '#10b981',
+  emerald: 'var(--glass-color-success)',
   teal: '#14b8a6',
   cyan: '#06b6d4',
   sky: '#0ea5e9',
-  gray: '#6b7280'
+  gray: 'var(--glass-gray-500)'
 };
 // Preset glow effects
 const glowPresets = {
@@ -80198,6 +80659,19 @@ const createOrchestration = {
   }
 };
 
+// Accessible animation utilities
+const prefersReducedMotion = () => {
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+};
+const createAccessibleAnimation = animation => {
+  if (prefersReducedMotion()) {
+    return _objectSpread2(_objectSpread2({}, animation), {}, {
+      duration: 0
+    });
+  }
+  return animation;
+};
+
 /**
  * Production utilities for AuraGlass components
  * These utilities are optimized for production environments
@@ -81217,7 +81691,7 @@ class AuraGlassProduction {
     document.head.appendChild(style);
   }
   generateProductionCSS() {
-    return "\n      /* AuraGlass Production Styles */\n      .aura-glass-root {\n        --aura-animation-duration: ".concat(this.config.animations.duration, "ms;\n        --aura-animation-easing: ").concat(this.config.animations.easing, ";\n        --aura-quality-tier: ").concat(this.config.qualityTier, ";\n      }\n\n      .aura-glass-performance-low {\n        --aura-animation-duration: 200ms;\n        --aura-blur-amount: 4px;\n        --aura-particle-count: 10;\n      }\n\n      .aura-glass-performance-medium {\n        --aura-animation-duration: 300ms;\n        --aura-blur-amount: 8px;\n        --aura-particle-count: 25;\n      }\n\n      .aura-glass-performance-high {\n        --aura-animation-duration: 250ms;\n        --aura-blur-amount: 12px;\n        --aura-particle-count: 50;\n      }\n\n      .aura-glass-performance-ultra {\n        --aura-animation-duration: 200ms;\n        --aura-blur-amount: 16px;\n        --aura-particle-count: 100;\n      }\n\n      /* Reduced motion support */\n      @media (prefers-reduced-motion: reduce) {\n        .aura-glass-root * {\n          animation-duration: 0.01ms !important;\n          animation-iteration-count: 1 !important;\n          transition-duration: 0.01ms !important;\n        }\n      }\n\n      /* High contrast support */\n      @media (prefers-contrast: high) {\n        .aura-glass-surface {\n          border: 2px solid rgba(255, 255, 255, 0.8) !important;\n          background: rgba(0, 0, 0, 0.95) !important;\n        }\n      }\n    ");
+    return "\n      /* AuraGlass Production Styles */\n      .aura-glass-root {\n        --aura-animation-duration: ".concat(this.config.animations.duration, "ms;\n        --aura-animation-easing: ").concat(this.config.animations.easing, ";\n        --aura-quality-tier: ").concat(this.config.qualityTier, ";\n      }\n\n      .aura-glass-performance-low {\n        --aura-animation-duration: 200ms;\n        --aura-blur-amount: 4px;\n        --aura-particle-count: 10;\n      }\n\n      .aura-glass-performance-medium {\n        --aura-animation-duration: 300ms;\n        --aura-blur-amount: 8px;\n        --aura-particle-count: 25;\n      }\n\n      .aura-glass-performance-high {\n        --aura-animation-duration: 250ms;\n        --aura-blur-amount: 12px;\n        --aura-particle-count: 50;\n      }\n\n      .aura-glass-performance-ultra {\n        --aura-animation-duration: 200ms;\n        --aura-blur-amount: 16px;\n        --aura-particle-count: 100;\n      }\n\n      /* Reduced motion support */\n      @media (prefers-reduced-motion: reduce) {\n        .aura-glass-root * {\n          animation-duration: 0.01ms !important;\n          animation-iteration-count: 1 !important;\n          transition-duration: 0.01ms !important;\n        }\n      }\n\n      /* High contrast support */\n      @media (prefers-contrast: high) {\n        .aura-glass-surface {\n          border: 2px solid var(--glass-text-secondary) !important;\n          background: rgba(0, 0, 0, 0.95) !important;\n        }\n      }\n    ");
   }
   setupPerformanceMonitoring() {
     // Monitor component render times
@@ -81445,7 +81919,7 @@ const devUtils = process.env.NODE_ENV === 'development' ? {
     document.documentElement.classList.add('aura-glass-debug');
     const debugStyle = document.createElement('style');
     debugStyle.id = 'aura-glass-debug-styles';
-    debugStyle.textContent = "\n      .aura-glass-debug .glass-surface {\n        outline: 1px dashed rgba(255, 0, 0, 0.5) !important;\n      }\n      .aura-glass-debug .glass-surface::before {\n        content: attr(class);\n        position: absolute;\n        top: -20px;\n        left: 0;\n        font-size: 10px;\n        color: red;\n        background: rgba(0, 0, 0, 0.8);\n        padding: 2px 4px;\n        border-radius: 2px;\n        z-index: 10000;\n      }\n    ";
+    debugStyle.textContent = "\n      .aura-glass-debug .glass-surface {\n        outline: 1px dashed rgba(255, 0, 0, 0.5) !important;\n      }\n      .aura-glass-debug .glass-surface::before {\n        content: attr(class);\n        position: absolute;\n        top: -20px;\n        left: 0;\n        font-size: 10px;\n        color: red;\n        background: var(--glass-text-secondary-dark);\n        padding: 2px 4px;\n        border-radius: 2px;\n        z-index: 10000;\n      }\n    ";
     document.head.appendChild(debugStyle);
   },
   // Disable debug mode
@@ -81757,7 +82231,7 @@ const elementStyles = {
     if (info.focusable) {
       baseStyles.outline = 'none';
       baseStyles['&:focus-visible'] = {
-        outline: '2px solid rgba(59, 130, 246, 0.5)',
+        outline: '2px solid var(--glass-color-primary, 0.5)',
         outlineOffset: '2px'
       };
     }
@@ -81856,17 +82330,17 @@ const elementAccessibility = {
 const createGlassTheme = function () {
   let baseTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const defaultColors = {
-    primary: '#3b82f6',
-    secondary: '#6b7280',
+    primary: 'var(--glass-color-primary)',
+    secondary: 'var(--glass-gray-500)',
     accent: '#8b5cf6',
     background: '#0b1220',
     surface: 'rgba(255,255,255,0.06)',
     text: 'rgba(255,255,255,0.92)',
-    textSecondary: 'rgba(255,255,255,0.7)',
+    textSecondary: 'var(--glass-text-secondary)',
     border: 'rgba(255,255,255,0.16)',
-    error: '#ef4444',
-    warning: '#f59e0b',
-    success: '#10b981',
+    error: 'var(--glass-color-danger)',
+    warning: 'var(--glass-color-warning)',
+    success: 'var(--glass-color-success)',
     info: '#0ea5e9'
   };
   return _objectSpread2({
@@ -82099,39 +82573,39 @@ const mergeThemes = function () {
 const createDarkTheme = () => {
   return createGlassTheme({
     colors: {
-      primary: '#60a5fa',
-      secondary: '#9ca3af',
+      primary: 'var(--glass-color-primary-light)',
+      secondary: 'var(--glass-gray-400)',
       accent: '#a78bfa',
       background: '/* Use createGlassStyle({ intent: "primary", elevation: "level2" }) */',
       surface: 'rgba(31, 41, 55, 0.8)',
-      text: '#f9fafb',
+      text: 'var(--glass-gray-50)',
       textSecondary: 'rgba(156, 163, 175, 0.8)',
       border: 'rgba(75, 85, 99, 0.3)',
-      error: '#f87171',
-      warning: '#fbbf24',
-      success: '#34d399',
-      info: '#60a5fa'
+      error: 'var(--glass-color-danger-light)',
+      warning: 'var(--glass-color-warning-light)',
+      success: 'var(--glass-color-success-light)',
+      info: 'var(--glass-color-primary-light)'
     }
   });
 };
 const createLightTheme = () => {
   return createGlassTheme({
     colors: {
-      primary: '#3b82f6',
-      secondary: '#6b7280',
+      primary: 'var(--glass-color-primary)',
+      secondary: 'var(--glass-gray-500)',
       accent: '#8b5cf6',
       background: '/* Use createGlassStyle({ intent: "neutral", elevation: "level2" }) */',
       surface: 'rgba(249, 250, 251, 0.8)',
-      text: '#111827',
+      text: 'var(--glass-gray-900)',
       textSecondary: 'rgba(75, 85, 99, 0.7)',
       border: 'rgba(229, 231, 235, 0.5)',
-      error: '#ef4444',
-      warning: '#f59e0b',
-      success: '#10b981',
-      info: '#3b82f6'
+      error: 'var(--glass-color-danger)',
+      warning: 'var(--glass-color-warning)',
+      success: 'var(--glass-color-success)',
+      info: 'var(--glass-color-primary)'
     }
   });
 };
 
-export { AURA_GLASS, AdaptiveQuality, AtmosphericBackground, AuraGlassProduction, ChartAnimationUtils, CompactCookieNotice, CookieConsent, DimensionalGlass, DynamicAtmosphere, FocusIndicator, FrostedGlass, GalileoPhysicsSystem, GlassCore as Glass, GlassA11yAuditor, GlassAccordion, GlassAccordion as GlassAccordionUI, GlassActivityFeed, GlassAdvanced, GlassAdvancedSearch, GlassAlert, GlassAnimated, GlassAnimatedCounter, GlassAnimatedNumber, GlassAnimatedStat, GlassAnimationSequence, GlassAnimationTimeline, GlassAppShell, GlassAreaChart, GlassAsyncErrorBoundary, GlassAvatar, GlassAvatarGroup, GlassBadge, GlassBadgeLine, GlassBarChart, GlassCore as GlassBase, GlassBottomNav, GlassBottomSheet, GlassBreadcrumb, GlassButton$1 as GlassButton, GlassCalendar, GlassCard, GlassCardLink, GlassCarousel, GlassChart, GlassChartWidget, GlassChat, GlassChatInput, GlassCheckbox, GlassCheckbox as GlassCheckboxUI, GlassCoachmarks, GlassCodeEditor, GlassCodeEditorWithFiles, GlassColorPicker, GlassColorSchemeGenerator, GlassCommand, GlassCommandBar, GlassCommandPalette, GlassCommentThread, GlassComponentErrorBoundary, GlassComponentPlayground, GlassContainer, GlassContext, GlassContextMenu, GlassCore, GlassDashboard, GlassDataChart, GlassDataGrid, GlassDataGridPro, GlassDataTable, GlassDatePicker, GlassDateRangePicker, GlassDetailView, GlassDialog, GlassDiffViewer, GlassDraggable, GlassDrawer, GlassDropdownMenu, GlassErrorBoundary, GlassFab, GlassFacetSearch, GlassFileExplorer, GlassFileTree, GlassFileUpload, GlassFilterPanel, GlassFlex, GlassFocusRing, GlassForm, GlassFormBuilder, GlassFormStepper, GlassFormTable, GlassFormTemplate, GlassFormWizardSteps, GlassGallery, GlassGradientPicker, GlassGrid, GlassHeader, GlassHeatmap, GlassHoverCard, GlassImageViewer, GlassInfiniteScroll, GlassInlineEdit, GlassInput, GlassJSONViewer, GlassKPICard, GlassKanban, GlassKeyValueEditor, GlassLabel, GlassLazyImage, GlassLightErrorBoundary, GlassLineChart, GlassLinkButton, GlassListView, GlassLoadingSkeleton, GlassLocalizationProvider, GlassMasonry, GlassMentionList, GlassMenubar, GlassMessageList, GlassMetricCard, GlassMetricChip, GlassMindMap, GlassMobileNav, GlassModal, MotionFramer as GlassMotion, GlassMotionController, GlassMultiSelect, GlassMultiStepForm, GlassNavigationMenu, GlassNotificationCenter, GlassNotificationItem, GlassNotificationProvider, OptimizedGlassCore as GlassOptimized, GlassPagination, GlassPanel, GlassPieChart, GlassPopover, GlassCore as GlassPrimitive, GlassPrismComparison, GlassProgress, GlassQueryBuilder, GlassRadioGroup, GlassReactionBar, GlassResponsiveNav, GlassSchemaViewer, GlassScrollArea, GlassSearchInterface, GlassSegmentedControl, GlassSelect$1 as GlassSelect, GlassSelect as GlassSelectCompound, GlassSeparator, GlassSidebar, GlassSkeleton, GlassSkeletonAvatar, GlassSkeletonButton, GlassSkeletonCard, GlassSkeletonLoader, GlassSkeletonText, GlassSlider, GlassSparkline, GlassSplitPane, GlassSpotlight, GlassStack, GlassStatCard, GlassStatusDot, GlassStep, GlassStepIcon, GlassStepLabel, GlassStepper, GlassSwitch, GlassTabBar, GlassTabs, GlassTagInput, GlassTextarea, GlassThemeDemo, GlassThemeSwitcher, GlassTimeline, GlassToast, GlassToggle, GlassToolbar, GlassTooltip, GlassTooltipContent, GlassTooltipTrigger, GlassUserPresence, GlassVideoPlayer, GlassVirtualList, GlassVirtualTable, GlassWhiteboard, GlassWipeSlider, GlassWizard, GlassWizardTemplate, GlobalCookieConsent, HeatGlass, ImageList, ImageListItem, ImageListItemBar, InterpolationUtils, LIQUID_GLASS, MagneticButton, MemoryManager, MotionNative as Motion, MotionAwareGlass, MotionFramer, MotionNative, OptimizedGlassCore as OptimizedGlass, OptimizedGlassAdvanced, OptimizedGlassContainer, OptimizedGlassCore, PERFORMANCE_TIERS, PageGlassContainer, ParticleBackground, PerformanceMonitor$1 as PerformanceMonitor, PolyfillManager, RippleButton, SpeedDial, SpeedDialAction, SpeedDialIcon, SpringPhysics, StateIndicator, ThemeProvider, ToggleButton, ToggleButtonGroup, TreeItem, TreeView, VirtualScroller, VisualFeedback, WidgetGlass, adaptiveRendering, adjustColorOpacity, adjustOpacity, analytics, animateChart, animationPresets, browser, browserOptimizations, camelCase, capitalize, chartAnimationPresets, clamp, cn, compatibilityHelpers, createAnimationPromise, createCleanupManager, createComplexSequence, createDarkTheme, createDebouncedResizeObserver, createFadeInSequence, createFontWeightScale, createGlassDisabledMixin, createGlassFocusMixin, createGlassHoverMixin, createGlassStyle$1 as createGlassStyle, createGlassTheme, createLazyLoadMixin, createLightTheme, createMagneticEffect, createMemoryEfficientAnimation, createOptimizedScrollHandler, createOptimizedTransition, createOrchestration, createPerformanceMixin, createPlaygroundExample, createResponsiveGlassStyle, createRippleEffect, createScaleInSequence, createSlideInSequence, createSpacingScale, createSpringPreset, createSpringSequence, createThemeVariant, createTypographyScale, createVirtualizationMixin, createZSpaceLayers, css, darkenColor, data, debounce$1 as debounce, deepMerge, defaultProductionConfig, detectBrowser, detectCapabilities, detectDevice, detectDeviceCapabilities, detectElementCapabilities, dev, devUtils, deviceOptimizations, edgeHighlight, elementAccessibility, elementBehaviors, elementStyles, featureDetection, features, formatCurrency, formatDate, formatNumber$1 as formatNumber, formatPercentage, generateGlassThemeVariables, generateThemeCSSVariables, getAdaptivePerformanceConfig, getAuraGlass, getElementInfo, getElementRect, getOptimalAnimationDuration, getSpacingValue, getThemeValue, glassCSS, glassTokenUtils, glassTokens, glassUtils, glowEffects, groupBy, hexToRgba$1 as hexToRgba, initializeAuraGlass, initializeProduction, interpolate, interpolateSprings, isElementInViewport, isObject$1 as isObject, isValidEmail, isValidHexColor, isValidUrl, kebabCase, lerp, lightenColor, liquidGlassUtils, logger, memory, mergeThemes, networkOptimizations, omit, orchestrationPresets, useAnimationSequence as orchestrationUseAnimationSequence, performance$1 as performance, performanceOptimizations, performanceUtils, physicsUtils, pick, productionConfig, productionUtils, refreshDeviceDetection, renderingOptimizations, rgbaToHex, roundToDecimal, safeExecute, safeExecuteAsync, scrollToElement, sortBy, sortUtils, storage, throttle, unique, useA11yAudit, useA11yId, useAccessibilityFeature, useAccessibleAnimation, useAccessibleColors, useAdaptiveComponentLoading, useAdaptiveImageLoading, useAnimatedNumber, useAnimationSequence$1 as useAnimationSequence, useAsyncError, useCardStackZSpace, useChainReaction, useConditionalRendering, useDebouncedPerformance, useDepthNavigation, useDraggableListPhysics, useDropZones, useEnhancedPerformance, useErrorBoundary, useErrorReporting, useGalileoSprings, useGlassFocus, useGlassFocusGroup, useGlassIntersection, useGlassIntersectionAnimation, useGlassLazyImage, useGlassOptimization, useGlassPerformance, useGlassSound, useGracefulDegradation, useGridVirtualization, useInfiniteVirtualization, useItemTransitions, useLazyPerformance, useMagneticButton, useMagneticField, useMindMap, useMotionController, useMotionPreference, useMouseMagneticEffect, useMultiSpring, useNotifications, useOptimizedGlassComponent, useOrbitalMechanics, usePaginatedSortableData, useParallaxZSpace, useParticleSystem, usePerformanceAwareRendering, usePerformanceLazyLoading, usePhysicsButton, usePhysicsDrag, usePhysicsSystem, usePlaygroundExample, useProgressiveEnhancement, useProgressiveLoading, useSearchableSortableData, useSimplePhysicsHover, useSkipLinks, useSoftBodyPhysics, useSortableData, useSpringArray, useSpringColor, useSpringTransform, useTableVirtualization, useVirtualization, useWindowVirtualization, useZSpaceAnimation, validate, validateTheme, withGlassErrorBoundary, zSpaceLayer };
+export { AURA_GLASS, AdaptiveQuality, AnimationProvider, AtmosphericBackground, AuraGlassProduction, ChartAnimationUtils, CompactCookieNotice, CookieConsent, DimensionalGlass, DynamicAtmosphere, FocusIndicator, FrostedGlass, GalileoPhysicsSystem, GlassCore as Glass, GlassA11yAuditor, GlassAccordion, GlassAccordion as GlassAccordionUI, GlassActivityFeed, GlassAdvanced, GlassAdvancedSearch, GlassAlert, GlassAnimated, GlassAnimatedCounter, GlassAnimatedNumber, GlassAnimatedStat, GlassAnimationSequence, GlassAnimationTimeline, GlassAppShell, GlassAreaChart, GlassAsyncErrorBoundary, GlassAvatar, GlassAvatarGroup, GlassBadge, GlassBadgeLine, GlassBarChart, GlassCore as GlassBase, GlassBottomNav, GlassBottomSheet, GlassBreadcrumb, GlassButton$1 as GlassButton, GlassCalendar, GlassCard, GlassCardLink, GlassCarousel, GlassChart, GlassChartWidget, GlassChat, GlassChatInput, GlassCheckbox, GlassCheckbox as GlassCheckboxUI, GlassCoachmarks, GlassCodeEditor, GlassCodeEditorWithFiles, GlassColorPicker, GlassColorSchemeGenerator, GlassCommand, GlassCommandBar, GlassCommandPalette, GlassCommentThread, GlassComponentErrorBoundary, GlassComponentPlayground, GlassContainer, GlassContext, GlassContextMenu, GlassCore, GlassDashboard, GlassDataChart, GlassDataGrid, GlassDataGridPro, GlassDataTable, GlassDatePicker, GlassDateRangePicker, GlassDetailView, GlassDialog, GlassDiffViewer, GlassDraggable, GlassDrawer, GlassDropdownMenu, GlassErrorBoundary, GlassFab, GlassFacetSearch, GlassFileExplorer, GlassFileTree, GlassFileUpload, GlassFilterPanel, GlassFlex, GlassFocusRing, GlassForm, GlassFormBuilder, GlassFormStepper, GlassFormTable, GlassFormTemplate, GlassFormWizardSteps, GlassGallery, GlassGradientPicker, GlassGrid, GlassHeader, GlassHeatmap, GlassHoverCard, GlassImageViewer, GlassInfiniteScroll, GlassInlineEdit, GlassInput, GlassJSONViewer, GlassKPICard, GlassKanban, GlassKeyValueEditor, GlassLabel, GlassLazyImage, GlassLightErrorBoundary, GlassLineChart, GlassLinkButton, GlassListView, GlassLoadingSkeleton, GlassLocalizationProvider, GlassMasonry, GlassMentionList, GlassMenubar, GlassMessageList, GlassMetricCard, GlassMetricChip, GlassMindMap, GlassMobileNav, GlassModal, MotionFramer as GlassMotion, GlassMotionController, GlassMultiSelect, GlassMultiStepForm, GlassNavigationMenu, GlassNotificationCenter, GlassNotificationItem, GlassNotificationProvider, OptimizedGlassCore as GlassOptimized, GlassPagination, GlassPanel, GlassPieChart, GlassPopover, GlassCore as GlassPrimitive, GlassPrismComparison, GlassProgress, GlassQueryBuilder, GlassRadioGroup, GlassReactionBar, GlassResponsiveNav, GlassSchemaViewer, GlassScrollArea, GlassSearchInterface, GlassSegmentedControl, GlassSelect$1 as GlassSelect, GlassSelect as GlassSelectCompound, GlassSeparator, GlassSidebar, GlassSkeleton, GlassSkeletonAvatar, GlassSkeletonButton, GlassSkeletonCard, GlassSkeletonLoader, GlassSkeletonText, GlassSlider, GlassSparkline, GlassSplitPane, GlassSpotlight, GlassStack, GlassStatCard, GlassStatusDot, GlassStep, GlassStepIcon, GlassStepLabel, GlassStepper, GlassSwitch, GlassTabBar, GlassTabs, GlassTagInput, GlassTextarea, GlassThemeDemo, GlassThemeSwitcher, GlassTimeline, GlassToast, GlassToggle, GlassToolbar, GlassTooltip, GlassTooltipContent, GlassTooltipTrigger, GlassUserPresence, GlassVideoPlayer, GlassVirtualList, GlassVirtualTable, GlassWhiteboard, GlassWipeSlider, GlassWizard, GlassWizardTemplate, GlobalCookieConsent, HeatGlass, ImageList, ImageListItem, ImageListItemBar, InterpolationUtils, LIQUID_GLASS, MagneticButton, MemoryManager, MotionNative as Motion, MotionAwareGlass, MotionFramer, MotionNative, OptimizedGlassCore as OptimizedGlass, OptimizedGlassAdvanced, OptimizedGlassContainer, OptimizedGlassCore, PERFORMANCE_TIERS, PageGlassContainer, ParticleBackground, PerformanceMonitor$1 as PerformanceMonitor, PolyfillManager, RippleButton, SpeedDial, SpeedDialAction, SpeedDialIcon, SpringPhysics, SpringPresets, StateIndicator, ThemeProvider, ToggleButton, ToggleButtonGroup, TreeItem, TreeView, VirtualScroller, VisualFeedback, WidgetGlass, adaptiveRendering, adjustColorOpacity, adjustOpacity, analytics, animateChart, animationPresets, browser, browserOptimizations, camelCase, capitalize, chartAnimationPresets, clamp, cn, compatibilityHelpers, createAccessibleAnimation, createAnimationPromise, createCleanupManager, createComplexSequence, createDarkTheme, createDebouncedResizeObserver, createFadeInSequence, createFontWeightScale, createGlassDisabledMixin, createGlassFocusMixin, createGlassHoverMixin, createGlassStyle$1 as createGlassStyle, createGlassTheme, createLazyLoadMixin, createLightTheme, createMagneticEffect, createMemoryEfficientAnimation, createOptimizedScrollHandler, createOptimizedTransition, createOrchestration, createPerformanceMixin, createPlaygroundExample, createResponsiveGlassStyle, createRippleEffect, createScaleInSequence, createSlideInSequence, createSpacingScale, createSpringPreset, createSpringSequence, createThemeVariant, createTypographyScale, createVirtualizationMixin, createZSpaceLayers, css, darkenColor, data, debounce$1 as debounce, deepMerge, defaultProductionConfig, detectBrowser, detectCapabilities, detectDevice, detectDeviceCapabilities, detectElementCapabilities, dev, devUtils, deviceOptimizations, edgeHighlight, elementAccessibility, elementBehaviors, elementStyles, featureDetection, features, formatCurrency, formatDate, formatNumber$1 as formatNumber, formatPercentage, generateGlassThemeVariables, generateThemeCSSVariables, getAdaptivePerformanceConfig, getAuraGlass, getElementInfo, getElementRect, getOptimalAnimationDuration, getQualityBasedGlassParams, getQualityBasedPhysicsParams, getSpacingValue, getThemeValue, glassCSS, glassTokenUtils, glassTokens, glassUtils, glowEffects, groupBy, hexToRgba$1 as hexToRgba, initializeAuraGlass, initializeProduction, interpolate, interpolateSprings, isElementInViewport, isObject$1 as isObject, isValidEmail, isValidHexColor, isValidUrl, kebabCase, lerp, lightenColor, liquidGlassUtils, logger, memory, mergeThemes, networkOptimizations, omit, orchestrationPresets, useAnimationSequence as orchestrationUseAnimationSequence, performance$1 as performance, performanceOptimizations, performanceUtils, physicsUtils, pick, prefersReducedMotion, productionConfig, productionUtils, refreshDeviceDetection, renderingOptimizations, rgbaToHex, roundToDecimal, safeExecute, safeExecuteAsync, scrollToElement, sortBy, sortUtils, storage, throttle, unique, useA11yAudit, useA11yId, useAccessibilityFeature, useAccessibleAnimation, useAccessibleColors, useAdaptiveComponentLoading, useAdaptiveImageLoading, useAnimatedNumber, useAnimation, useAnimationSequence$1 as useAnimationSequence, useAsyncError, useGalileoStateSpring as useAuraStateSpring, useCardStackZSpace, useChainReaction, useChartPhysicsInteraction, useConditionalRendering, useDebouncedPerformance, useDepthNavigation, useDeviceCapabilities, useDraggableListPhysics, useDropZones, useEnhancedPerformance, useEnhancedReducedMotion, useErrorBoundary, useErrorReporting, useGalileoSprings, useGalileoStateSpring, useGlassFocus, useGlassFocusGroup, useGlassIntersection, useGlassIntersectionAnimation, useGlassLazyImage, useGlassOptimization, useGlassPerformance, useGlassSound, useGracefulDegradation, useGridVirtualization, useInfiniteVirtualization, useItemTransitions, useLazyPerformance, useMagneticButton, useMagneticField, useMindMap, useMotionController, useMotionPreference, useMouseMagneticEffect, useMultiSpring, useNotifications, useOptimizedGlassComponent, useOrbitalMechanics, usePaginatedSortableData, useParallaxZSpace, useParticleSystem, usePerformanceAwareRendering, usePerformanceLazyLoading, usePhysicsButton, usePhysicsDrag, usePhysicsInteraction, usePhysicsSystem, usePlaygroundExample, useProgressiveEnhancement, useProgressiveLoading, useQualityTier, useReducedMotion, useSearchableSortableData, useSimplePhysicsHover, useSkipLinks, useSoftBodyPhysics, useSortableData, useSpringArray, useSpringColor, useSpringTransform, useTableVirtualization, useTheme, useThemeProviderPresence, useThemeVariant, useVirtualization, useWindowVirtualization, useZSpaceAnimation, validate, validateTheme, withGlassErrorBoundary, zSpaceLayer };
 //# sourceMappingURL=index.mjs.map