aura-glass 2.0.2 → 2.0.4

package/dist/index.js

@@ -1203,7 +1203,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)',
@@ -1235,10 +1235,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'
         },
@@ -1267,10 +1267,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'
         },
@@ -1299,10 +1299,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'
         },
@@ -1333,15 +1333,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,
@@ -1360,22 +1360,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
         },
@@ -1392,22 +1392,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
         },
@@ -1424,22 +1424,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
         },
@@ -1456,22 +1456,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
         },
@@ -1647,15 +1647,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,
@@ -1674,22 +1674,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
         },
@@ -1706,22 +1706,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
         },
@@ -1738,22 +1738,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
         },
@@ -1770,22 +1770,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
         },
@@ -1804,15 +1804,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,
@@ -1831,22 +1831,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
         },
@@ -1863,22 +1863,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
         },
@@ -1895,22 +1895,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
         },
@@ -1927,22 +1927,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
         },
@@ -2271,7 +2271,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)',
@@ -2291,8 +2291,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)'
   },
@@ -2302,11 +2302,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
@@ -2643,7 +2643,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)'
   };
 }
 /**
@@ -3270,7 +3270,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 => {
@@ -10377,6 +10377,7 @@ const ResponsiveContext = /*#__PURE__*/React.createContext({
 });
 // ------ ThemeProvider Presence Context ------
 const ThemeProviderPresenceContext = /*#__PURE__*/React.createContext(false);
+const useThemeProviderPresence = () => React.useContext(ThemeProviderPresenceContext);
 /**
  * Unified Theme Provider Component
  *
@@ -10644,7 +10645,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');
@@ -10676,7 +10677,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;
@@ -11019,6 +11020,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 = React.useContext(ColorModeContext);
+  const themeVariantContext = React.useContext(ThemeVariantContext);
+  const styleUtilsContext = React.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 = React.useContext(ThemeVariantContext);
+  if (!context) {
+    throw new Error('useThemeVariant must be used within a ThemeProvider');
+  }
+  return context;
+};
 
 /**
  * Liquid Glass Contrast Guard System
@@ -11120,7 +11153,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 = () => {
@@ -18890,13 +18923,13 @@ const GlassSidebar = /*#__PURE__*/React.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 ? jsxRuntime.jsx(lucideReact.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
           }) : jsxRuntime.jsx(lucideReact.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
           })
         })
