npm - aura-glass - Versions diffs - 2.0.2 → 2.0.3 - Mend

aura-glass 2.0.2 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1117) hide show

package/dist/index.mjs CHANGED Viewed

@@ -1181,7 +1181,7 @@ const AURA_GLASS = {
           px: 12
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(59,130,246,0.15) 50%, rgba(147,51,234,0.08) 100%)'
+          base: 'linear-gradient(135deg, rgba(255,255,255,0.35) 0%, var(--glass-color-primary,0.15) 50%, rgba(147,51,234,0.08) 100%)'
         },
         border: {
           color: 'rgba(255,255,255,0.5)',
@@ -1213,10 +1213,10 @@ const AURA_GLASS = {
           px: 16
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(59,130,246,0.2) 50%, rgba(147,51,234,0.12) 100%)'
+          base: 'linear-gradient(135deg, rgba(255,255,255,0.4) 0%, var(--glass-color-primary,0.2) 50%, rgba(147,51,234,0.12) 100%)'
         },
         border: {
-          color: 'rgba(255,255,255,0.6)',
+          color: 'var(--glass-text-tertiary)',
           width: 2,
           style: 'solid'
         },
@@ -1245,10 +1245,10 @@ const AURA_GLASS = {
           px: 20
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(59,130,246,0.25) 50%, rgba(147,51,234,0.15) 100%)'
+          base: 'linear-gradient(135deg, rgba(255,255,255,0.5) 0%, var(--glass-color-primary,0.25) 50%, rgba(147,51,234,0.15) 100%)'
         },
         border: {
-          color: 'rgba(255,255,255,0.7)',
+          color: 'var(--glass-text-secondary)',
           width: 2,
           style: 'solid'
         },
@@ -1277,10 +1277,10 @@ const AURA_GLASS = {
           px: 24
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(59,130,246,0.3) 50%, rgba(147,51,234,0.2) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-text-tertiary) 0%, var(--glass-color-primary,0.3) 50%, rgba(147,51,234,0.2) 100%)'
         },
         border: {
-          color: 'rgba(255,255,255,0.8)',
+          color: 'var(--glass-text-secondary)',
           width: 3,
           style: 'solid'
         },
@@ -1311,15 +1311,15 @@ const AURA_GLASS = {
           px: 8
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(59,130,246,0.3) 0%, rgba(29,78,216,0.2) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-primary,0.3) 0%, rgba(29,78,216,0.2) 100%)'
         },
         border: {
-          color: 'rgba(59,130,246,0.5)',
+          color: 'var(--glass-color-primary,0.5)',
           width: 1,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(59,130,246,0.15)',
+          color: 'var(--glass-color-primary,0.15)',
           x: 0,
           y: 4,
           blur: 16,
@@ -1338,22 +1338,22 @@ const AURA_GLASS = {
           px: 12
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(59,130,246,0.4) 0%, rgba(29,78,216,0.25) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-primary,0.4) 0%, rgba(29,78,216,0.25) 100%)'
         },
         border: {
-          color: 'rgba(59,130,246,0.6)',
+          color: 'var(--glass-color-primary,0.6)',
           width: 1,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(59,130,246,0.2)',
+          color: 'var(--glass-color-primary,0.2)',
           x: 0,
           y: 8,
           blur: 24,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(59,130,246,0.2)',
+          color: 'var(--glass-color-primary,0.2)',
           spread: 0,
           blur: 8
         },
@@ -1370,22 +1370,22 @@ const AURA_GLASS = {
           px: 16
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(59,130,246,0.5) 0%, rgba(29,78,216,0.35) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-primary,0.5) 0%, rgba(29,78,216,0.35) 100%)'
         },
         border: {
-          color: 'rgba(59,130,246,0.7)',
+          color: 'var(--glass-color-primary,0.7)',
           width: 2,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(59,130,246,0.25)',
+          color: 'var(--glass-color-primary,0.25)',
           x: 0,
           y: 12,
           blur: 32,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(59,130,246,0.25)',
+          color: 'var(--glass-color-primary,0.25)',
           spread: 1,
           blur: 12
         },
@@ -1402,22 +1402,22 @@ const AURA_GLASS = {
           px: 20
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(59,130,246,0.6) 0%, rgba(29,78,216,0.45) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-primary,0.6) 0%, rgba(29,78,216,0.45) 100%)'
         },
         border: {
-          color: 'rgba(59,130,246,0.8)',
+          color: 'var(--glass-color-primary,0.8)',
           width: 2,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(59,130,246,0.3)',
+          color: 'var(--glass-color-primary,0.3)',
           x: 0,
           y: 16,
           blur: 40,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(59,130,246,0.3)',
+          color: 'var(--glass-color-primary,0.3)',
           spread: 1,
           blur: 16
         },
@@ -1434,22 +1434,22 @@ const AURA_GLASS = {
           px: 24
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(59,130,246,0.7) 0%, rgba(29,78,216,0.5) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-primary,0.7) 0%, rgba(29,78,216,0.5) 100%)'
         },
         border: {
-          color: 'rgba(59,130,246,0.9)',
+          color: 'var(--glass-color-primary,0.9)',
           width: 3,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(59,130,246,0.35)',
+          color: 'var(--glass-color-primary,0.35)',
           x: 0,
           y: 20,
           blur: 48,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(59,130,246,0.35)',
+          color: 'var(--glass-color-primary,0.35)',
           spread: 2,
           blur: 20
         },
@@ -1625,15 +1625,15 @@ const AURA_GLASS = {
           px: 8
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(245,158,11,0.25) 0%, rgba(217,119,6,0.18) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-warning,0.25) 0%, rgba(217,119,6,0.18) 100%)'
         },
         border: {
-          color: 'rgba(245,158,11,0.4)',
+          color: 'var(--glass-color-warning,0.4)',
           width: 1,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(245,158,11,0.12)',
+          color: 'var(--glass-color-warning,0.12)',
           x: 0,
           y: 4,
           blur: 16,
@@ -1652,22 +1652,22 @@ const AURA_GLASS = {
           px: 12
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(245,158,11,0.3) 0%, rgba(217,119,6,0.22) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-warning,0.3) 0%, rgba(217,119,6,0.22) 100%)'
         },
         border: {
-          color: 'rgba(245,158,11,0.5)',
+          color: 'var(--glass-color-warning,0.5)',
           width: 1,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(245,158,11,0.15)',
+          color: 'var(--glass-color-warning,0.15)',
           x: 0,
           y: 8,
           blur: 24,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(245,158,11,0.15)',
+          color: 'var(--glass-color-warning,0.15)',
           spread: 0,
           blur: 8
         },
@@ -1684,22 +1684,22 @@ const AURA_GLASS = {
           px: 16
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(245,158,11,0.4) 0%, rgba(217,119,6,0.28) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-warning,0.4) 0%, rgba(217,119,6,0.28) 100%)'
         },
         border: {
-          color: 'rgba(245,158,11,0.6)',
+          color: 'var(--glass-color-warning,0.6)',
           width: 2,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(245,158,11,0.18)',
+          color: 'var(--glass-color-warning,0.18)',
           x: 0,
           y: 12,
           blur: 32,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(245,158,11,0.18)',
+          color: 'var(--glass-color-warning,0.18)',
           spread: 1,
           blur: 12
         },
@@ -1716,22 +1716,22 @@ const AURA_GLASS = {
           px: 20
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(245,158,11,0.5) 0%, rgba(217,119,6,0.35) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-warning,0.5) 0%, rgba(217,119,6,0.35) 100%)'
         },
         border: {
-          color: 'rgba(245,158,11,0.7)',
+          color: 'var(--glass-color-warning,0.7)',
           width: 2,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(245,158,11,0.22)',
+          color: 'var(--glass-color-warning,0.22)',
           x: 0,
           y: 16,
           blur: 40,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(245,158,11,0.22)',
+          color: 'var(--glass-color-warning,0.22)',
           spread: 1,
           blur: 16
         },
@@ -1748,22 +1748,22 @@ const AURA_GLASS = {
           px: 24
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(245,158,11,0.6) 0%, rgba(217,119,6,0.4) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-warning,0.6) 0%, rgba(217,119,6,0.4) 100%)'
         },
         border: {
-          color: 'rgba(245,158,11,0.8)',
+          color: 'var(--glass-color-warning,0.8)',
           width: 3,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(245,158,11,0.25)',
+          color: 'var(--glass-color-warning,0.25)',
           x: 0,
           y: 20,
           blur: 48,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(245,158,11,0.25)',
+          color: 'var(--glass-color-warning,0.25)',
           spread: 2,
           blur: 20
         },
@@ -1782,15 +1782,15 @@ const AURA_GLASS = {
           px: 8
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(239,68,68,0.25) 0%, rgba(220,38,38,0.18) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-danger,0.25) 0%, rgba(220,38,38,0.18) 100%)'
         },
         border: {
-          color: 'rgba(239,68,68,0.4)',
+          color: 'var(--glass-color-danger,0.4)',
           width: 1,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(239,68,68,0.12)',
+          color: 'var(--glass-color-danger,0.12)',
           x: 0,
           y: 4,
           blur: 16,
@@ -1809,22 +1809,22 @@ const AURA_GLASS = {
           px: 12
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(239,68,68,0.3) 0%, rgba(220,38,38,0.22) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-danger,0.3) 0%, rgba(220,38,38,0.22) 100%)'
         },
         border: {
-          color: 'rgba(239,68,68,0.5)',
+          color: 'var(--glass-color-danger,0.5)',
           width: 1,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(239,68,68,0.15)',
+          color: 'var(--glass-color-danger,0.15)',
           x: 0,
           y: 8,
           blur: 24,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(239,68,68,0.15)',
+          color: 'var(--glass-color-danger,0.15)',
           spread: 0,
           blur: 8
         },
@@ -1841,22 +1841,22 @@ const AURA_GLASS = {
           px: 16
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(239,68,68,0.4) 0%, rgba(220,38,38,0.28) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-danger,0.4) 0%, rgba(220,38,38,0.28) 100%)'
         },
         border: {
-          color: 'rgba(239,68,68,0.6)',
+          color: 'var(--glass-color-danger,0.6)',
           width: 2,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(239,68,68,0.18)',
+          color: 'var(--glass-color-danger,0.18)',
           x: 0,
           y: 12,
           blur: 32,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(239,68,68,0.18)',
+          color: 'var(--glass-color-danger,0.18)',
           spread: 1,
           blur: 12
         },
@@ -1873,22 +1873,22 @@ const AURA_GLASS = {
           px: 20
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(239,68,68,0.5) 0%, rgba(220,38,38,0.35) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-danger,0.5) 0%, rgba(220,38,38,0.35) 100%)'
         },
         border: {
-          color: 'rgba(239,68,68,0.7)',
+          color: 'var(--glass-color-danger,0.7)',
           width: 2,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(239,68,68,0.22)',
+          color: 'var(--glass-color-danger,0.22)',
           x: 0,
           y: 16,
           blur: 40,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(239,68,68,0.22)',
+          color: 'var(--glass-color-danger,0.22)',
           spread: 1,
           blur: 16
         },