@@ -18956,7 +18989,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) && jsxRuntime.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, {
@@ -18970,7 +19003,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 && jsxRuntime.jsx("svg", {
@@ -19305,7 +19338,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',
@@ -19321,7 +19354,7 @@ const TabItemComponent = _ref => {
       children: label
     }), badge && jsxRuntime.jsx("span", {
       style: {
-        background: '#ef4444',
+        background: 'var(--glass-color-danger)',
         color: 'white',
         borderRadius: '10px',
         padding: '2px 6px',
@@ -19519,6 +19552,39 @@ const defaultContextValue = {
   }
 };
 const AnimationContext = /*#__PURE__*/React.createContext(defaultContextValue);
+const AnimationProvider = _ref => {
+  let {
+    children,
+    defaultReducedMotion = false,
+    defaultSpring = {
+      stiffness: 100,
+      damping: 10,
+      mass: 1
+    }
+  } = _ref;
+  const [reducedMotion, setReducedMotion] = React.useState(defaultReducedMotion);
+  // Check for prefers-reduced-motion
+  React.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 jsxRuntime.jsx(AnimationContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+};
 const useAnimation = () => {
   const context = React.useContext(AnimationContext);
   if (!context) {
@@ -22627,7 +22693,7 @@ const GlassModal = /*#__PURE__*/React.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
@@ -23994,7 +24060,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
@@ -24003,7 +24069,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,
@@ -24212,7 +24278,7 @@ const GlassColorPicker = _ref => {
                 children: [showInput && jsxRuntime.jsx(GlassInput, {
                   value: inputValue,
                   onChange: e => handleInputChange(e.target.value),
-                  placeholder: "#000000",
+                  placeholder: "var(--glass-black)",
                   className: "text-sm"
                 }), jsxRuntime.jsx("div", {
                   className: "text-xs text-primary/60 glass-mt-1",
@@ -25829,23 +25895,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 jsxRuntime.jsx("div", {
@@ -26481,7 +26547,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 => {
@@ -26515,7 +26581,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"])));
@@ -27604,8 +27670,8 @@ const GlassHeatmap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       xAxis,
       yAxis,
       colorScale = {
-        min: '#3B82F6',
-        max: '#EF4444'
+        min: 'var(--glass-color-primary)',
+        max: 'var(--glass-color-danger)'
       },
       cellSize = 20,
       cellGap = 1,
@@ -27795,7 +27861,7 @@ const GlassHeatmap = /*#__PURE__*/React.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")
@@ -28036,7 +28102,7 @@ const GlassLoadingSkeleton = /*#__PURE__*/React.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 = () => jsxRuntime.jsxs("div", {
     className: "glass-auto-gap glass-auto-gap-md",
@@ -30137,7 +30203,7 @@ const GlassAnimatedNumber = /*#__PURE__*/React.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':
@@ -31520,7 +31586,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';
@@ -32366,7 +32432,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(),
@@ -32659,7 +32725,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",
@@ -32826,7 +32892,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(),
@@ -33294,7 +33360,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(),
@@ -33492,7 +33558,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),
@@ -33664,7 +33730,7 @@ const GlassPieChart = /*#__PURE__*/React.forwardRef(function GlassPieChartCompon
       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;
@@ -33806,7 +33872,7 @@ const GlassPieChart = /*#__PURE__*/React.forwardRef(function GlassPieChartCompon
                 children: [jsxRuntime.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),
@@ -33835,8 +33901,8 @@ const GlassPieChart = /*#__PURE__*/React.forwardRef(function GlassPieChartCompon
                   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"
                 }), jsxRuntime.jsx("text", {
                   x: centerX,
@@ -34041,14 +34107,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({
@@ -34630,7 +34696,7 @@ const GlassChartComponent = /*#__PURE__*/React.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",
@@ -48127,7 +48193,7 @@ const usePhysicsAnimation = options => ({
   applyOscillation: intensity => {},
   applyPopIn: () => {}
 });
-const useChartPhysicsInteraction = (chartRef, wrapperRef, options) => ({
+const useChartPhysicsInteraction$1 = (chartRef, wrapperRef, options) => ({
   isPanning: false,
   zoomLevel: 1,
   applyZoom: level => {},
@@ -48164,10 +48230,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
@@ -48226,8 +48292,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
  */
@@ -48315,7 +48381,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',
@@ -48424,8 +48490,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,
@@ -48435,17 +48501,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,
@@ -48515,7 +48581,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: {
@@ -48676,7 +48742,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
   // Memoized hex to RGB conversion function
   const hexToRgb = React.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';
   }, []);
@@ -48691,7 +48757,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
@@ -48766,7 +48832,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
@@ -48825,7 +48891,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
@@ -48869,7 +48935,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
@@ -48959,12 +49025,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);
       }
     }
@@ -49103,7 +49169,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
         top: "".concat((_hoveredPoint$y = hoveredPoint.y) !== null && _hoveredPoint$y !== void 0 ? _hoveredPoint$y : 0, "px")
       },
       children: [jsxRuntime.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'
       }), jsxRuntime.jsxs(TooltipRow, {
         children: [jsxRuntime.jsxs(TooltipLabel, {
@@ -49128,7 +49194,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
       content: jsxRuntime.jsxs("div", {
         children: [jsxRuntime.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')
         }), jsxRuntime.jsxs("div", {
@@ -50111,10 +50177,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)
@@ -51263,7 +51329,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(jsxRuntime.jsx("line", {
         x1: fromNode.position.x + 50,
@@ -51346,8 +51412,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;
@@ -51356,8 +51422,8 @@ const GlassMindMap = _ref => {
             const centerY = node.position.y + nodeHeight / 2;
             shapeElement = jsxRuntime.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;
@@ -51367,8 +51433,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'
             });
         }
@@ -51422,7 +51488,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)))
       })
     }), jsxRuntime.jsx("div", {
@@ -51450,7 +51516,7 @@ const GlassMindMap = _ref => {
             orient: "auto",
             children: jsxRuntime.jsx("polygon", {
               points: "0 0, 10 3.5, 0 7",
-              fill: "#ffffff40"
+              fill: "var(--glass-white)40"
             })
           })
         }), renderConnections(), renderNodes()]
@@ -51508,7 +51574,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 {
@@ -51528,7 +51594,7 @@ const GlassWhiteboard = _ref => {
     onColorChange
   } = _ref;
   const [currentTool, setCurrentTool] = React.useState('pen');
-  const [currentColor, setCurrentColor] = React.useState('#000000');
+  const [currentColor, setCurrentColor] = React.useState('var(--glass-black)');
   const [brushSize, setBrushSize] = React.useState(2);
   const [opacity, setOpacity] = React.useState(1);
   const [isDrawing, setIsDrawing] = React.useState(false);
@@ -51592,7 +51658,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()
@@ -51693,7 +51759,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();
@@ -51709,7 +51775,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();
@@ -51719,7 +51785,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();
@@ -51795,7 +51861,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) {
@@ -51849,7 +51915,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);
@@ -57104,7 +57170,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,
@@ -57384,7 +57450,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
@@ -58708,7 +58774,7 @@ const GlassGradientPicker = _ref => {
   const [selectedType, setSelectedType] = React.useState('linear');
   const [angle, setAngle] = React.useState(45);
   const [stops, setStops] = React.useState([{
-    color: '#3b82f6',
+    color: 'var(--glass-color-primary)',
     position: 0
   }, {
     color: '#8b5cf6',
@@ -58803,7 +58869,7 @@ const GlassGradientPicker = _ref => {
   const handleAddStop = React.useCallback(() => {
     if (stops.length >= maxStops) return;
     const newStop = {
-      color: '#ffffff',
+      color: 'var(--glass-white)',
       position: 50
     };
     setStops(prev => [...prev, newStop]);
@@ -58864,7 +58930,7 @@ const GlassGradientPicker = _ref => {
     setSelectedType('linear');
     setAngle(45);
     setStops([{
-      color: '#3b82f6',
+      color: 'var(--glass-color-primary)',
       position: 0
     }, {
       color: '#8b5cf6',
@@ -60913,7 +60979,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 jsxRuntime.jsx("div", {
@@ -61102,10 +61168,10 @@ const GlassThemeSwitcher = _ref => {
   const [selectedTheme, setSelectedTheme] = React.useState(currentTheme);
   const [showCustomizer, setShowCustomizer] = React.useState(false);
   const [customColors, setCustomColors] = React.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 = [{
@@ -61113,20 +61179,20 @@ const GlassThemeSwitcher = _ref => {
     name: 'Light',
     icon: lucideReact.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: lucideReact.Moon,
     preview: {
-      primary: '#60a5fa',
+      primary: 'var(--glass-color-primary-light)',
       secondary: '#94a3b8',
       background: '#0f172a',
-      text: '#ffffff'
+      text: 'var(--glass-white)'
     }
   }, ...(enableSystemTheme ? [{
     id: 'system',
@@ -61364,7 +61430,7 @@ const CursorGlow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       size = 280,
       intensity = 0.6,
-      color = '#ffffff',
+      color = 'var(--glass-white)',
       opacity = 0.18,
       global = true,
       respectMotionPreference = true,
@@ -61750,7 +61816,7 @@ const GlassThemeDemo = /*#__PURE__*/React.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))'
             }
           }), jsxRuntime.jsx(Typography, {
             children: "Below divider"
@@ -66869,9 +66935,9 @@ const DynamicAtmosphere = /*#__PURE__*/React.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,
@@ -67052,7 +67118,7 @@ const DimensionalGlass = /*#__PURE__*/React.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,
@@ -67249,7 +67315,7 @@ const FrostedGlass = /*#__PURE__*/React.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,
@@ -67356,10 +67422,10 @@ const FrostedGlass = /*#__PURE__*/React.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({
@@ -67850,7 +67916,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
@@ -68000,7 +68066,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,
@@ -68036,7 +68102,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(')) {
@@ -69725,7 +69791,7 @@ const DefaultEndIcon = () => jsxRuntime.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"])));
@@ -70081,7 +70147,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]);
@@ -70421,7 +70487,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':
@@ -71001,7 +71067,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;
@@ -71031,7 +71097,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
@@ -71786,8 +71852,8 @@ const GlassLinkButton = /*#__PURE__*/React.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
@@ -72346,7 +72412,7 @@ function GlassPrismComparison() {
           className: "text-primary/50 text-lg",
           children: [jsxRuntime.jsx(framerMotion.motion.span, {
             animate: {
-              color: ["#ffffff", "#00f5ff", "#ffffff"]
+              color: ["var(--glass-white)", "#00f5ff", "var(--glass-white)"]
             },
             transition: {
               duration: 2,
@@ -72811,7 +72877,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: [jsxRuntime.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")
@@ -72844,7 +72910,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),
@@ -73175,7 +73241,7 @@ const MotionAwareGlass = /*#__PURE__*/React.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
           }
@@ -73185,7 +73251,7 @@ const MotionAwareGlass = /*#__PURE__*/React.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
@@ -74484,7 +74550,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,
@@ -74671,6 +74737,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] = React.useState(() => {
+    // SSR-safe initialization
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  });
+  React.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
@@ -75176,6 +75289,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] = React.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)
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const info = detectDevice();
+    setDeviceInfo(info);
+  }, []);
+  // Provide a reload function to refresh device detection
+  const reload = React.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] = React.useState(false);
+  const [zoomLevel, setZoomLevel] = React.useState(1);
+  const panStartRef = React.useRef(null);
+  const velocityRef = React.useRef({
+    x: 0,
+    y: 0
+  });
+  const lastPosRef = React.useRef({
+    x: 0,
+    y: 0
+  });
+  const animationFrameRef = React.useRef(null);
+  /**
+   * Apply zoom with physics constraints
+   */
+  const applyZoom = React.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 = React.useCallback(() => {
+    applyZoom(1);
+  }, [applyZoom]);
+  /**
+   * Handle wheel events for zooming
+   */
+  const handleWheel = React.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 = React.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 = React.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 = React.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
+   */
+  React.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
@@ -78313,7 +78774,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,
@@ -78343,22 +78804,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 = {
@@ -80220,6 +80681,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
@@ -81239,7 +81713,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
@@ -81467,7 +81941,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
@@ -81779,7 +82253,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'
       };
     }
@@ -81878,17 +82352,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({
@@ -82121,42 +82595,43 @@ 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)'
     }
   });
 };
 
 exports.AURA_GLASS = AURA_GLASS;
 exports.AdaptiveQuality = AdaptiveQuality;
+exports.AnimationProvider = AnimationProvider;
 exports.AtmosphericBackground = AtmosphericBackground;
 exports.AuraGlassProduction = AuraGlassProduction;
 exports.ChartAnimationUtils = ChartAnimationUtils;
@@ -82372,6 +82847,7 @@ exports.SpeedDial = SpeedDial;
 exports.SpeedDialAction = SpeedDialAction;
 exports.SpeedDialIcon = SpeedDialIcon;
 exports.SpringPhysics = SpringPhysics;
+exports.SpringPresets = SpringPresets;
 exports.StateIndicator = StateIndicator;
 exports.ThemeProvider = ThemeProvider;
 exports.ToggleButton = ToggleButton;
@@ -82395,6 +82871,7 @@ exports.chartAnimationPresets = chartAnimationPresets;
 exports.clamp = clamp;
 exports.cn = cn;
 exports.compatibilityHelpers = compatibilityHelpers;
+exports.createAccessibleAnimation = createAccessibleAnimation;
 exports.createAnimationPromise = createAnimationPromise;
 exports.createCleanupManager = createCleanupManager;
 exports.createComplexSequence = createComplexSequence;
@@ -82458,6 +82935,8 @@ exports.getAuraGlass = getAuraGlass;
 exports.getElementInfo = getElementInfo;
 exports.getElementRect = getElementRect;
 exports.getOptimalAnimationDuration = getOptimalAnimationDuration;
+exports.getQualityBasedGlassParams = getQualityBasedGlassParams;
+exports.getQualityBasedPhysicsParams = getQualityBasedPhysicsParams;
 exports.getSpacingValue = getSpacingValue;
 exports.getThemeValue = getThemeValue;
 exports.glassCSS = glassCSS;
@@ -82492,6 +82971,7 @@ exports.performanceOptimizations = performanceOptimizations;
 exports.performanceUtils = performanceUtils;
 exports.physicsUtils = physicsUtils;
 exports.pick = pick;
+exports.prefersReducedMotion = prefersReducedMotion;
 exports.productionConfig = productionConfig;
 exports.productionUtils = productionUtils;
 exports.refreshDeviceDetection = refreshDeviceDetection;
@@ -82514,19 +82994,25 @@ exports.useAccessibleColors = useAccessibleColors;
 exports.useAdaptiveComponentLoading = useAdaptiveComponentLoading;
 exports.useAdaptiveImageLoading = useAdaptiveImageLoading;
 exports.useAnimatedNumber = useAnimatedNumber;
+exports.useAnimation = useAnimation;
 exports.useAnimationSequence = useAnimationSequence$1;
 exports.useAsyncError = useAsyncError;
+exports.useAuraStateSpring = useGalileoStateSpring;
 exports.useCardStackZSpace = useCardStackZSpace;
 exports.useChainReaction = useChainReaction;
+exports.useChartPhysicsInteraction = useChartPhysicsInteraction;
 exports.useConditionalRendering = useConditionalRendering;
 exports.useDebouncedPerformance = useDebouncedPerformance;
 exports.useDepthNavigation = useDepthNavigation;
+exports.useDeviceCapabilities = useDeviceCapabilities;
 exports.useDraggableListPhysics = useDraggableListPhysics;
 exports.useDropZones = useDropZones;
 exports.useEnhancedPerformance = useEnhancedPerformance;
+exports.useEnhancedReducedMotion = useEnhancedReducedMotion;
 exports.useErrorBoundary = useErrorBoundary;
 exports.useErrorReporting = useErrorReporting;
 exports.useGalileoSprings = useGalileoSprings;
+exports.useGalileoStateSpring = useGalileoStateSpring;
 exports.useGlassFocus = useGlassFocus;
 exports.useGlassFocusGroup = useGlassFocusGroup;
 exports.useGlassIntersection = useGlassIntersection;
@@ -82557,10 +83043,13 @@ exports.usePerformanceAwareRendering = usePerformanceAwareRendering;
 exports.usePerformanceLazyLoading = usePerformanceLazyLoading;
 exports.usePhysicsButton = usePhysicsButton;
 exports.usePhysicsDrag = usePhysicsDrag;
+exports.usePhysicsInteraction = usePhysicsInteraction;
 exports.usePhysicsSystem = usePhysicsSystem;
 exports.usePlaygroundExample = usePlaygroundExample;
 exports.useProgressiveEnhancement = useProgressiveEnhancement;
 exports.useProgressiveLoading = useProgressiveLoading;
+exports.useQualityTier = useQualityTier;
+exports.useReducedMotion = useReducedMotion;
 exports.useSearchableSortableData = useSearchableSortableData;
 exports.useSimplePhysicsHover = useSimplePhysicsHover;
 exports.useSkipLinks = useSkipLinks;
@@ -82570,6 +83059,9 @@ exports.useSpringArray = useSpringArray;
 exports.useSpringColor = useSpringColor;
 exports.useSpringTransform = useSpringTransform;
 exports.useTableVirtualization = useTableVirtualization;
+exports.useTheme = useTheme;
+exports.useThemeProviderPresence = useThemeProviderPresence;
+exports.useThemeVariant = useThemeVariant;
 exports.useVirtualization = useVirtualization;
 exports.useWindowVirtualization = useWindowVirtualization;
 exports.useZSpaceAnimation = useZSpaceAnimation;