@@ -1905,22 +1905,22 @@ const AURA_GLASS = {
           px: 24
         },
         surface: {
-          base: 'linear-gradient(135deg, rgba(239,68,68,0.6) 0%, rgba(220,38,38,0.4) 100%)'
+          base: 'linear-gradient(135deg, var(--glass-color-danger,0.6) 0%, rgba(220,38,38,0.4) 100%)'
         },
         border: {
-          color: 'rgba(239,68,68,0.8)',
+          color: 'var(--glass-color-danger,0.8)',
           width: 3,
           style: 'solid'
         },
         outerShadow: {
-          color: 'rgba(239,68,68,0.25)',
+          color: 'var(--glass-color-danger,0.25)',
           x: 0,
           y: 20,
           blur: 48,
           spread: 0
         },
         innerGlow: {
-          color: 'rgba(239,68,68,0.25)',
+          color: 'var(--glass-color-danger,0.25)',
           spread: 2,
           blur: 20
         },
@@ -2249,7 +2249,7 @@ const glassTokens = {
   // Gradient patterns
   gradients: {
     primary: 'linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.15) 100%)',
-    secondary: 'linear-gradient(135deg, rgba(59,130,246,0.2) 0%, rgba(147,51,234,0.1) 100%)',
+    secondary: 'linear-gradient(135deg, var(--glass-color-primary,0.2) 0%, rgba(147,51,234,0.1) 100%)',
     primaryRadial: 'radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%)',
     mesh: 'linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, transparent 25%)',
     iridescent: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7)',
@@ -2269,8 +2269,8 @@ const glassTokens = {
     primary: 'rgba(255,255,255,0.25)',
     secondary: 'rgba(255,255,255,0.15)',
     success: 'rgba(34,197,94,0.25)',
-    warning: 'rgba(245,158,11,0.25)',
-    error: 'rgba(239,68,68,0.25)',
+    warning: 'var(--glass-color-warning,0.25)',
+    error: 'var(--glass-color-danger,0.25)',
     dark: 'rgba(0,0,0,0.25)',
     darkSubtle: 'rgba(0,0,0,0.15)'
   },
@@ -2280,11 +2280,11 @@ const glassTokens = {
   },
   // Glow effects
   glow: {
-    primary: 'rgba(59,130,246,0.6)',
+    primary: 'var(--glass-color-primary,0.6)',
     secondary: 'rgba(147,51,234,0.6)',
     success: 'rgba(34,197,94,0.6)',
-    warning: 'rgba(245,158,11,0.6)',
-    error: 'rgba(239,68,68,0.6)'
+    warning: 'var(--glass-color-warning,0.6)',
+    error: 'var(--glass-color-danger,0.6)'
   }
 };
 // Alias for backward compatibility
@@ -2621,7 +2621,7 @@ function createGlassFocusMixin() {
   console.warn('[AuraGlass] createGlassFocusMixin is deprecated. Use CSS :focus-visible with focusRing option.');
   return {
     outline: 'none',
-    boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.3)'
+    boxShadow: '0 0 0 3px var(--glass-color-primary, 0.3)'
   };
 }
 /**
@@ -3248,7 +3248,7 @@ function useSpringTransform() {
 }
 // Hook for spring-based color transitions
 function useSpringColor() {
-  let initialColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#000000';
+  let initialColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'var(--glass-black)';
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   // Parse initial color
   const parseColor = color => {
@@ -10622,7 +10622,7 @@ const UnifiedThemeProvider = _ref => {
     const backgroundColor = isDarkMode ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.1)';
     const borderColor = isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
     const shadowColor = isDarkMode ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.1)';
-    const glowColor = isDarkMode ? '#3b82f6' : '#6366f1';
+    const glowColor = isDarkMode ? 'var(--glass-color-primary)' : '#6366f1';
     // Get opacity and blur values from qualityTier
     const bgOpacity = getBackgroundOpacity('medium');
     const borderOpacityValue = getBorderOpacity('medium');
@@ -10654,7 +10654,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;
@@ -11098,7 +11098,7 @@ class ContrastGuard {
       targetLevel = 'AA',
       material = 'liquid',
       variant = 'regular',
-      textColor = 'rgba(255,255,255,0.95)'
+      textColor = 'var(--glass-text-primary)'
     } = options;
     // Throttled update function
     const updateContrast = () => {
@@ -18868,13 +18868,13 @@ const GlassSidebar = /*#__PURE__*/forwardRef((_ref, ref) => {
           title: isCollapsed ? 'Expand sidebar' : 'Collapse sidebar',
           className: cn('absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 glass-radius-full', 'flex items-center justify-center',
           // Frosted surface
-          'backdrop-blur-md2xl bg-white/55 border border-white/80', 'shadow-[0_6px_18px_rgba(0,0,0,0.35),inset_0_1px_2px_rgba(255,255,255,0.35)] ring-1 ring-white/40', 'hover:bg-white/65 active:bg-white/70'),
+          'backdrop-blur-md2xl bg-white/55 border border-white/80', 'shadow-[0_6px_18px_rgba(var(--glass-color-black) / var(--glass-opacity-35)),inset_0_1px_2px_var(--glass-bg-active)] ring-1 ring-white/40', 'hover:bg-white/65 active:bg-white/70'),
           "aria-label": isCollapsed ? 'Expand sidebar' : 'Collapse sidebar',
           children: isCollapsed ? jsx(ChevronRight, {
-            className: "w-5 h-5 text-primary drop-shadow-[0_1px_8px_rgba(0,0,0,0.8)]",
+            className: "w-5 h-5 text-primary drop-shadow-[0_1px_8px_var(--glass-text-secondary-dark)]",
             strokeWidth: 3
           }) : jsx(ChevronLeft, {
-            className: "w-5 h-5 text-primary drop-shadow-[0_1px_8px_rgba(0,0,0,0.8)]",
+            className: "w-5 h-5 text-primary drop-shadow-[0_1px_8px_var(--glass-text-secondary-dark)]",
             strokeWidth: 3
           })
         })
@@ -18934,7 +18934,7 @@ function SidebarNavigationItem(_ref3) {
     variant: "ghost",
     onClick: handleClick,
     disabled: item === null || item === void 0 ? void 0 : item.disabled,
-    className: cn('w-full flex items-center glass-gap-3 glass-radius-md transition-all duration-200 relative group', 'hover:bg-white/10 focus:outline-none', collapsed ? 'glass-px-2 glass-py-2.5 justify-center' : 'glass-px-3 glass-py-2', 'glass-text-sm font-medium', isActive ? 'bg-primary/15 text-primary shadow-[0_0_0_2px_${glassStyles.borderColor || "rgba(59, 130, 246, 0.2)"}]' : '', !isActive && 'glass-text-secondary hover:text-foreground', (item === null || item === void 0 ? void 0 : item.disabled) && 'opacity-50 cursor-not-allowed'),
+    className: cn('w-full flex items-center glass-gap-3 glass-radius-md transition-all duration-200 relative group', 'hover:bg-white/10 focus:outline-none', collapsed ? 'glass-px-2 glass-py-2.5 justify-center' : 'glass-px-3 glass-py-2', 'glass-text-sm font-medium', isActive ? 'bg-primary/15 text-primary shadow-[0_0_0_2px_${glassStyles.borderColor || "var(--glass-color-primary, 0.2)"}]' : '', !isActive && 'glass-text-secondary hover:text-foreground', (item === null || item === void 0 ? void 0 : item.disabled) && 'opacity-50 cursor-not-allowed'),
     children: [(item === null || item === void 0 ? void 0 : item.icon) && jsx("span", {
       className: "flex-shrink-0 w-6 h-6 flex items-center justify-center text-lg",
       children: /*#__PURE__*/React.cloneElement(item === null || item === void 0 ? void 0 : item.icon, {
@@ -18948,7 +18948,7 @@ function SidebarNavigationItem(_ref3) {
         className: cn('flex-shrink-0 glass-px-2 glass-py-1 glass-text-xs glass-radius-full font-medium transition-all duration-200', 'bg-black/15 border border-black/20 shadow-md backdrop-blur-md', 'group-hover:bg-black/20 group-hover:border-black/25 group-hover:shadow-lg', 'relative z-10' // Ensure badge stays above any background effects
         ),
         style: {
-          color: '#ffffff' // white text on dark background
+          color: 'var(--glass-white)' // white text on dark background
         },
         children: item === null || item === void 0 ? void 0 : item.badge
       }), hasChildren && jsx("svg", {
@@ -19283,7 +19283,7 @@ const TabItemComponent = _ref => {
       background: active ? glassTokenUtils.getSurface('neutral', 'level1').surface.base : 'transparent',
       border: 'none',
       borderRadius: '6px',
-      color: active ? '#ffffff' : glassTokenUtils.getSurface('neutral', 'level1').text.secondary,
+      color: active ? 'var(--glass-white)' : glassTokenUtils.getSurface('neutral', 'level1').text.secondary,
       cursor: disabled ? 'not-allowed' : 'pointer',
       opacity: disabled ? 0.5 : 1,
       fontSize: '0.875rem',
@@ -19299,7 +19299,7 @@ const TabItemComponent = _ref => {
       children: label
     }), badge && jsx("span", {
       style: {
-        background: '#ef4444',
+        background: 'var(--glass-color-danger)',
         color: 'white',
         borderRadius: '10px',
         padding: '2px 6px',
@@ -22605,7 +22605,7 @@ const GlassModal = /*#__PURE__*/forwardRef((_ref, ref) => {
           className: cn('w-full flex flex-col liquid-glass-modal-surface', 'focus:outline-none', variant === 'fullscreen' ? 'h-full' : 'max-h-full overflow-hidden', consciousness && 'consciousness-modal-glass', eyeTracking && 'consciousness-eye-trackable-content', adaptive && (modalInsights === null || modalInsights === void 0 ? void 0 : modalInsights.urgency) === 'high' && 'consciousness-urgent-glass', predictive && modalInsights && 'consciousness-predictive-glass', className),
           style: {
             '--liquid-glass-depth-offset': variant === 'drawer' ? '8px' : '12px',
-            '--liquid-glass-tint-adaptive': (modalInsights === null || modalInsights === void 0 ? void 0 : modalInsights.urgency) === 'high' ? 'rgba(220, 38, 38, 0.15)' : 'rgba(0, 0, 0, 0.1)'
+            '--liquid-glass-tint-adaptive': (modalInsights === null || modalInsights === void 0 ? void 0 : modalInsights.urgency) === 'high' ? 'rgba(220, 38, 38, 0.15)' : 'rgba(var(--glass-color-black) / var(--glass-opacity-10))'
           },
           "data-liquid-glass-modal": "true",
           "data-modal-urgency": modalInsights === null || modalInsights === void 0 ? void 0 : modalInsights.urgency
@@ -23972,7 +23972,7 @@ const hslToRgb = (h, s, l, a) => {
   };
 };
 // Predefined color palettes
-const defaultPalette = ['#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffa500', '#800080', '#ffc0cb', '#a52a2a', '#808080', '#000080', '#008000'];
+const defaultPalette = ['var(--glass-black)', 'var(--glass-white)', '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffa500', '#800080', '#ffc0cb', '#a52a2a', '#808080', '#000080', '#008000'];
 const materialPalette = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#9e9e9e', '#607d8b'];
 /**
  * GlassColorPicker component
@@ -23981,7 +23981,7 @@ const materialPalette = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
 const GlassColorPicker = _ref => {
   let {
       value,
-      defaultValue = '#3b82f6',
+      defaultValue = 'var(--glass-color-primary)',
       onChange,
       format = 'hex',
       showAlpha = false,
@@ -24190,7 +24190,7 @@ const GlassColorPicker = _ref => {
                 children: [showInput && jsx(GlassInput, {
                   value: inputValue,
                   onChange: e => handleInputChange(e.target.value),
-                  placeholder: "#000000",
+                  placeholder: "var(--glass-black)",
                   className: "text-sm"
                 }), jsx("div", {
                   className: "text-xs text-primary/60 glass-mt-1",
@@ -25807,23 +25807,23 @@ dt.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral(["\n
   }
 }, props => props.$hasError ? 'rgba(240, 82, 82, 0.8)' : props.$focused ? 'rgba(99, 102, 241, 0.8)' : 'rgba(255, 255, 255, 0.12)', props => props.$focused && lt(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteral(["\n    border-color: rgba(99, 102, 241, 0.8);\n    box-shadow: var(--glass-elev-2);\n  "]))), props => props.$hasError && lt(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral(["\n    border-color: rgba(240, 82, 82, 0.8);\n    box-shadow: var(--glass-elev-2);\n  "]))), props => props.$disabled && lt(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteral(["\n    opacity: 0.6;\n    cursor: not-allowed;\n    background: var(--glass-bg-default);\n  "]))));
 dt.div(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  flex: 1;\n"])));
-dt.div(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 8px;\n  border-radius: 16px;\n  font-size: 0.85rem;\n  gap: 6px;\n  max-width: 200px;\n  background: var(--glass-bg-default);\n  backdrop-filter: var(--glass-backdrop-blur);\n  border: 1px solid var(--glass-border-default);\n  color: rgba(255, 255, 255, 0.95);\n  transition: background-color 0.2s ease;\n  user-select: none;\n  transform: translate(", "px, ", "px)\n             scale(", ");\n  will-change: transform, opacity;\n  opacity: ", ";\n  \n  /* Dragging state */\n  ", "\n  \n  /* Hover styles */\n  &:hover {\n    background: var(--glass-bg-default);\n    \n    /* Only show the remove button hover effect when not disabled */\n    ", "\n  }\n  \n  /* Disabled state */\n  ", "\n"])), props => props.$translateX, props => props.$translateY, props => props.$scale, props => {
+dt.div(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 8px;\n  border-radius: 16px;\n  font-size: 0.85rem;\n  gap: 6px;\n  max-width: 200px;\n  background: var(--glass-bg-default);\n  backdrop-filter: var(--glass-backdrop-blur);\n  border: 1px solid var(--glass-border-default);\n  color: var(--glass-text-primary);\n  transition: background-color 0.2s ease;\n  user-select: none;\n  transform: translate(", "px, ", "px)\n             scale(", ");\n  will-change: transform, opacity;\n  opacity: ", ";\n  \n  /* Dragging state */\n  ", "\n  \n  /* Hover styles */\n  &:hover {\n    background: var(--glass-bg-default);\n    \n    /* Only show the remove button hover effect when not disabled */\n    ", "\n  }\n  \n  /* Disabled state */\n  ", "\n"])), props => props.$translateX, props => props.$translateY, props => props.$scale, props => {
   var _props$$initialOpacit;
   return (_props$$initialOpacit = props.$initialOpacity) !== null && _props$$initialOpacit !== void 0 ? _props$$initialOpacit : 1;
 }, props => props.$isDragging && lt(_templateObject0$5 || (_templateObject0$5 = _taggedTemplateLiteral(["\n    opacity: 0.8;\n    z-index: 10;\n    cursor: grabbing;\n  "]))), props => !props.$isDisabled && lt(_templateObject1$4 || (_templateObject1$4 = _taggedTemplateLiteral(["\n      .remove-button {\n        background: var(--glass-bg-default);\n        \n        &:hover {\n          background: var(--glass-bg-default);\n        }\n      }\n    "]))), props => props.$isDisabled && lt(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n    opacity: 0.5;\n    cursor: not-allowed;\n  "]))));
 dt.span(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-dt.button(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  border: none;\n  padding: 0;\n  background-color: transparent;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  \n  &:focus {\n    outline: none;\n    box-shadow: var(--glass-elev-2);\n  }\n  \n  /* Icon sizing */\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n  \n  /* Disabled state inherited from parent */\n"])));
-dt.input(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 50px;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.9);\n  font-size: ", ";\n  \n  &::placeholder {\n    color: rgba(255, 255, 255, 0.5);\n  }\n  \n  &:disabled {\n    cursor: not-allowed;\n  }\n"])), props => props.$size === 'small' ? '0.85rem' : props.$size === 'large' ? '1.05rem' : '0.95rem');
+dt.button(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  border: none;\n  padding: 0;\n  background-color: transparent;\n  color: rgba(var(--glass-color-white) / var(--glass-opacity-80));\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  \n  &:focus {\n    outline: none;\n    box-shadow: var(--glass-elev-2);\n  }\n  \n  /* Icon sizing */\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n  \n  /* Disabled state inherited from parent */\n"])));
+dt.input(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 50px;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: rgba(var(--glass-color-white) / var(--glass-opacity-90));\n  font-size: ", ";\n  \n  &::placeholder {\n    color: var(--glass-border-hover);\n  }\n  \n  &:disabled {\n    cursor: not-allowed;\n  }\n"])), props => props.$size === 'small' ? '0.85rem' : props.$size === 'large' ? '1.05rem' : '0.95rem');
 dt.div(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: ", ";\n  max-height: ", ";\n  overflow-y: auto;\n  z-index: 1000;\n  ", "\n  left: 0;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  \n  /* Enhanced glass styling */\n  background: var(--glass-bg-default);\n  backdrop-filter: var(--glass-backdrop-blur);\n  -webkit-backdrop-filter: var(--glass-backdrop-blur);\n  border: 1px solid var(--glass-border-default);\n  \n  border-radius: 8px;\n  border: 1px solid var(--glass-border-default);\n  will-change: transform, opacity;\n  transform-origin: ", ";\n"])), props => props.$popperWidth || "".concat(props.$width, "px"), props => typeof props.$maxHeight === 'number' ? "".concat(props.$maxHeight, "px") : props.$maxHeight, props => props.$openUp ? 'bottom: 100%;' : 'top: 100%;', props => props.$openUp ? '0' : '4px', props => props.$openUp ? '4px' : '0', props => props.$openUp ? 'bottom center' : 'top center');
 dt.ul(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 6px 0;\n  list-style: none;\n"])));
 dt.li(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteral(["\n  padding: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  transition: background-color 0.15s ease;\n  position: relative;\n  \n  /* Text styling */\n  color: rgba(255, 255, 255, ", ");\n  \n  /* Selected state */\n  ", "\n  \n  /* Focus state */\n  ", "\n  \n  /* Hover state - only when not disabled */\n  ", "\n  \n  /* Disabled state */\n  ", "\n"])), props => props.$size === 'small' ? '6px 10px' : props.$size === 'large' ? '10px 16px' : '8px 12px', props => props.$isDisabled ? 'not-allowed' : 'pointer', props => props.$isDisabled ? '0.5' : '0.9', props => props.$isSelected && lt(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteral(["\n    background: var(--glass-bg-default);\n    font-weight: var(--typography-subheading-weight);\n    \n    &::after {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 3px;\n      background: var(--glass-bg-default);\n    }\n  "]))), props => props.$isFocused && !props.$isDisabled && lt(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteral(["\n    background: var(--glass-bg-default);\n  "]))), props => !props.$isDisabled && lt(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteral(["\n    &:hover {\n      background: var(--glass-bg-default);\n    }\n  "]))), props => props.$isDisabled && lt(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteral(["\n    opacity: 0.6;\n  "]))));
-dt.div(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteral(["\n  padding: ", ";\n  font-size: 0.8rem;\n  font-weight: var(--typography-heading-weight);\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.6);\n  background: var(--glass-bg-default);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n  letter-spacing: 0.5px;\n"])), props => props.$size === 'small' ? '6px 10px' : props.$size === 'large' ? '10px 16px' : '8px 12px');
-dt.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  padding: 12px;\n  color: rgba(255, 255, 255, 0.5);\n  text-align: center;\n  font-style: italic;\n"])));
-dt.button(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  padding: 4px;\n  margin-left: 4px;\n  color: rgba(255, 255, 255, 0.5);\n  cursor: pointer;\n  transition: color 0.2s ease;\n  \n  &:hover {\n    color: rgba(255, 255, 255, 0.8);\n  }\n  \n  &:focus {\n    outline: none;\n    color: rgba(255, 255, 255, 0.8);\n  }\n  \n  /* Icon sizing */\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
-dt.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px;\n  color: rgba(255, 255, 255, 0.7);\n  \n  /* Simple loading spinner */\n  .spinner {\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    border: 2px solid rgba(99, 102, 241, 0.3);\n    border-top-color: rgba(99, 102, 241, 0.8);\n    animation: spin 0.8s linear infinite;\n  }\n  \n  @keyframes spin {\n    to { transform: rotate(360deg); }\n  }\n"])));
+dt.div(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteral(["\n  padding: ", ";\n  font-size: 0.8rem;\n  font-weight: var(--typography-heading-weight);\n  text-transform: uppercase;\n  color: rgba(var(--glass-color-white) / var(--glass-opacity-60));\n  background: var(--glass-bg-default);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n  letter-spacing: 0.5px;\n"])), props => props.$size === 'small' ? '6px 10px' : props.$size === 'large' ? '10px 16px' : '8px 12px');
+dt.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  padding: 12px;\n  color: var(--glass-border-hover);\n  text-align: center;\n  font-style: italic;\n"])));
+dt.button(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  padding: 4px;\n  margin-left: 4px;\n  color: var(--glass-border-hover);\n  cursor: pointer;\n  transition: color 0.2s ease;\n  \n  &:hover {\n    color: rgba(var(--glass-color-white) / var(--glass-opacity-80));\n  }\n  \n  &:focus {\n    outline: none;\n    color: rgba(var(--glass-color-white) / var(--glass-opacity-80));\n  }\n  \n  /* Icon sizing */\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
+dt.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px;\n  color: rgba(var(--glass-color-white) / var(--glass-opacity-70));\n  \n  /* Simple loading spinner */\n  .spinner {\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    border: 2px solid rgba(99, 102, 241, 0.3);\n    border-top-color: rgba(99, 102, 241, 0.8);\n    animation: spin 0.8s linear infinite;\n  }\n  \n  @keyframes spin {\n    to { transform: rotate(360deg); }\n  }\n"])));
 dt.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  color: rgba(240, 82, 82, 0.9);\n  font-size: 0.8rem;\n  margin-top: 4px;\n  padding-left: 4px;\n"])));
-dt.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  color: rgba(255, 255, 255, 0.6);\n  font-size: 0.8rem;\n  margin-top: 4px;\n  padding-left: 4px;\n"])));
-dt.label(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  display: block;\n  margin-bottom: 6px;\n  font-size: 0.9rem;\n  font-weight: var(--typography-subheading-weight);\n  color: rgba(255, 255, 255, 0.8);\n"])));
+dt.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  color: rgba(var(--glass-color-white) / var(--glass-opacity-60));\n  font-size: 0.8rem;\n  margin-top: 4px;\n  padding-left: 4px;\n"])));
+dt.label(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  display: block;\n  margin-bottom: 6px;\n  font-size: 0.9rem;\n  font-weight: var(--typography-subheading-weight);\n  color: rgba(var(--glass-color-white) / var(--glass-opacity-80));\n"])));
 // Define the actual component function that accepts props and ref
 const GlassMultiSelectInternal = (props, ref) => {
   return jsx("div", {
@@ -26459,7 +26459,7 @@ const StyledTable = dt.table(_templateObject$l || (_templateObject$l = _taggedTe
   return ((_props$theme$typograp = (props === null || props === void 0 ? void 0 : props.theme).typography) === null || _props$theme$typograp === void 0 || (_props$theme$typograp = _props$theme$typograp.body) === null || _props$theme$typograp === void 0 ? void 0 : _props$theme$typograp.fontFamily) || 'sans-serif';
 }, props => {
   var _props$theme$colors;
-  return ((_props$theme$colors = (props === null || props === void 0 ? void 0 : props.theme).colors) === null || _props$theme$colors === void 0 || (_props$theme$colors = _props$theme$colors.text) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.primary) || '#000';
+  return ((_props$theme$colors = (props === null || props === void 0 ? void 0 : props.theme).colors) === null || _props$theme$colors === void 0 || (_props$theme$colors = _props$theme$colors.text) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.primary) || 'var(--glass-black)';
 });
 // Sort Indicator with transition removed
 const SortIndicator = dt.span(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  /* transform: translateY(-50%); // Initial transform set by style prop now */\n  font-size: 0.8em;\n  color: ", ";\n  /* REMOVED transition: transform 0.2s ease, opacity 0.2s ease; */\n  opacity: 0; /* Start hidden, animation controls visibility */\n  transform-origin: center center; /* Useful for scale/rotate transforms */\n  will-change: transform, opacity; /* Explicitly add will-change here */\n"])), props => {
@@ -26493,7 +26493,7 @@ const StyledTd = dt.td(_templateObject4$a || (_templateObject4$a = _taggedTempla
   return ((_props$theme$typograp4 = (props === null || props === void 0 ? void 0 : props.theme).typography) === null || _props$theme$typograp4 === void 0 || (_props$theme$typograp4 = _props$theme$typograp4.body) === null || _props$theme$typograp4 === void 0 ? void 0 : _props$theme$typograp4.fontSize) || '1rem';
 }, props => {
   var _props$theme$colors8;
-  return ((_props$theme$colors8 = (props === null || props === void 0 ? void 0 : props.theme).colors) === null || _props$theme$colors8 === void 0 || (_props$theme$colors8 = _props$theme$colors8.text) === null || _props$theme$colors8 === void 0 ? void 0 : _props$theme$colors8.primary) || '#000';
+  return ((_props$theme$colors8 = (props === null || props === void 0 ? void 0 : props.theme).colors) === null || _props$theme$colors8 === void 0 || (_props$theme$colors8 = _props$theme$colors8.text) === null || _props$theme$colors8 === void 0 ? void 0 : _props$theme$colors8.primary) || 'var(--glass-black)';
 });
 // Wrapper for applying Glass effect
 dt.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteral(["\n  /* Takes styles from GlassSurface component or createSurface function */\n"])));
@@ -27582,8 +27582,8 @@ const GlassHeatmap = /*#__PURE__*/forwardRef((_ref, ref) => {
       xAxis,
       yAxis,
       colorScale = {
-        min: '#3B82F6',
-        max: '#EF4444'
+        min: 'var(--glass-color-primary)',
+        max: 'var(--glass-color-danger)'
       },
       cellSize = 20,
       cellGap = 1,
@@ -27773,7 +27773,7 @@ const GlassHeatmap = /*#__PURE__*/forwardRef((_ref, ref) => {
       className: cn('glass-heatmap-cell flex items-center justify-center glass-text-xs font-medium transition-all', 'cursor-pointer hover:scale-110 hover:z-10', isSelected && 'ring-2 ring-primary ring-offset-1', isHovered && 'shadow-lg scale-110 z-20', showGrid && 'border border-border/20'),
       style: {
         backgroundColor: cellColor,
-        color: cell.normalizedValue > 0.5 ? '#ffffff' : '#000000',
+        color: cell.normalizedValue > 0.5 ? 'var(--glass-white)' : 'var(--glass-black)',
         width: cellSize * internalZoomLevel,
         height: cellSize * internalZoomLevel,
         fontSize: "".concat(Math.max(8, cellSize * internalZoomLevel * 0.4), "px")
@@ -28014,7 +28014,7 @@ const GlassLoadingSkeleton = /*#__PURE__*/forwardRef((_ref, ref) => {
   const getSkeletonStyle = () => ({
     background: "\n        linear-gradient(135deg, rgba(255,255,255,0.015) 0%, rgba(255,255,255,0.005) 50%, rgba(255,255,255,0.015) 100%),\n        linear-gradient(135deg, ".concat(glassTokenUtils.getSurface('neutral', 'level1').border.color, " 0%, rgba(147,51,234,0.1) 100%)\n      "),
     border: '1px solid rgba(255,255,255,0.04)',
-    boxShadow: '0 4px 16px rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.03) inset'
+    boxShadow: '0 4px 16px rgba(var(--glass-color-black) / var(--glass-opacity-10)), 0 1px 0 rgba(255,255,255,0.03) inset'
   });
   const renderBasicSkeleton = () => jsxs("div", {
     className: "glass-auto-gap glass-auto-gap-md",
@@ -30115,7 +30115,7 @@ const GlassAnimatedNumber = /*#__PURE__*/forwardRef((_ref, ref) => {
         };
       case 'glow':
         return {
-          textShadow: isAnimating ? '0 0 20px rgba(255,255,255,0.5), 0 0 40px ${glassStyles.borderColor || "rgba(255, 255, 255, 0.3)"}' : 'none',
+          textShadow: isAnimating ? '0 0 20px var(--glass-border-hover), 0 0 40px ${glassStyles.borderColor || "var(--glass-bg-hover)"}' : 'none',
           transition: 'text-shadow 0.3s ease'
         };
       case 'count':
@@ -31498,7 +31498,7 @@ GlassSlider.displayName = 'GlassSlider';
 // Get icon state classes
 const getIconStateClasses = (active, completed) => {
   if (active) {
-    return 'bg-primary-500 glass-text-primary border-primary-300 shadow-[0_0_12px_3px_rgba(59,130,246,0.5)]';
+    return 'bg-primary-500 glass-text-primary border-primary-300 shadow-[0_0_12px_3px_var(--glass-color-primary,0.5)]';
   }
   if (completed) {
     return 'bg-success-500 glass-text-primary border-success-300';
@@ -32344,7 +32344,7 @@ const GlassAreaChart = _ref => {
       showLegend = true,
       xAxisLabel,
       yAxisLabel,
-      colors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6b7280'],
+      colors = ['var(--glass-color-primary)', 'var(--glass-color-danger)', 'var(--glass-color-success)', 'var(--glass-color-warning)', '#8b5cf6', '#06b6d4', '#84cc16', '#f97316', '#ec4899', 'var(--glass-gray-500)'],
       animationDuration = 1200,
       showTooltips = true,
       formatYValue = value => value.toString(),
@@ -32637,7 +32637,7 @@ const GlassAreaChart = _ref => {
                 cy: point.scaledY,
                 r: "4",
                 fill: s.color,
-                stroke: "rgba(255, 255, 255, 0.8)",
+                stroke: "rgba(var(--glass-color-white) / var(--glass-opacity-80))",
                 strokeWidth: "2",
                 className: "cursor-pointer hover:r-6 transition-all duration-200",
                 role: "button",
@@ -32804,7 +32804,7 @@ const GlassBarChart = _ref => {
       showLegend = true,
       xAxisLabel,
       yAxisLabel,
-      colors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6b7280'],
+      colors = ['var(--glass-color-primary)', 'var(--glass-color-danger)', 'var(--glass-color-success)', 'var(--glass-color-warning)', '#8b5cf6', '#06b6d4', '#84cc16', '#f97316', '#ec4899', 'var(--glass-gray-500)'],
       animationDuration = 1000,
       showTooltips = true,
       formatYValue = value => value.toString(),
@@ -33272,7 +33272,7 @@ const GlassLineChart = _ref => {
       showLegend = true,
       xAxisLabel,
       yAxisLabel,
-      colors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6b7280'],
+      colors = ['var(--glass-color-primary)', 'var(--glass-color-danger)', 'var(--glass-color-success)', 'var(--glass-color-warning)', '#8b5cf6', '#06b6d4', '#84cc16', '#f97316', '#ec4899', 'var(--glass-gray-500)'],
       animationDuration = 1000,
       showTooltips = true,
       formatYValue = value => value.toString(),
@@ -33470,7 +33470,7 @@ const GlassLineChart = _ref => {
                 cy: point.scaledY,
                 r: "4",
                 fill: s.color,
-                stroke: "rgba(255, 255, 255, 0.8)",
+                stroke: "rgba(var(--glass-color-white) / var(--glass-opacity-80))",
                 strokeWidth: "2",
                 className: "cursor-pointer hover:r-6 transition-all duration-200",
                 onMouseEnter: () => handlePointHover(s.id, pointIndex, point.scaledX, point.scaledY),
@@ -33642,7 +33642,7 @@ const GlassPieChart = /*#__PURE__*/forwardRef(function GlassPieChartComponent(_r
       className
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded$1i);
-  const defaultColors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6b7280'];
+  const defaultColors = ['var(--glass-color-primary)', 'var(--glass-color-danger)', 'var(--glass-color-success)', 'var(--glass-color-warning)', '#8b5cf6', '#06b6d4', '#84cc16', '#f97316', '#ec4899', 'var(--glass-gray-500)'];
   const actualColors = colors || defaultColors;
   const actualAnimationDuration = animationDuration;
   const actualShowTooltips = showTooltips;
@@ -33784,7 +33784,7 @@ const GlassPieChart = /*#__PURE__*/forwardRef(function GlassPieChartComponent(_r
                 children: [jsx("path", {
                   d: segment.path,
                   fill: segment.color,
-                  stroke: "rgba(255, 255, 255, 0.2)",
+                  stroke: "rgba(var(--glass-color-white) / var(--glass-opacity-20))",
                   strokeWidth: "1",
                   className: "cursor-pointer transition-all duration-200 hover:opacity-80",
                   onMouseEnter: e => handleSegmentHover(segment, e),
@@ -33813,8 +33813,8 @@ const GlassPieChart = /*#__PURE__*/forwardRef(function GlassPieChartComponent(_r
                   cx: centerX,
                   cy: centerY,
                   r: innerRadius,
-                  fill: "rgba(255, 255, 255, 0.1)",
-                  stroke: "rgba(255, 255, 255, 0.2)",
+                  fill: "var(--glass-bg-default)",
+                  stroke: "rgba(var(--glass-color-white) / var(--glass-opacity-20))",
                   strokeWidth: "1"
                 }), jsx("text", {
                   x: centerX,
@@ -34019,14 +34019,14 @@ const defaultTheme = {
       accentPrimary: '#6366F1',
       accentSecondary: '#8B5CF6',
       accentTertiary: '#EC4899',
-      stateCritical: '#EF4444',
-      stateOptimal: '#10B981',
-      stateAttention: '#F59E0B',
-      stateInformational: '#3B82F6',
-      neutralBackground: '#F9FAFB',
-      neutralForeground: '#1F2937',
-      neutralBorder: '#E5E7EB',
-      neutralSurface: '#FFFFFF'
+      stateCritical: 'var(--glass-color-danger)',
+      stateOptimal: 'var(--glass-color-success)',
+      stateAttention: 'var(--glass-color-warning)',
+      stateInformational: 'var(--glass-color-primary)',
+      neutralBackground: 'var(--glass-gray-50)',
+      neutralForeground: 'var(--glass-gray-800)',
+      neutralBorder: 'var(--glass-gray-200)',
+      neutralSurface: 'var(--glass-white)'
     },
     glass: {
       light: createGlassStyle$1({
@@ -34608,7 +34608,7 @@ const GlassChartComponent = /*#__PURE__*/forwardRef((_ref, ref) => {
           style: {
             marginTop: '4px',
             fontSize: '10px',
-            color: 'rgba(255, 255, 255, 0.6)',
+            color: 'rgba(var(--glass-color-white) / var(--glass-opacity-60))',
             fontStyle: 'italic'
           },
           "data-adaptation-indicator": "true",
@@ -48142,10 +48142,10 @@ const LegendItem = dt.div(_templateObject7$4 || (_templateObject7$4 = _taggedTem
 const LegendColor = dt.div(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  border-radius: 2px;\n  background-color: ", ";\n  opacity: ", ";\n"])), props => props.$color || '#6366F1', props => props.$active ? 1 : 0.3);
 const LegendLabel = dt.span(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n  font-size: var(--typography-body-size);\n  color: ", ";\n"])), props => props.$active ? 'var(--glass-text-primary)' : 'var(--glass-text-secondary)');
 const DynamicTooltip = dt.div(_templateObject0$3 || (_templateObject0$3 = _taggedTemplateLiteral(["\n  position: absolute;\n  background: var(--glass-overlay-bg);\n  backdrop-filter: var(--glass-backdrop-blur);\n  border-radius: 6px;\n  padding: 12px;\n  pointer-events: none;\n  z-index: 1000;\n  border: 1px solid var(--glass-border-default);\n  box-shadow: var(--glass-elev-2);\n"])));
-const TooltipHeader = dt.div(_templateObject1$3 || (_templateObject1$3 = _taggedTemplateLiteral(["\n  font-weight: var(--typography-heading-weight);\n  margin-bottom: 8px;\n  color: ", ";\n"])), props => props.$color || '#ffffff');
+const TooltipHeader = dt.div(_templateObject1$3 || (_templateObject1$3 = _taggedTemplateLiteral(["\n  font-weight: var(--typography-heading-weight);\n  margin-bottom: 8px;\n  color: ", ";\n"])), props => props.$color || 'var(--glass-white)');
 const TooltipRow = dt.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 4px;\n"])));
 const TooltipLabel = dt.span(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n  color: var(--glass-text-secondary);\n  font-size: var(--typography-body-size);\n"])));
-const TooltipValue = dt.span(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: ", ";\n"])), props => props.$highlighted ? '#ffffff' : glassTokenUtils.getSurface('neutral', 'level1').text.primary, props => props.$highlighted ? '600' : '400');
+const TooltipValue = dt.span(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: ", ";\n"])), props => props.$highlighted ? 'var(--glass-white)' : glassTokenUtils.getSurface('neutral', 'level1').text.primary, props => props.$highlighted ? '600' : '400');
 // Register required Chart.js components
 Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, RadialLinearScale, plugin_tooltip, plugin_legend, index);
 // Custom SVG path animation plugin
@@ -48204,8 +48204,8 @@ if (defaults !== null && defaults !== void 0 && defaults.font) {
   defaults.font.family = "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
 }
 // Set colors safely
-defaults.color = '${glassStyles.text?.secondary || "rgba(255, 255, 255, 0.7)"}';
-defaults.borderColor = '${glassStyles.surface?.base || "rgba(255, 255, 255, 0.1)"}';
+defaults.color = '${glassStyles.text?.secondary || "rgba(var(--glass-color-white) / var(--glass-opacity-70))"}';
+defaults.borderColor = '${glassStyles.surface?.base || "var(--glass-bg-default)"}';
 /**
  * Register required Chart.js components
  */
@@ -48293,7 +48293,7 @@ const zoomControlsStyle = createGlassStyle$1({
   elevation: "level2"
 });
 const zoomLevelStyle = {
-  color: '${glassStyles.text?.primary || "rgba(255, 255, 255, 0.9)"}',
+  color: '${glassStyles.text?.primary || "rgba(var(--glass-color-white) / var(--glass-opacity-90))"}',
   fontSize: 'var(--typography-caption-size)',
   padding: '0 8px',
   minWidth: '40px',
@@ -48402,8 +48402,8 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
       showYGrid: true,
       showXLabels: true,
       showYLabels: true,
-      axisColor: '${glassStyles.borderColor || "rgba(255, 255, 255, 0.3)"}',
-      gridColor: '${glassStyles.surface?.base || "rgba(255, 255, 255, 0.1)"}',
+      axisColor: '${glassStyles.borderColor || "var(--glass-bg-hover)"}',
+      gridColor: '${glassStyles.surface?.base || "var(--glass-bg-default)"}',
       gridStyle: 'solid'
     },
     initialSelection,
@@ -48413,17 +48413,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,
@@ -48654,7 +48654,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
   // Memoized hex to RGB conversion function
   const hexToRgb = useCallback(hex => {
     // Provide a default color if hex is undefined
-    const safeHex = hex || '#FFFFFF';
+    const safeHex = hex || 'var(--glass-white)';
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(safeHex);
     return result ? "".concat(parseInt(result === null || result === void 0 ? void 0 : result[1], 16), ", ").concat(parseInt(result === null || result === void 0 ? void 0 : result[2], 16), ", ").concat(parseInt(result === null || result === void 0 ? void 0 : result[3], 16)) : '255, 255, 255';
   }, []);
@@ -48669,7 +48669,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
       return {
         id: dataset.id,
         label: dataset.label,
-        color: color || '#FFFFFF',
+        color: color || 'var(--glass-white)',
         rgbColor,
         isActive,
         index
@@ -48744,7 +48744,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
           const key = "".concat(datasetIndex, "_").concat(dataIndex);
           setElementAnimationTargets(prev => {
             var _physicsOptions$click, _physicsOptions$click2, _physicsOptions$click3, _physicsOptions$click4;
-            return new Map(prev).set(key, _objectSpread2(_objectSpread2({}, prev.get(key)), {}, {
+            return new Map(prev).set(key, _objectSpread2(_objectSpread2({}, prev.get(key) || {}), {}, {
               targetScale: (_physicsOptions$click = (_physicsOptions$click2 = physicsOptions.clickEffect) === null || _physicsOptions$click2 === void 0 ? void 0 : _physicsOptions$click2.scale) !== null && _physicsOptions$click !== void 0 ? _physicsOptions$click : 1,
               targetOpacity: (_physicsOptions$click3 = (_physicsOptions$click4 = physicsOptions.clickEffect) === null || _physicsOptions$click4 === void 0 ? void 0 : _physicsOptions$click4.opacity) !== null && _physicsOptions$click3 !== void 0 ? _physicsOptions$click3 : 1
               // Add other effects
@@ -48803,7 +48803,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
         if (physicsOptions !== null && physicsOptions !== void 0 && physicsOptions.hoverEffect) {
           setElementAnimationTargets(prev => {
             var _physicsOptions$hover, _physicsOptions$hover2, _physicsOptions$hover3, _physicsOptions$hover4;
-            return new Map(prev).set(currentHoveredKey, _objectSpread2(_objectSpread2({}, prev.get(currentHoveredKey)), {}, {
+            return new Map(prev).set(currentHoveredKey, _objectSpread2(_objectSpread2({}, prev.get(currentHoveredKey) || {}), {}, {
               targetScale: (_physicsOptions$hover = (_physicsOptions$hover2 = physicsOptions.hoverEffect) === null || _physicsOptions$hover2 === void 0 ? void 0 : _physicsOptions$hover2.scale) !== null && _physicsOptions$hover !== void 0 ? _physicsOptions$hover : 1,
               targetOpacity: (_physicsOptions$hover3 = (_physicsOptions$hover4 = physicsOptions.hoverEffect) === null || _physicsOptions$hover4 === void 0 ? void 0 : _physicsOptions$hover4.opacity) !== null && _physicsOptions$hover3 !== void 0 ? _physicsOptions$hover3 : 1
               // Add other effects
@@ -48847,7 +48847,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
     // Reset animation targets for previously hovered element if it's different
     // Only reset if physics hover effects are enabled
     if (interaction.physicsHoverEffects && previousHoveredKey && previousHoveredKey !== currentHoveredKey) {
-      setElementAnimationTargets(prev => new Map(prev).set(previousHoveredKey, _objectSpread2(_objectSpread2({}, prev.get(previousHoveredKey)), {}, {
+      setElementAnimationTargets(prev => new Map(prev).set(previousHoveredKey, _objectSpread2(_objectSpread2({}, prev.get(previousHoveredKey) || {}), {}, {
         targetScale: 1,
         targetOpacity: 1
         // Reset other effects
@@ -48937,12 +48937,12 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
       exportContext.textBaseline = 'middle';
       if (title) {
         exportContext.font = "bold ".concat(16 * devicePixelRatio, "px Inter, sans-serif");
-        exportContext.fillStyle = '#ffffff';
+        exportContext.fillStyle = 'var(--glass-white)';
         exportContext.fillText(title, exportCanvas.width / 2, 25 * devicePixelRatio);
       }
       if (subtitle) {
         exportContext.font = "".concat(14 * devicePixelRatio, "px Inter, sans-serif");
-        exportContext.fillStyle = '${glassStyles.text?.secondary || "rgba(255, 255, 255, 0.7)"}';
+        exportContext.fillStyle = '${glassStyles.text?.secondary || "rgba(var(--glass-color-white) / var(--glass-opacity-70))"}';
         exportContext.fillText(subtitle, exportCanvas.width / 2, title ? 45 * devicePixelRatio : 25 * devicePixelRatio);
       }
     }
@@ -49081,7 +49081,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
         top: "".concat((_hoveredPoint$y = hoveredPoint.y) !== null && _hoveredPoint$y !== void 0 ? _hoveredPoint$y : 0, "px")
       },
       children: [jsx(TooltipHeader, {
-        "$color": ((_hoveredPoint$value = hoveredPoint.value) === null || _hoveredPoint$value === void 0 ? void 0 : _hoveredPoint$value.color) || '#FFFFFF',
+        "$color": ((_hoveredPoint$value = hoveredPoint.value) === null || _hoveredPoint$value === void 0 ? void 0 : _hoveredPoint$value.color) || 'var(--glass-white)',
         children: ((_hoveredPoint$value2 = hoveredPoint.value) === null || _hoveredPoint$value2 === void 0 ? void 0 : _hoveredPoint$value2.dataset) || 'Data'
       }), jsxs(TooltipRow, {
         children: [jsxs(TooltipLabel, {
@@ -49106,7 +49106,7 @@ const GlassDataChartComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
       content: jsxs("div", {
         children: [jsx("div", {
           style: {
-            color: ((_hoveredPoint$value6 = hoveredPoint.value) === null || _hoveredPoint$value6 === void 0 ? void 0 : _hoveredPoint$value6.color) || '#FFFFFF'
+            color: ((_hoveredPoint$value6 = hoveredPoint.value) === null || _hoveredPoint$value6 === void 0 ? void 0 : _hoveredPoint$value6.color) || 'var(--glass-white)'
           },
           children: String((_hoveredPoint$value$d = (_hoveredPoint$value7 = hoveredPoint.value) === null || _hoveredPoint$value7 === void 0 ? void 0 : _hoveredPoint$value7.dataset) !== null && _hoveredPoint$value$d !== void 0 ? _hoveredPoint$value$d : 'Dataset')
         }), jsxs("div", {
@@ -50089,10 +50089,10 @@ const GlassColorSchemeGenerator = _ref => {
     }
     return _objectSpread2(_objectSpread2({}, colors), {}, {
       neutral: hslToHex(h, 10, 50),
-      success: '#10b981',
-      warning: '#f59e0b',
-      error: '#ef4444',
-      info: '#3b82f6',
+      success: 'var(--glass-color-success)',
+      warning: 'var(--glass-color-warning)',
+      error: 'var(--glass-color-danger)',
+      info: 'var(--glass-color-primary)',
       background: hslToHex(h, 20, 5),
       surface: hslToHex(h, 15, 10),
       text: hslToHex(h, 10, 95)
@@ -51241,7 +51241,7 @@ const GlassMindMap = _ref => {
     const lines = [];
     const addConnection = (fromNode, toNode) => {
       const connection = connections.find(c => c.from === fromNode.id && c.to === toNode.id);
-      const color = (connection === null || connection === void 0 ? void 0 : connection.color) || '#ffffff40';
+      const color = (connection === null || connection === void 0 ? void 0 : connection.color) || 'var(--glass-white)40';
       const strokeDasharray = (connection === null || connection === void 0 ? void 0 : connection.type) === 'dashed' ? '5,5' : (connection === null || connection === void 0 ? void 0 : connection.type) === 'dotted' ? '2,2' : 'none';
       lines.push(jsx("line", {
         x1: fromNode.position.x + 50,
@@ -51324,8 +51324,8 @@ const GlassMindMap = _ref => {
               width: nodeSize,
               height: nodeHeight,
               rx: "8",
-              fill: node.color || '#ffffff20',
-              stroke: isSelected ? '#ffffff60' : '#ffffff30',
+              fill: node.color || 'var(--glass-white)20',
+              stroke: isSelected ? 'var(--glass-white)60' : 'var(--glass-white)30',
               strokeWidth: isSelected ? '2' : '1'
             });
             break;
@@ -51334,8 +51334,8 @@ const GlassMindMap = _ref => {
             const centerY = node.position.y + nodeHeight / 2;
             shapeElement = jsx("polygon", {
               points: "".concat(centerX, ",").concat(centerY - nodeHeight / 2, " ").concat(centerX + nodeSize / 2, ",").concat(centerY, " ").concat(centerX, ",").concat(centerY + nodeHeight / 2, " ").concat(centerX - nodeSize / 2, ",").concat(centerY),
-              fill: node.color || '#ffffff20',
-              stroke: isSelected ? '#ffffff60' : '#ffffff30',
+              fill: node.color || 'var(--glass-white)20',
+              stroke: isSelected ? 'var(--glass-white)60' : 'var(--glass-white)30',
               strokeWidth: isSelected ? '2' : '1'
             });
             break;
@@ -51345,8 +51345,8 @@ const GlassMindMap = _ref => {
               cx: node.position.x + nodeSize / 2,
               cy: node.position.y + nodeHeight / 2,
               r: Math.min(nodeSize, nodeHeight) / 2,
-              fill: node.color || '#ffffff20',
-              stroke: isSelected ? '#ffffff60' : '#ffffff30',
+              fill: node.color || 'var(--glass-white)20',
+              stroke: isSelected ? 'var(--glass-white)60' : 'var(--glass-white)30',
               strokeWidth: isSelected ? '2' : '1'
             });
         }
@@ -51400,7 +51400,7 @@ const GlassMindMap = _ref => {
           cx: (node.position.x + 160) / 3,
           cy: (node.position.y + 120) / 3,
           r: "2",
-          fill: "#ffffff60"
+          fill: "var(--glass-white)60"
         }, "mini-".concat(node.id)))
       })
     }), jsx("div", {
@@ -51428,7 +51428,7 @@ const GlassMindMap = _ref => {
             orient: "auto",
             children: jsx("polygon", {
               points: "0 0, 10 3.5, 0 7",
-              fill: "#ffffff40"
+              fill: "var(--glass-white)40"
             })
           })
         }), renderConnections(), renderNodes()]
@@ -51486,7 +51486,7 @@ const useMindMap = initialData => {
   };
 };
-const defaultColors = ['#ffffff', '#000000', '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
+const defaultColors = ['var(--glass-white)', 'var(--glass-black)', '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
 const defaultTools = ['pen', 'eraser', 'rectangle', 'circle', 'line', 'text', 'select'];
 const GlassWhiteboard = _ref => {
   let {
@@ -51506,7 +51506,7 @@ const GlassWhiteboard = _ref => {
     onColorChange
   } = _ref;
   const [currentTool, setCurrentTool] = useState('pen');
-  const [currentColor, setCurrentColor] = useState('#000000');
+  const [currentColor, setCurrentColor] = useState('var(--glass-black)');
   const [brushSize, setBrushSize] = useState(2);
   const [opacity, setOpacity] = useState(1);
   const [isDrawing, setIsDrawing] = useState(false);
@@ -51570,7 +51570,7 @@ const GlassWhiteboard = _ref => {
         id: "path-".concat(Date.now(), "-").concat(Math.random()),
         tool: currentTool,
         points: [pos],
-        color: currentTool === 'eraser' ? '#ffffff' : currentColor,
+        color: currentTool === 'eraser' ? 'var(--glass-white)' : currentColor,
         width: brushSize,
         opacity,
         timestamp: Date.now()
@@ -51671,7 +51671,7 @@ const GlassWhiteboard = _ref => {
     ctx.clearRect(0, 0, width, height);
     switch (backgroundPattern) {
       case 'grid':
-        ctx.strokeStyle = '#ffffff10';
+        ctx.strokeStyle = 'var(--glass-white)10';
         ctx.lineWidth = 1;
         for (let x = 0; x < width; x += 20) {
           ctx.beginPath();
@@ -51687,7 +51687,7 @@ const GlassWhiteboard = _ref => {
         }
         break;
       case 'dots':
-        ctx.fillStyle = '#ffffff20';
+        ctx.fillStyle = 'var(--glass-white)20';
         for (let x = 20; x < width; x += 20) {
           for (let y = 20; y < height; y += 20) {
             ctx.beginPath();
@@ -51697,7 +51697,7 @@ const GlassWhiteboard = _ref => {
         }
         break;
       case 'lines':
-        ctx.strokeStyle = '#ffffff10';
+        ctx.strokeStyle = 'var(--glass-white)10';
         ctx.lineWidth = 1;
         for (let y = 0; y < height; y += 40) {
           ctx.beginPath();
@@ -51773,7 +51773,7 @@ const GlassWhiteboard = _ref => {
       var _element$points3;
       const element = drawingData.find(item => (item === null || item === void 0 ? void 0 : item.id) === elementId);
       if (!element) return;
-      ctx.strokeStyle = '#ffffff';
+      ctx.strokeStyle = 'var(--glass-white)';
       ctx.lineWidth = 2;
       ctx.setLineDash([5, 5]);
       if ('points' in element && (((_element$points3 = element.points) === null || _element$points3 === void 0 ? void 0 : _element$points3.length) || 0) > 0) {
@@ -51827,7 +51827,7 @@ const GlassWhiteboard = _ref => {
     drawSelection(ctx);
     // Draw selection box
     if (selectionBox && isSelecting) {
-      overlayCtx.strokeStyle = '#ffffff80';
+      overlayCtx.strokeStyle = 'var(--glass-white)80';
       overlayCtx.lineWidth = 1;
       overlayCtx.setLineDash([5, 5]);
       overlayCtx.strokeRect(selectionBox.x, selectionBox.y, selectionBox.width, selectionBox.height);
@@ -57082,7 +57082,7 @@ const FilterGroupContent = _ref2 => {
 const _excluded$10 = ["elements", "loop"];
 const DEFAULT_OPTIONS$4 = {
   enabled: true,
-  color: 'rgba(59, 130, 246, 0.5)',
+  color: 'var(--glass-color-primary, 0.5)',
   width: 2,
   blur: 4,
   spread: 2,
@@ -57362,7 +57362,7 @@ const ACCESSIBILITY = {
   focusRing: {
     width: '2px',
     style: 'solid',
-    color: 'rgba(59, 130, 246, 0.5)',
+    color: 'var(--glass-color-primary, 0.5)',
     offset: '2px'
   },
   // Reduced motion
@@ -58686,7 +58686,7 @@ const GlassGradientPicker = _ref => {
   const [selectedType, setSelectedType] = useState('linear');
   const [angle, setAngle] = useState(45);
   const [stops, setStops] = useState([{
-    color: '#3b82f6',
+    color: 'var(--glass-color-primary)',
     position: 0
   }, {
     color: '#8b5cf6',
@@ -58781,7 +58781,7 @@ const GlassGradientPicker = _ref => {
   const handleAddStop = useCallback(() => {
     if (stops.length >= maxStops) return;
     const newStop = {
-      color: '#ffffff',
+      color: 'var(--glass-white)',
       position: 50
     };
     setStops(prev => [...prev, newStop]);
@@ -58842,7 +58842,7 @@ const GlassGradientPicker = _ref => {
     setSelectedType('linear');
     setAngle(45);
     setStops([{
-      color: '#3b82f6',
+      color: 'var(--glass-color-primary)',
       position: 0
     }, {
       color: '#8b5cf6',
@@ -60891,7 +60891,7 @@ function GlassSpotlight(_ref) {
     width: targetRect.width + pad * 2,
     height: targetRect.height + pad * 2,
     borderRadius: 12,
-    boxShadow: '0 0 0 9999px rgba(0,0,0,0.6)',
+    boxShadow: '0 0 0 9999px var(--glass-text-tertiary-dark)',
     pointerEvents: 'none'
   };
   return jsx("div", {
@@ -61080,10 +61080,10 @@ const GlassThemeSwitcher = _ref => {
   const [selectedTheme, setSelectedTheme] = useState(currentTheme);
   const [showCustomizer, setShowCustomizer] = useState(false);
   const [customColors, setCustomColors] = useState({
-    primary: '#3b82f6',
+    primary: 'var(--glass-color-primary)',
     secondary: '#64748b',
-    background: '#ffffff',
-    text: '#000000'
+    background: 'var(--glass-white)',
+    text: 'var(--glass-black)'
   });
   // System theme options
   const systemThemes = [{
@@ -61091,20 +61091,20 @@ const GlassThemeSwitcher = _ref => {
     name: 'Light',
     icon: Sun,
     preview: {
-      primary: '#3b82f6',
+      primary: 'var(--glass-color-primary)',
       secondary: '#64748b',
-      background: '#ffffff',
-      text: '#000000'
+      background: 'var(--glass-white)',
+      text: 'var(--glass-black)'
     }
   }, {
     id: 'dark',
     name: 'Dark',
     icon: Moon,
     preview: {
-      primary: '#60a5fa',
+      primary: 'var(--glass-color-primary-light)',
       secondary: '#94a3b8',
       background: '#0f172a',
-      text: '#ffffff'
+      text: 'var(--glass-white)'
     }
   }, ...(enableSystemTheme ? [{
     id: 'system',
@@ -61342,7 +61342,7 @@ const CursorGlow = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       size = 280,
       intensity = 0.6,
-      color = '#ffffff',
+      color = 'var(--glass-white)',
       opacity = 0.18,
       global = true,
       respectMotionPreference = true,
@@ -61728,7 +61728,7 @@ const GlassThemeDemo = /*#__PURE__*/forwardRef((_ref, ref) => {
             style: {
               marginTop: '16px',
               marginBottom: '16px',
-              borderTop: '1px solid rgba(0,0,0,0.1)'
+              borderTop: '1px solid rgba(var(--glass-color-black) / var(--glass-opacity-10))'
             }
           }), jsx(Typography, {
             children: "Below divider"
@@ -66847,9 +66847,9 @@ const DynamicAtmosphere = /*#__PURE__*/forwardRef((props, ref) => {
       type = 'subtle',
       primaryColor = '#6366F1',
       // Primary (purple)
-      secondaryColor = '#3B82F6',
+      secondaryColor = 'var(--glass-color-primary)',
       // Secondary (blue)
-      accentColor = '#10B981',
+      accentColor = 'var(--glass-color-success)',
       // Accent (green)
       intensity = 0.5,
       speed = 1,
@@ -67030,7 +67030,7 @@ const DimensionalGlass = /*#__PURE__*/forwardRef((_ref, ref) => {
       dynamicShadow = true,
       animate = false,
       zIndex = 1,
-      backgroundColor = 'rgba(255, 255, 255, 0.1)',
+      backgroundColor = 'var(--glass-bg-default)',
       maxTilt = 5,
       hoverScale = 1.02,
       animationConfig,
@@ -67227,7 +67227,7 @@ const FrostedGlass = /*#__PURE__*/forwardRef((_ref, ref) => {
       interactive = true,
       padding = 16,
       intensity = 0.5,
-      frostColor = 'rgba(255, 255, 255, 0.8)',
+      frostColor = 'rgba(var(--glass-color-white) / var(--glass-opacity-80))',
       animate = true,
       pattern = 'noise',
       backgroundColor,
@@ -67334,10 +67334,10 @@ const FrostedGlass = /*#__PURE__*/forwardRef((_ref, ref) => {
       interactive && ['cursor-pointer', 'hover:-translate-y-0.5', 'active:translate-y-0'],
       // Glow effect
       glowColor && {
-        'primary': 'drop-shadow-[0_0_18px_rgba(59,130,246,0.28)]',
-        'success': 'drop-shadow-[0_0_18px_rgba(16,185,129,0.28)]',
-        'warning': 'drop-shadow-[0_0_18px_rgba(245,158,11,0.28)]',
-        'danger': 'drop-shadow-[0_0_18px_rgba(239,68,68,0.28)]',
+        'primary': 'drop-shadow-[0_0_18px_var(--glass-color-primary,0.28)]',
+        'success': 'drop-shadow-[0_0_18px_var(--glass-color-success,0.28)]',
+        'warning': 'drop-shadow-[0_0_18px_var(--glass-color-warning,0.28)]',
+        'danger': 'drop-shadow-[0_0_18px_var(--glass-color-danger,0.28)]',
         'info': 'drop-shadow-[0_0_18px_rgba(14,165,233,0.28)]'
       }[glowColor], className),
       style: _objectSpread2({
@@ -67828,7 +67828,7 @@ var _templateObject$g, _templateObject2$d, _templateObject3$a, _templateObject4$
 const gradientShift = mt(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n  0% {\n    background-position: 0% 50%;\n  }\n  50% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n"])));
 const cloudMove = mt(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(-5%) translateY(0);\n  }\n  50% {\n    transform: translateX(5%) translateY(-3%);\n  }\n  100% {\n    transform: translateX(-5%) translateY(0);\n  }\n"])));
 // Default gradient colors
-const defaultGradientColors = ['rgba(59, 130, 246, 0.5)',
+const defaultGradientColors = ['var(--glass-color-primary, 0.5)',
 // Blue
 'rgba(99, 102, 241, 0.5)',
 // Indigo
@@ -67978,7 +67978,7 @@ const ParticleBackgroundComponent = (props, ref) => {
       className,
       style,
       baseColor = 'rgba(10, 10, 20, 0.8)',
-      particleColor = 'rgba(255, 255, 255, 0.7)',
+      particleColor = 'rgba(var(--glass-color-white) / var(--glass-opacity-70))',
       particleCount = 50,
       particleSize = 2,
       particleSpeed = 1,
@@ -68014,7 +68014,7 @@ const ParticleBackgroundComponent = (props, ref) => {
   const actualCount = (_ref = count !== null && count !== void 0 ? count : particleCount) !== null && _ref !== void 0 ? _ref : 50;
   const actualSize = (_ref2 = size !== null && size !== void 0 ? size : particleSize) !== null && _ref2 !== void 0 ? _ref2 : 2;
   const actualSpeed = (_ref3 = speed !== null && speed !== void 0 ? speed : particleSpeed) !== null && _ref3 !== void 0 ? _ref3 : 1;
-  const actualColor = (_ref4 = color !== null && color !== void 0 ? color : particleColor) !== null && _ref4 !== void 0 ? _ref4 : 'rgba(255, 255, 255, 0.7)';
+  const actualColor = (_ref4 = color !== null && color !== void 0 ? color : particleColor) !== null && _ref4 !== void 0 ? _ref4 : 'rgba(var(--glass-color-white) / var(--glass-opacity-70))';
   // Helper function to get color values
   const getColorValues = colorStr => {
     if (colorStr.startsWith('rgba(')) {
@@ -69703,7 +69703,7 @@ const DefaultEndIcon = () => jsx("svg", {
 });
 // Styled components
 const TreeItemRoot = dt.li(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  outline: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));
-const TreeItemContent = dt.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: ", ";\n  border-radius: 4px;\n  cursor: ", ";\n  user-select: none;\n  transition: background-color 0.2s ease;\n  color: ", ";\n\n  /* Selected state */\n  background-color: ", ";\n\n  /* Focused state */\n  ", "\n\n  /* Accessible focus ring */\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ", 0 0 0 6px rgba(59, 130, 246, 0.15);\n  }\n\n  /* Glass hover effect */\n  ", "\n"])), props => props.$size === 'small' ? '4px 8px' : props.$size === 'large' ? '8px 16px' : '6px 12px', props => props.$disabled ? 'default' : 'pointer', props => props.$disabled ? 'rgba(255, 255, 255, 0.5)' : props.$selected ? 'var(--tree-view-color, ${glassStyles.text?.primary || "rgba(255, 255, 255, 0.9)"})' : 'rgba(255, 255, 255, 0.8)', props => props.$selected ? 'rgba(255, 255, 255, 0.08)' : 'transparent', props => props.$focused && !props.$disabled && "\n    outline: 1px dashed var(--tree-view-color, ".concat(AURA_GLASS.surfaces.neutral.level2.text.primary, ");\n  "), AURA_GLASS.surfaces.neutral.level2.border.color, props => !props.$disabled && "\n    &:hover {\n      background-color: ".concat(props.$glass ? '${glassStyles.surface?.base || "rgba(255, 255, 255, 0.05)"}' : 'rgba(255, 255, 255, 0.04)', ";\n    }\n  "));
+const TreeItemContent = dt.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: ", ";\n  border-radius: 4px;\n  cursor: ", ";\n  user-select: none;\n  transition: background-color 0.2s ease;\n  color: ", ";\n\n  /* Selected state */\n  background-color: ", ";\n\n  /* Focused state */\n  ", "\n\n  /* Accessible focus ring */\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ", 0 0 0 6px var(--glass-color-primary, 0.15);\n  }\n\n  /* Glass hover effect */\n  ", "\n"])), props => props.$size === 'small' ? '4px 8px' : props.$size === 'large' ? '8px 16px' : '6px 12px', props => props.$disabled ? 'default' : 'pointer', props => props.$disabled ? 'var(--glass-border-hover)' : props.$selected ? 'var(--tree-view-color, ${glassStyles.text?.primary || "rgba(var(--glass-color-white) / var(--glass-opacity-90))"})' : 'rgba(var(--glass-color-white) / var(--glass-opacity-80))', props => props.$selected ? 'rgba(255, 255, 255, 0.08)' : 'transparent', props => props.$focused && !props.$disabled && "\n    outline: 1px dashed var(--tree-view-color, ".concat(AURA_GLASS.surfaces.neutral.level2.text.primary, ");\n  "), AURA_GLASS.surfaces.neutral.level2.border.color, props => !props.$disabled && "\n    &:hover {\n      background-color: ".concat(props.$glass ? '${glassStyles.surface?.base || "rgba(255, 255, 255, 0.05)"}' : 'rgba(255, 255, 255, 0.04)', ";\n    }\n  "));
 const ContentLabel = dt.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  flex: 1;\n  margin-left: 4px;\n"])));
 const IconContainer = dt.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 4px;\n"])));
 const TreeItemChildren = dt.ul(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  padding-left: 16px;\n  overflow: hidden;\n"])));
@@ -70059,7 +70059,7 @@ function FocusIndicatorComponent(props, ref) {
     });
     // Add blur for glow + glass
     if (finalFocusStyle === 'glow' && glass) {
-      style.backdropFilter = 'blur(4px)';
+      style.backdropFilter = 'blur(var(--glass-blur-sm))';
     }
     return style;
   }, [componentStyle, animatedValues, finalFocusStyle, finalColor, finalHighContrast, glass]);
@@ -70399,7 +70399,7 @@ const getStateColor = (state, color) => {
     case 'focus':
       return "rgba(".concat(userColor, ", 0.2)");
     case 'disabled':
-      return '${glassStyles.surface?.base || "rgba(255, 255, 255, 0.1)"}';
+      return '${glassStyles.surface?.base || "var(--glass-bg-default)"}';
     case 'loading':
       return "rgba(".concat(userColor, ", 0.2)");
     case 'success':
@@ -70979,7 +70979,7 @@ const getCookie$2 = name => {
   }
   return null;
 };
-const StyledCompactCookieNotice = dt.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  position: fixed;\n  z-index: 1000;\n  padding: 0.75rem 1rem;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  box-sizing: border-box;\n  width: auto;\n  max-width: 100%;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  will-change: transform, opacity;\n\n  ", "\n\n  ", "\n  \n  ", "\n  \n  @media (max-width: 600px) {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.75rem;\n\n    ", "\n  }\n"])), _ref => {
+const StyledCompactCookieNotice = dt.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  position: fixed;\n  z-index: 1000;\n  padding: 0.75rem 1rem;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  box-sizing: border-box;\n  width: auto;\n  max-width: 100%;\n  box-shadow: 0 2px 10px rgba(var(--glass-color-black) / var(--glass-opacity-10));\n  will-change: transform, opacity;\n\n  ", "\n\n  ", "\n  \n  ", "\n  \n  @media (max-width: 600px) {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.75rem;\n\n    ", "\n  }\n"])), _ref => {
   let {
     $position
   } = _ref;
@@ -71009,7 +71009,7 @@ const StyledCompactCookieNotice = dt.div(_templateObject$2 || (_templateObject$2
     return "".concat(key.replace(/([A-Z])/g, '-$1').toLowerCase(), ":").concat(value, ";");
   }).join('');
 }, _ref3 => {
-  return "\n    border: 1px solid rgba(255, 255, 255, 0.25);\n  ";
+  return "\n    border: 1px solid var(--glass-bg-default);\n  ";
 }, _ref4 => {
   let {
     $position
@@ -71764,8 +71764,8 @@ const GlassLinkButton = /*#__PURE__*/forwardRef((_ref, ref) => {
         borderRadius: 'inherit',
         padding: '1px',
         background: '/* Use createGlassStyle({ intent: "neutral", elevation: "level3" }) */',
-        mask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
-        WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
+        mask: 'linear-gradient(var(--glass-black) 0 0) content-box, linear-gradient(var(--glass-black) 0 0)',
+        WebkitMask: 'linear-gradient(var(--glass-black) 0 0) content-box, linear-gradient(var(--glass-black) 0 0)',
         WebkitMaskComposite: 'xor',
         maskComposite: 'exclude',
         opacity: 0.8
@@ -72324,7 +72324,7 @@ function GlassPrismComparison() {
           className: "text-primary/50 text-lg",
           children: [jsx(motion.span, {
             animate: {
-              color: ["#ffffff", "#00f5ff", "#ffffff"]
+              color: ["var(--glass-white)", "#00f5ff", "var(--glass-white)"]
             },
             transition: {
               duration: 2,
@@ -72789,7 +72789,7 @@ const GlassWipeSliderComponent = _ref => {
         left: "".concat(position, "%"),
         transform: 'translateX(-50%)'
       }), {}, {
-        boxShadow: isDragging || isHovered ? '0 0 20px ${glassStyles.borderColor || "rgba(59, 130, 246, 0.6)"}' : '0 0 10px ${glassStyles.borderColor || "rgba(255, 255, 255, 0.3)"}'
+        boxShadow: isDragging || isHovered ? '0 0 20px ${glassStyles.borderColor || "var(--glass-color-primary, 0.6)"}' : '0 0 10px ${glassStyles.borderColor || "var(--glass-bg-hover)"}'
       }),
       children: [jsx("div", {
         className: cn("absolute inset-0", isVertical ? "bg-gradient-to-t from-transparent via-white/20 to-transparent" : "bg-gradient-to-r from-transparent via-white/20 to-transparent")
@@ -72822,7 +72822,7 @@ const GlassWipeSliderComponent = _ref => {
         scale: 0.95
       },
       animate: {
-        boxShadow: isDragging || isFocused ? '0 0 30px ${glassStyles.borderColor || "rgba(59, 130, 246, 0.6)"}' : isHovered ? '0 0 25px rgba(255, 255, 255, 0.4)' : '0 0 20px ${glassStyles.borderColor || "rgba(255, 255, 255, 0.3)"}'
+        boxShadow: isDragging || isFocused ? '0 0 30px ${glassStyles.borderColor || "var(--glass-color-primary, 0.6)"}' : isHovered ? '0 0 25px var(--glass-border-default)' : '0 0 20px ${glassStyles.borderColor || "var(--glass-bg-hover)"}'
       }
     })), {}, {
       transition: getTransition(duration / 1000),
@@ -73153,7 +73153,7 @@ const MotionAwareGlass = /*#__PURE__*/forwardRef((_ref, ref) => {
       return {
         hover: {
           backgroundColor: '/* Use createGlassStyle({ intent: "neutral", elevation: "level2" }) */',
-          borderColor: 'rgba(255, 255, 255, 0.25)',
+          borderColor: 'var(--glass-bg-default)',
           transition: {
             duration: 0.001
           }
@@ -73163,7 +73163,7 @@ const MotionAwareGlass = /*#__PURE__*/forwardRef((_ref, ref) => {
     return {
       hover: {
         backgroundColor: '/* Use createGlassStyle({ intent: "neutral", elevation: "level2" }) */',
-        borderColor: 'rgba(255, 255, 255, 0.25)',
+        borderColor: 'var(--glass-bg-default)',
         y: -2,
         transition: {
           duration: 0.2
@@ -74462,7 +74462,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,
@@ -78291,7 +78291,7 @@ const glowEffects = {
 const createGlowEffect = function () {
   let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
-    color = '#ffffff',
+    color = 'var(--glass-white)',
     intensity = 'standard',
     size = 30,
     spread = 0,
@@ -78321,22 +78321,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 = {
@@ -81217,7 +81217,7 @@ class AuraGlassProduction {
     document.head.appendChild(style);
   }
   generateProductionCSS() {
-    return "\n      /* AuraGlass Production Styles */\n      .aura-glass-root {\n        --aura-animation-duration: ".concat(this.config.animations.duration, "ms;\n        --aura-animation-easing: ").concat(this.config.animations.easing, ";\n        --aura-quality-tier: ").concat(this.config.qualityTier, ";\n      }\n\n      .aura-glass-performance-low {\n        --aura-animation-duration: 200ms;\n        --aura-blur-amount: 4px;\n        --aura-particle-count: 10;\n      }\n\n      .aura-glass-performance-medium {\n        --aura-animation-duration: 300ms;\n        --aura-blur-amount: 8px;\n        --aura-particle-count: 25;\n      }\n\n      .aura-glass-performance-high {\n        --aura-animation-duration: 250ms;\n        --aura-blur-amount: 12px;\n        --aura-particle-count: 50;\n      }\n\n      .aura-glass-performance-ultra {\n        --aura-animation-duration: 200ms;\n        --aura-blur-amount: 16px;\n        --aura-particle-count: 100;\n      }\n\n      /* Reduced motion support */\n      @media (prefers-reduced-motion: reduce) {\n        .aura-glass-root * {\n          animation-duration: 0.01ms !important;\n          animation-iteration-count: 1 !important;\n          transition-duration: 0.01ms !important;\n        }\n      }\n\n      /* High contrast support */\n      @media (prefers-contrast: high) {\n        .aura-glass-surface {\n          border: 2px solid rgba(255, 255, 255, 0.8) !important;\n          background: rgba(0, 0, 0, 0.95) !important;\n        }\n      }\n    ");
+    return "\n      /* AuraGlass Production Styles */\n      .aura-glass-root {\n        --aura-animation-duration: ".concat(this.config.animations.duration, "ms;\n        --aura-animation-easing: ").concat(this.config.animations.easing, ";\n        --aura-quality-tier: ").concat(this.config.qualityTier, ";\n      }\n\n      .aura-glass-performance-low {\n        --aura-animation-duration: 200ms;\n        --aura-blur-amount: 4px;\n        --aura-particle-count: 10;\n      }\n\n      .aura-glass-performance-medium {\n        --aura-animation-duration: 300ms;\n        --aura-blur-amount: 8px;\n        --aura-particle-count: 25;\n      }\n\n      .aura-glass-performance-high {\n        --aura-animation-duration: 250ms;\n        --aura-blur-amount: 12px;\n        --aura-particle-count: 50;\n      }\n\n      .aura-glass-performance-ultra {\n        --aura-animation-duration: 200ms;\n        --aura-blur-amount: 16px;\n        --aura-particle-count: 100;\n      }\n\n      /* Reduced motion support */\n      @media (prefers-reduced-motion: reduce) {\n        .aura-glass-root * {\n          animation-duration: 0.01ms !important;\n          animation-iteration-count: 1 !important;\n          transition-duration: 0.01ms !important;\n        }\n      }\n\n      /* High contrast support */\n      @media (prefers-contrast: high) {\n        .aura-glass-surface {\n          border: 2px solid var(--glass-text-secondary) !important;\n          background: rgba(0, 0, 0, 0.95) !important;\n        }\n      }\n    ");
   }
   setupPerformanceMonitoring() {
     // Monitor component render times
@@ -81445,7 +81445,7 @@ const devUtils = process.env.NODE_ENV === 'development' ? {
     document.documentElement.classList.add('aura-glass-debug');
     const debugStyle = document.createElement('style');
     debugStyle.id = 'aura-glass-debug-styles';
-    debugStyle.textContent = "\n      .aura-glass-debug .glass-surface {\n        outline: 1px dashed rgba(255, 0, 0, 0.5) !important;\n      }\n      .aura-glass-debug .glass-surface::before {\n        content: attr(class);\n        position: absolute;\n        top: -20px;\n        left: 0;\n        font-size: 10px;\n        color: red;\n        background: rgba(0, 0, 0, 0.8);\n        padding: 2px 4px;\n        border-radius: 2px;\n        z-index: 10000;\n      }\n    ";
+    debugStyle.textContent = "\n      .aura-glass-debug .glass-surface {\n        outline: 1px dashed rgba(255, 0, 0, 0.5) !important;\n      }\n      .aura-glass-debug .glass-surface::before {\n        content: attr(class);\n        position: absolute;\n        top: -20px;\n        left: 0;\n        font-size: 10px;\n        color: red;\n        background: var(--glass-text-secondary-dark);\n        padding: 2px 4px;\n        border-radius: 2px;\n        z-index: 10000;\n      }\n    ";
     document.head.appendChild(debugStyle);
   },
   // Disable debug mode
@@ -81757,7 +81757,7 @@ const elementStyles = {
     if (info.focusable) {
       baseStyles.outline = 'none';
       baseStyles['&:focus-visible'] = {
-        outline: '2px solid rgba(59, 130, 246, 0.5)',
+        outline: '2px solid var(--glass-color-primary, 0.5)',
         outlineOffset: '2px'
       };
     }
@@ -81856,17 +81856,17 @@ const elementAccessibility = {
 const createGlassTheme = function () {
   let baseTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const defaultColors = {
-    primary: '#3b82f6',
-    secondary: '#6b7280',
+    primary: 'var(--glass-color-primary)',
+    secondary: 'var(--glass-gray-500)',
     accent: '#8b5cf6',
     background: '#0b1220',
     surface: 'rgba(255,255,255,0.06)',
     text: 'rgba(255,255,255,0.92)',
-    textSecondary: 'rgba(255,255,255,0.7)',
+    textSecondary: 'var(--glass-text-secondary)',
     border: 'rgba(255,255,255,0.16)',
-    error: '#ef4444',
-    warning: '#f59e0b',
-    success: '#10b981',
+    error: 'var(--glass-color-danger)',
+    warning: 'var(--glass-color-warning)',
+    success: 'var(--glass-color-success)',
     info: '#0ea5e9'
   };
   return _objectSpread2({
@@ -82099,36 +82099,36 @@ 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)'
     }
   });
 };