@vritti/quantum-ui 0.1.1 → 0.1.2

package/dist/ThemeScript-BcAiGxU5.js

@@ -1,1586 +0,0 @@
-import { createTheme } from '@mui/material/styles';
-import { jsx } from 'react/jsx-runtime';
-
-const ButtonTheme = {
-  styleOverrides: {
-    root: {
-      borderRadius: "var(--quantum-borderRadius-medium)",
-      fontFamily: "var(--quantum-typography-fontFamily-display)",
-      // Space Grotesk for buttons
-      fontWeight: "var(--quantum-typography-fontWeight-medium)",
-      fontSize: "var(--quantum-typography-variants-button-fontSize)",
-      lineHeight: "var(--quantum-typography-variants-button-lineHeight)",
-      textTransform: "none",
-      transition: "all var(--quantum-animation-duration-normal) var(--quantum-animation-easing-standard)",
-      cursor: "pointer",
-      position: "relative",
-      overflow: "hidden",
-      "&:focus-visible": {
-        outline: "2px solid var(--quantum-color-action-primary)",
-        outlineOffset: "2px"
-      },
-      "&:disabled": {
-        opacity: 0.5,
-        cursor: "not-allowed",
-        transform: "none",
-        // Disable all effects when disabled
-        "&::before, &::after": {
-          display: "none"
-        }
-      },
-      "&:hover:not(:disabled)": {
-        transform: "translateY(-1px)"
-      },
-      "&:active": {
-        transform: "translateY(0)"
-      },
-      // ======================
-      // PRIMARY: PROMINENT CONFIDENCE
-      // ======================
-      "&[data-intent='primary']": {
-        backgroundColor: "var(--quantum-color-action-primary)",
-        color: "var(--quantum-color-text-onPrimary)",
-        border: "none",
-        boxShadow: "0 4px 14px 0 rgba(var(--quantum-color-action-primaryRGB), 0.3)",
-        // Confident energy field - slower rotating radial gradient with primary color only
-        "&::before": {
-          content: '""',
-          position: "absolute",
-          inset: "-2px",
-          background: `
-            radial-gradient(
-              ellipse at top left,
-              var(--quantum-color-action-primary) 0%,
-              transparent 50%
-            ), 
-            radial-gradient(
-              ellipse at bottom right,
-              var(--quantum-color-action-primary) 0%,
-              transparent 50%
-            )
-          `,
-          borderRadius: "inherit",
-          zIndex: -1,
-          opacity: 0,
-          animation: "quantumConfidenceRotate 6s linear infinite",
-          "@media (prefers-reduced-motion: reduce)": {
-            animation: "none"
-          }
-        },
-        "&:hover:not(:disabled)": {
-          // ✅ FIXED: Using CSS color-mix instead of hardcoded values
-          backgroundColor: "color-mix(in srgb, var(--quantum-color-action-primary) 85%, var(--quantum-color-text-primary))",
-          boxShadow: `
-            0 6px 10px 0 rgba(var(--quantum-color-action-primaryRGB), 0.4),
-            0 0 10px rgba(var(--quantum-color-action-primaryRGB), 0.6),
-            inset 0 0 10px var(--quantum-effects-shimmer)
-          `,
-          transform: "translateY(-2px)",
-          "&::before": {
-            opacity: 0.6
-          }
-        },
-        // ✅ UNIFIED: Click energy burst effect
-        "&:active::after": {
-          content: '""',
-          position: "absolute",
-          top: "50%",
-          left: "50%",
-          width: "100%",
-          height: "100%",
-          background: "radial-gradient(circle, rgba(var(--quantum-color-action-primaryRGB), 0.6) 0%, transparent 70%)",
-          borderRadius: "50%",
-          transform: "translate(-50%, -50%) scale(0)",
-          animation: "quantumEnergyBurst 0.5s ease-out",
-          "@media (prefers-reduced-motion: reduce)": {
-            animation: "none",
-            opacity: 0
-          }
-        }
-      },
-      // ======================
-      // SECONDARY: NOTICEABLE INTELLIGENCE
-      // ======================
-      "&[data-intent='secondary']": {
-        backgroundColor: "transparent",
-        color: "var(--quantum-color-action-primary)",
-        border: "1.5px solid var(--quantum-color-action-primary)",
-        boxShadow: "none",
-        "&:hover:not(:disabled)": {
-          backgroundColor: "rgba(var(--quantum-color-action-secondaryRGB), 0.08)",
-          borderColor: "var(--quantum-color-action-secondary)",
-          boxShadow: "0 2px 8px rgba(var(--quantum-color-action-secondaryRGB), 0.5)",
-          color: "var(--quantum-color-action-secondary)"
-        }
-      },
-      // ======================
-      // DESTRUCTIVE: PROMINENT WARNING (IDENTICAL TO PRIMARY)
-      // ======================
-      "&[data-intent='destructive']": {
-        backgroundColor: "var(--quantum-color-feedback-error)",
-        color: "var(--quantum-color-text-onDestructive)",
-        border: "none",
-        boxShadow: "0 4px 14px 0 rgba(var(--quantum-color-feedback-errorRGB), 0.3)",
-        // ✅ UNIFIED: Identical confidence energy field effect (same as primary)
-        "&::before": {
-          content: '""',
-          position: "absolute",
-          inset: "-2px",
-          background: `
-            radial-gradient(
-              ellipse at top left,
-              var(--quantum-color-feedback-error) 0%,
-              transparent 50%
-            ), 
-            radial-gradient(
-              ellipse at bottom right,
-              var(--quantum-color-feedback-error) 0%,
-              transparent 50%
-            )
-          `,
-          borderRadius: "inherit",
-          zIndex: -1,
-          opacity: 0,
-          animation: "quantumConfidenceRotate 6s linear infinite",
-          // ✅ UNIFIED: Same timing as primary
-          "@media (prefers-reduced-motion: reduce)": {
-            animation: "none"
-          }
-        },
-        "&:hover:not(:disabled)": {
-          // ✅ UNIFIED: Same hover effects as primary
-          backgroundColor: "color-mix(in srgb, var(--quantum-color-feedback-error) 85%, var(--quantum-color-text-primary))",
-          boxShadow: `
-            0 6px 10px 0 rgba(var(--quantum-color-feedback-errorRGB), 0.4),
-            0 0 10px rgba(var(--quantum-color-feedback-errorRGB), 0.6),
-            inset 0 0 10px var(--quantum-effects-shimmer)
-          `,
-          transform: "translateY(-2px)",
-          "&::before": {
-            opacity: 0.6
-          }
-        },
-        // ✅ UNIFIED: Identical click energy burst effect
-        "&:active::after": {
-          content: '""',
-          position: "absolute",
-          top: "50%",
-          left: "50%",
-          width: "100%",
-          height: "100%",
-          background: "radial-gradient(circle, rgba(var(--quantum-color-feedback-errorRGB), 0.6) 0%, transparent 70%)",
-          borderRadius: "50%",
-          transform: "translate(-50%, -50%) scale(0)",
-          animation: "quantumEnergyBurst 0.5s ease-out",
-          "@media (prefers-reduced-motion: reduce)": {
-            animation: "none",
-            opacity: 0
-          }
-        }
-      },
-      // ======================
-      // GHOST: SUBTLE PRESENCE
-      // ======================
-      "&[data-intent='ghost']": {
-        backgroundColor: "transparent",
-        color: "var(--quantum-color-text-secondary)",
-        border: "none",
-        boxShadow: "none",
-        // Subtle intelligence hint
-        "&::before": {
-          content: '""',
-          position: "absolute",
-          inset: 0,
-          background: `radial-gradient(
-            circle at center,
-            rgba(var(--quantum-color-action-primaryRGB), 0.05) 0%,
-            transparent 70%
-          )`,
-          borderRadius: "inherit",
-          opacity: 0,
-          transition: "opacity 0.4s ease"
-        },
-        "&:hover:not(:disabled)": {
-          backgroundColor: "var(--quantum-color-surface-secondary)",
-          color: "var(--quantum-color-action-primary)",
-          boxShadow: "0 2px 8px rgba(var(--quantum-color-action-primaryRGB), 0.1)",
-          "&::before": {
-            opacity: 1
-          }
-        }
-      }
-    },
-    // ✅ ENHANCED: Consistent size variants with proper scaling
-    sizeSmall: {
-      padding: "var(--quantum-spacing-tight) var(--quantum-spacing-comfortable)",
-      fontSize: "var(--quantum-typography-variants-caption-fontSize)",
-      lineHeight: "var(--quantum-typography-variants-caption-lineHeight)",
-      minHeight: "32px"
-    },
-    sizeMedium: {
-      padding: "var(--quantum-spacing-normal) var(--quantum-spacing-spacious)",
-      fontSize: "var(--quantum-typography-variants-button-fontSize)",
-      lineHeight: "var(--quantum-typography-variants-button-lineHeight)",
-      minHeight: "40px"
-    },
-    sizeLarge: {
-      padding: "var(--quantum-spacing-comfortable) var(--quantum-spacing-loose)",
-      fontSize: "var(--quantum-typography-variants-body2-fontSize)",
-      lineHeight: "var(--quantum-typography-variants-body2-lineHeight)",
-      minHeight: "48px"
-    }
-  }
-};
-
-const PaperTheme = {
-  styleOverrides: {
-    root: {
-      borderRadius: "var(--quantum-borderRadius-medium)",
-      transition: "all var(--quantum-animation-duration-normal) var(--quantum-animation-easing-standard)",
-      // ========================================
-      // NEW: Universal variants for landing pages, apps, and forms
-      // ========================================
-      "&[data-variant='section']": {
-        backgroundColor: "var(--quantum-color-surface-secondary)",
-        borderRadius: "var(--quantum-borderRadius-medium)",
-        padding: "var(--quantum-spacing-comfortable)",
-        border: "1px solid var(--quantum-color-border-subtle)",
-        boxShadow: "var(--quantum-shadows-small)",
-        transition: "all var(--quantum-animation-duration-normal) var(--quantum-animation-easing-standard)",
-        // Responsive padding
-        "@media (min-width: 768px)": {
-          padding: "var(--quantum-spacing-spacious)",
-          borderRadius: "var(--quantum-borderRadius-large)"
-        },
-        // Full-width for landing pages
-        "&[data-fullwidth='true']": {
-          borderRadius: "0",
-          border: "none",
-          padding: "var(--quantum-spacing-loose) var(--quantum-spacing-normal)"
-        }
-      },
-      "&[data-variant='surface']": {
-        backgroundColor: "var(--quantum-color-surface-primary)",
-        borderRadius: "var(--quantum-borderRadius-large)",
-        border: "1px solid var(--quantum-color-border-default)",
-        boxShadow: "var(--quantum-shadows-medium)",
-        padding: "var(--quantum-spacing-comfortable)",
-        transition: "all var(--quantum-animation-duration-normal) var(--quantum-animation-easing-standard)",
-        // Interactive state for forms/apps
-        "&:hover": {
-          borderColor: "var(--quantum-color-border-glassAccent)",
-          boxShadow: "var(--quantum-shadows-large)"
-        },
-        // Focus state for form containers
-        "&:focus-within": {
-          borderColor: "var(--quantum-color-action-primary)",
-          boxShadow: "0 0 0 3px rgba(var(--quantum-color-action-primaryRGB), 0.1)"
-        }
-      },
-      "&[data-variant='accent']": {
-        background: "linear-gradient(135deg, rgba(var(--quantum-color-action-primaryRGB), 0.08) 0%, rgba(var(--quantum-color-action-primaryRGB), 0.12) 100%)",
-        borderRadius: "var(--quantum-borderRadius-large)",
-        border: "1px solid rgba(var(--quantum-color-action-primaryRGB), 0.2)",
-        boxShadow: "var(--quantum-shadows-glass)",
-        backdropFilter: "var(--quantum-glassmorphism-backdropLight)",
-        padding: "var(--quantum-spacing-comfortable)",
-        position: "relative",
-        transition: "all var(--quantum-animation-duration-normal) var(--quantum-animation-easing-standard)",
-        // Subtle glow effect
-        "&::before": {
-          content: '""',
-          position: "absolute",
-          top: "0",
-          left: "0",
-          right: "0",
-          height: "1px",
-          background: "linear-gradient(90deg, transparent 0%, rgba(var(--quantum-color-action-primaryRGB), 0.3) 50%, transparent 100%)",
-          borderRadius: "var(--quantum-borderRadius-large) var(--quantum-borderRadius-large) 0 0"
-        },
-        // Enhanced for landing page CTAs
-        "&[data-emphasis='high']": {
-          background: "linear-gradient(135deg, rgba(var(--quantum-color-action-primaryRGB), 0.15) 0%, rgba(var(--quantum-color-action-primaryRGB), 0.2) 100%)",
-          border: "2px solid rgba(var(--quantum-color-action-primaryRGB), 0.3)",
-          boxShadow: "var(--quantum-shadows-glass), 0 0 20px rgba(var(--quantum-color-action-primaryRGB), 0.15)"
-        }
-      },
-      "&[data-variant='minimal']": {
-        backgroundColor: "var(--quantum-color-surface-input)",
-        borderRadius: "var(--quantum-borderRadius-medium)",
-        border: "1px solid var(--quantum-color-border-subtle)",
-        padding: "var(--quantum-spacing-normal)",
-        transition: "all var(--quantum-animation-duration-fast) var(--quantum-animation-easing-standard)",
-        // Form input styling
-        "&[data-input='true']": {
-          backgroundColor: "var(--quantum-color-surface-input)",
-          padding: "var(--quantum-textField-spacing-paddingTop) var(--quantum-textField-spacing-paddingLeft)",
-          minHeight: "var(--quantum-textField-height)",
-          display: "flex",
-          alignItems: "center"
-        },
-        // Hover state
-        "&:hover": {
-          backgroundColor: "var(--quantum-color-surface-secondary)",
-          borderColor: "var(--quantum-color-border-default)"
-        },
-        // Navigation/sidebar styling
-        "&[data-nav='true']": {
-          backgroundColor: "var(--quantum-color-surface-glass)",
-          backdropFilter: "var(--quantum-glassmorphism-backdrop)",
-          border: "1px solid var(--quantum-color-border-glass)"
-        }
-      },
-      "&[data-variant='feature']": {
-        backgroundColor: "var(--quantum-color-surface-elevated)",
-        borderRadius: "var(--quantum-borderRadius-large)",
-        border: "1px solid var(--quantum-color-border-default)",
-        boxShadow: "var(--quantum-shadows-large)",
-        padding: "var(--quantum-spacing-spacious)",
-        position: "relative",
-        overflow: "hidden",
-        transition: "all var(--quantum-animation-duration-slow) var(--quantum-animation-easing-standard)",
-        // Premium shine effect
-        "&::before": {
-          content: '""',
-          position: "absolute",
-          top: "0",
-          left: "-100%",
-          width: "100%",
-          height: "100%",
-          background: "linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%)",
-          transition: "left var(--quantum-animation-duration-slow) var(--quantum-animation-easing-standard)"
-        },
-        // Interactive hover state
-        "&:hover": {
-          transform: "translateY(-8px)",
-          boxShadow: "var(--quantum-shadows-xl)",
-          borderColor: "var(--quantum-color-border-glassAccent)",
-          "&::before": {
-            left: "100%"
-          }
-        },
-        // Glass variant for landing pages
-        "&[data-glass='true']": {
-          backgroundColor: "var(--quantum-color-surface-glass)",
-          backdropFilter: "var(--quantum-glassmorphism-backdrop)",
-          border: "1px solid var(--quantum-color-border-glass)",
-          boxShadow: "var(--quantum-shadows-glass)"
-        },
-        // Compact variant for app UI
-        "&[data-compact='true']": {
-          padding: "var(--quantum-spacing-comfortable)",
-          borderRadius: "var(--quantum-borderRadius-large)"
-        }
-      }
-    }
-  }
-};
-
-const TextFieldTheme = {
-  styleOverrides: {
-    root: {
-      fontFamily: "var(--quantum-typography-fontFamily)",
-      minWidth: "var(--quantum-textField-minWidth)",
-      "& .MuiInputLabel-root": {
-        fontFamily: "var(--quantum-typography-fontFamily-display)",
-        fontSize: "var(--quantum-textField-fontSize)",
-        fontWeight: "var(--quantum-typography-fontWeight-normal)",
-        color: "var(--quantum-color-text-secondary)",
-        "&.Mui-focused": {
-          fontWeight: "var(--quantum-typography-fontWeight-normal)",
-          color: "var(--quantum-color-text-secondary)"
-        },
-        "&.MuiInputLabel-shrunk": {
-          fontSize: "var(--quantum-typography-fontSize-caption)",
-          fontWeight: "var(--quantum-typography-fontWeight-normal)"
-        },
-        "&.Mui-disabled": {
-          color: "var(--quantum-color-text-disabled)"
-        }
-      },
-      "& .MuiFilledInput-root": {
-        borderRadius: "var(--quantum-borderRadius-large)",
-        backgroundColor: "var(--quantum-color-surface-input)",
-        fontSize: "var(--quantum-textField-fontSize)",
-        transition: "none",
-        border: "1px solid var(--quantum-color-border-subtle)",
-        minHeight: "var(--quantum-textField-height)",
-        backdropFilter: "blur(8px)",
-        boxShadow: "var(--quantum-shadows-textField)",
-        "&:before": {
-          display: "none"
-        },
-        "&:hover:not(.Mui-disabled):before": {
-          display: "none"
-        },
-        "&:after": {
-          display: "none"
-        },
-        "&:hover:not(.Mui-focused):not(.Mui-disabled)": {
-          borderColor: "var(--quantum-color-action-primary)",
-          boxShadow: "var(--quantum-shadows-textField)"
-        },
-        "&.Mui-focused": {
-          backgroundColor: "var(--quantum-color-surface-input)",
-          borderColor: "var(--quantum-color-action-primary)",
-          boxShadow: "var(--quantum-shadows-large), 0 0 20px rgba(var(--quantum-color-action-primaryRGB), 0.15)"
-        },
-        "&.Mui-error": {
-          borderColor: "var(--quantum-color-feedback-error)",
-          boxShadow: "0 0 12px rgba(var(--quantum-color-feedback-errorRGB), 0.2)"
-        },
-        "&.Mui-disabled": {
-          backgroundColor: "var(--quantum-color-surface-secondary)",
-          borderColor: "var(--quantum-color-border-subtle)",
-          opacity: 0.6
-        }
-      },
-      "& .MuiFilledInput-input": {
-        paddingTop: "var(--quantum-textField-spacing-paddingTop)",
-        paddingBottom: "var(--quantum-textField-spacing-paddingBottom)",
-        paddingLeft: "var(--quantum-textField-spacing-paddingLeft)",
-        paddingRight: "0px",
-        height: "auto",
-        color: "var(--quantum-color-text-primary)",
-        fontSize: "var(--quantum-textField-fontSize)",
-        fontWeight: "var(--quantum-typography-fontWeight-medium)",
-        fontFamily: "var(--quantum-typography-fontFamily-primary)",
-        letterSpacing: "-0.01em",
-        "&::placeholder": {
-          color: "var(--quantum-color-text-primary)",
-          opacity: 0.6,
-          fontWeight: "var(--quantum-typography-fontWeight-normal)"
-        },
-        "&:focus::placeholder": {
-          color: "var(--quantum-color-text-primary)",
-          opacity: 0.4,
-          fontWeight: "var(--quantum-typography-fontWeight-light)"
-        },
-        "&:disabled": {
-          color: "var(--quantum-color-text-disabled)",
-          WebkitTextFillColor: "var(--quantum-color-text-disabled)"
-        }
-      },
-      "& .MuiFormHelperText-root": {
-        fontFamily: "var(--quantum-typography-variants-caption-fontFamily)",
-        fontSize: "var(--quantum-typography-variants-caption-fontSize)",
-        fontWeight: "var(--quantum-typography-variants-caption-fontWeight)",
-        lineHeight: "var(--quantum-typography-variants-caption-lineHeight)",
-        letterSpacing: "var(--quantum-typography-variants-caption-letterSpacing)",
-        marginTop: "6px",
-        marginLeft: "12px",
-        color: "var(--quantum-color-text-secondary)",
-        "&.Mui-error": {
-          color: "var(--quantum-color-feedback-error)"
-        },
-        "&.Mui-disabled": {
-          color: "var(--quantum-color-text-disabled)"
-        }
-      }
-    }
-  },
-  variants: [
-    // State variants with proper color theming
-    {
-      props: { color: "success" },
-      style: {
-        "& .MuiFilledInput-root": {
-          borderColor: "var(--quantum-color-feedback-success)",
-          boxShadow: "0 0 12px rgba(var(--quantum-color-feedback-successRGB), 0.2)",
-          "&.Mui-focused": {
-            borderColor: "var(--quantum-color-feedback-success)",
-            boxShadow: "var(--quantum-shadows-large), 0 0 20px rgba(var(--quantum-color-feedback-successRGB), 0.15)"
-          }
-        },
-        "& .MuiInputLabel-root.Mui-focused": {
-          color: "var(--quantum-color-feedback-success)"
-        },
-        "& .MuiFormHelperText-root:not(.Mui-error)": {
-          color: "var(--quantum-color-feedback-success)"
-        }
-      }
-    },
-    {
-      props: { color: "warning" },
-      style: {
-        "& .MuiFilledInput-root": {
-          borderColor: "var(--quantum-color-feedback-warning)",
-          boxShadow: "0 0 12px rgba(var(--quantum-color-feedback-warningRGB), 0.2)",
-          "&.Mui-focused": {
-            borderColor: "var(--quantum-color-feedback-warning)",
-            boxShadow: "var(--quantum-shadows-large), 0 0 20px rgba(var(--quantum-color-feedback-warningRGB), 0.15)"
-          }
-        },
-        "& .MuiInputLabel-root.Mui-focused": {
-          color: "var(--quantum-color-feedback-warning)"
-        },
-        "& .MuiFormHelperText-root:not(.Mui-error)": {
-          color: "var(--quantum-color-feedback-warning)"
-        }
-      }
-    },
-    {
-      props: { color: "error" },
-      style: {
-        "& .MuiInputLabel-root.Mui-focused": {
-          color: "var(--quantum-color-feedback-error)"
-        }
-      }
-    },
-    {
-      props: { color: "primary" },
-      style: {
-        "& .MuiInputLabel-root.Mui-focused": {
-          color: "var(--quantum-color-action-primary)"
-        }
-      }
-    }
-  ]
-};
-
-const palette = {
-  // Universal Primary Blue (Excellent contrast both modes)
-  universalBlue: {
-    25: "#F8FAFF",
-    // Very subtle blue tint for input backgrounds
-    50: "#EBF4FF",
-    300: "#85B8FF",
-    400: "#4A95FF",
-    500: "#0066CC",
-    950: "#000A14"
-  },
-  // High Contrast Neutrals for Light Mode
-  lightNeutral: {
-    50: "#FFFFFF",
-    // Pure white for maximum contrast
-    100: "#F8F9FA",
-    // Very light gray
-    200: "#E9ECEF",
-    // Light border
-    300: "#DEE2E6",
-    // Subtle elements
-    500: "#6C757D",
-    // Secondary text (9:1 contrast)
-    700: "#343A40",
-    // Very strong text (16:1 contrast)
-    900: "#000000"},
-  // High Contrast Neutrals for Dark Mode
-  darkNeutral: {
-    50: "#FFFFFF",
-    // Light text (16:1 contrast)
-    300: "#CED4DA",
-    // Muted text (7:1 contrast)
-    500: "#495057",
-    // Subtle elements
-    600: "#343A40",
-    // Dark elements
-    700: "#212529",
-    // Very dark surface
-    800: "#1A1D20",
-    // Dark surface
-    900: "#0D1117",
-    // Primary dark background
-    950: "#000000"
-    // Maximum dark
-  },
-  // Secondary Accent (Complementary to blue)
-  emeraldAccent: {
-    500: "#10B981"},
-  // Status Colors (High contrast)
-  red: {
-    500: "#DC2626"},
-  amber: {
-    500: "#D97706"},
-  emerald: {
-    500: "#059669"},
-  blue: {
-    500: "#2563EB"},
-  // Pure colors (Maximum contrast references)
-  pure: {
-    white: "#FFFFFF"}
-};
-
-const generateCSSVariablesFromTokens = (tokens, prefix = "quantum") => {
-  const cssVariables = {};
-  const traverse = (obj, path = []) => {
-    if (typeof obj === "object" && obj !== null) {
-      Object.entries(obj).forEach(([key, value]) => {
-        const currentPath = [...path, key];
-        if (typeof value === "string" || typeof value === "number") {
-          const variableName = `--${prefix}-${currentPath.join("-")}`;
-          cssVariables[variableName] = String(value);
-        } else if (typeof value === "object" && value !== null) {
-          traverse(value, currentPath);
-        }
-      });
-    }
-  };
-  traverse(tokens);
-  return cssVariables;
-};
-
-const SEMANTIC_TOKENS = {
-  colors: {
-    // Action colors
-    action: {
-      primary: {
-        light: palette.universalBlue[500],
-        dark: palette.universalBlue[500],
-        needsRGB: true
-      },
-      secondary: {
-        light: palette.emeraldAccent[500],
-        dark: palette.emeraldAccent[500],
-        needsRGB: true
-      },
-      destructive: {
-        light: palette.red[500],
-        dark: palette.red[500],
-        needsRGB: true
-      }
-    },
-    // Surface colors
-    surface: {
-      primary: {
-        light: palette.lightNeutral[50],
-        // Pure white
-        dark: palette.darkNeutral[900]
-        // Deep dark
-      },
-      input: {
-        light: palette.universalBlue[25],
-        // "#F8FAFF" - very subtle blue tint for inputs
-        dark: palette.universalBlue[950]
-        // "#000A14" - deep blue-black for inputs
-      },
-      secondary: {
-        light: palette.lightNeutral[100],
-        // Very light gray
-        dark: palette.darkNeutral[900]
-        // Dark surface
-      },
-      elevated: {
-        light: palette.pure.white,
-        dark: palette.darkNeutral[900]
-      },
-      glass: {
-        light: palette.lightNeutral[200],
-        // Light glass surface
-        dark: palette.darkNeutral[800]
-        // Dark glass surface
-      },
-      glassHover: {
-        light: palette.lightNeutral[100],
-        // Slightly lighter on hover
-        dark: palette.darkNeutral[700]
-        // Lighter dark surface on hover
-      },
-      interactive: {
-        light: palette.universalBlue[50],
-        // Very subtle blue tint
-        dark: palette.universalBlue[950]
-        // Deep blue tint for dark mode
-      },
-      overlay: {
-        light: palette.darkNeutral[900],
-        // Dark overlay
-        dark: palette.darkNeutral[950],
-        // Darker overlay for dark mode
-        needsRGB: true
-      }
-    },
-    // Text colors
-    text: {
-      primary: {
-        light: palette.lightNeutral[900],
-        // Pure black
-        dark: palette.darkNeutral[50],
-        // Pure white
-        needsRGB: true
-      },
-      secondary: {
-        light: palette.lightNeutral[700],
-        // High contrast secondary
-        dark: palette.darkNeutral[300]
-        // High contrast secondary dark
-      },
-      disabled: {
-        light: palette.lightNeutral[500],
-        dark: palette.darkNeutral[500]
-      }
-    },
-    // Feedback colors
-    feedback: {
-      success: {
-        light: palette.emerald[500],
-        dark: palette.emerald[500],
-        needsRGB: true
-      },
-      warning: {
-        light: palette.amber[500],
-        dark: palette.amber[500],
-        needsRGB: true
-      },
-      error: {
-        light: palette.red[500],
-        dark: palette.red[500],
-        needsRGB: true
-      },
-      info: {
-        light: palette.blue[500],
-        dark: palette.blue[500]
-      }
-    },
-    // Border colors
-    border: {
-      default: {
-        light: palette.lightNeutral[300],
-        dark: palette.darkNeutral[600]
-      },
-      subtle: {
-        light: palette.lightNeutral[200],
-        dark: palette.darkNeutral[700]
-      },
-      glass: {
-        light: palette.lightNeutral[300],
-        // Light glass border
-        dark: palette.darkNeutral[600]
-        // Dark glass border
-      },
-      glassAccent: {
-        light: palette.universalBlue[300],
-        // Blue accent border
-        dark: palette.universalBlue[400]
-        // Slightly brighter for dark mode
-      }
-    }
-  },
-  // Effects - static values
-  effects: {
-    shimmer: {
-      light: "rgba(255, 255, 255, 0.1)",
-      // White shimmer for light mode
-      dark: "rgba(255, 255, 255, 0.05)"
-      // Subtle white shimmer for dark mode
-    }
-  },
-  // Border radius - responsive values
-  borderRadius: {
-    none: {
-      mobile: "0px",
-      tablet: "0px",
-      desktop: "0px"
-    },
-    small: {
-      mobile: "3px",
-      tablet: "4px",
-      desktop: "4px"
-    },
-    medium: {
-      mobile: "6px",
-      tablet: "8px",
-      desktop: "8px"
-    },
-    large: {
-      mobile: "8px",
-      tablet: "12px",
-      desktop: "12px"
-    },
-    full: {
-      mobile: "9999px",
-      tablet: "9999px",
-      desktop: "9999px"
-    }
-  },
-  // Shadows - theme-aware values
-  shadows: {
-    small: {
-      light: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-      dark: "0 1px 2px 0 rgba(0, 0, 0, 0.3)"
-    },
-    medium: {
-      light: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
-      dark: "0 4px 6px -1px rgba(0, 0, 0, 0.4)"
-    },
-    large: {
-      light: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
-      dark: "0 10px 15px -3px rgba(0, 0, 0, 0.5)"
-    },
-    glass: {
-      light: "0 8px 32px 0 rgba(31, 38, 135, 0.37)",
-      dark: "0 8px 32px 0 rgba(59, 130, 246, 0.25)"
-    },
-    glassInset: {
-      light: "inset 0 1px 0 0 rgba(255, 255, 255, 0.1)",
-      dark: "inset 0 1px 0 0 rgba(255, 255, 255, 0.05)"
-    },
-    textField: {
-      light: "0 4px 6px -1px rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.08)",
-      dark: "0 4px 6px -1px rgba(187, 187, 187, 0.03), inset 0 1px 0 0 rgba(0, 0, 0, 0.4)"
-    }
-  },
-  // Glass effects - theme-aware values
-  glassmorphism: {
-    backdrop: {
-      light: "blur(16px)",
-      dark: "blur(20px)"
-      // Stronger blur in dark mode for better effect
-    },
-    backdropLight: {
-      light: "blur(8px)",
-      dark: "blur(12px)"
-    },
-    backdropHeavy: {
-      light: "blur(24px)",
-      dark: "blur(32px)"
-    }
-  },
-  // Animation - static values
-  animation: {
-    duration: {
-      fast: "150ms",
-      normal: "200ms",
-      slow: "300ms"
-    },
-    easing: {
-      standard: "cubic-bezier(0.4, 0.0, 0.2, 1)",
-      decelerate: "cubic-bezier(0.0, 0.0, 0.2, 1)",
-      accelerate: "cubic-bezier(0.4, 0.0, 1, 1)"
-    }
-  },
-  // ✅ UPDATED: Business-Optimized Typography System
-  typography: {
-    // Font families - Dual font approach: Inter + Space Grotesk
-    fontFamily: {
-      // Space Grotesk for display elements, headings, UI
-      display: "'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-      // Inter for body text and readable content
-      primary: "'Quicksand','Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
-    },
-    // Font weights
-    fontWeight: {
-      light: 300,
-      normal: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700
-    },
-    // ✅ UPDATED: Business-optimized typography variants
-    variants: {
-      // Display - Hero sections (REDUCED from 72px max to 56px max)
-      display: {
-        fontSize: {
-          mobile: "2.25rem",
-          // 36px (was 40px)
-          tablet: "3rem",
-          // 48px (was 56px)
-          desktop: "3.5rem"
-          // 56px (was 72px) - More reasonable for dashboards
-        },
-        lineHeight: {
-          mobile: 1.1,
-          tablet: 1.1,
-          desktop: 1
-        },
-        fontWeight: 700,
-        letterSpacing: "-0.02em",
-        fontFamily: "display"
-      },
-      // H1 - Page titles (INCREASED from 40px max to 48px max)
-      h1: {
-        fontSize: {
-          mobile: "2rem",
-          // 32px (was 30px)
-          tablet: "2.5rem",
-          // 40px (was 36px)
-          desktop: "3rem"
-          // 48px (was 40px) - More impact for page titles
-        },
-        lineHeight: {
-          mobile: 1.2,
-          tablet: 1.2,
-          desktop: 1.1
-        },
-        fontWeight: 700,
-        // INCREASED from 600 to 700 for more presence
-        fontFamily: "display"
-      },
-      // H2 - Section titles (SLIGHTLY INCREASED)
-      h2: {
-        fontSize: {
-          mobile: "1.5rem",
-          // 24px (same)
-          tablet: "1.875rem",
-          // 30px (was 28px)
-          desktop: "2.25rem"
-          // 36px (was 32px) - Better hierarchy
-        },
-        lineHeight: {
-          mobile: 1.3,
-          tablet: 1.3,
-          desktop: 1.2
-        },
-        fontWeight: 600,
-        fontFamily: "display"
-      },
-      // H3 - Subsection titles (INCREASED for better hierarchy)
-      h3: {
-        fontSize: {
-          mobile: "1.25rem",
-          // 20px (same)
-          tablet: "1.5rem",
-          // 24px (was 22px)
-          desktop: "1.75rem"
-          // 28px (was 24px) - Better gap from body text
-        },
-        lineHeight: {
-          mobile: 1.4,
-          tablet: 1.4,
-          desktop: 1.3
-        },
-        fontWeight: 600,
-        fontFamily: "display"
-        // CHANGED from "primary" to "display" for consistency
-      },
-      // H4 - Component headers (INCREASED for clearer hierarchy)
-      h4: {
-        fontSize: {
-          mobile: "1.125rem",
-          // 18px (same)
-          tablet: "1.25rem",
-          // 20px (same)
-          desktop: "1.5rem"
-          // 24px (was 22px) - Better distinction from body
-        },
-        lineHeight: {
-          mobile: 1.4,
-          tablet: 1.4,
-          desktop: 1.4
-        },
-        fontWeight: 600,
-        // INCREASED from 500 to 600 for more definition
-        fontFamily: "display"
-        // CHANGED from "primary" to "display"
-      },
-      // H5 - Small headers (ADDED - was missing)
-      h5: {
-        fontSize: {
-          mobile: "1rem",
-          // 16px
-          tablet: "1.125rem",
-          // 18px
-          desktop: "1.25rem"
-          // 20px
-        },
-        lineHeight: {
-          mobile: 1.4,
-          tablet: 1.4,
-          desktop: 1.4
-        },
-        fontWeight: 600,
-        fontFamily: "display"
-      },
-      // H6 - Smallest headers (ADDED - was missing)
-      h6: {
-        fontSize: {
-          mobile: "0.875rem",
-          // 14px
-          tablet: "1rem",
-          // 16px
-          desktop: "1.125rem"
-          // 18px
-        },
-        lineHeight: {
-          mobile: 1.4,
-          tablet: 1.4,
-          desktop: 1.4
-        },
-        fontWeight: 500,
-        fontFamily: "display"
-      },
-      // Body1 - Main content (OPTIMIZED - Inter font)
-      body1: {
-        fontSize: {
-          mobile: "0.875rem",
-          // 14px - more appropriate for web apps
-          tablet: "1rem",
-          // 16px - reduced from 18px
-          desktop: "1rem"
-          // 16px - reduced from 18px for better UI proportions
-        },
-        lineHeight: {
-          mobile: 1.5,
-          tablet: 1.6,
-          desktop: 1.6
-        },
-        fontWeight: 400,
-        fontFamily: "primary"
-        // Inter for readability
-      },
-      // Body2 - Secondary content (OPTIMIZED)
-      body2: {
-        fontSize: {
-          mobile: "0.8125rem",
-          // 13px - reduced for form fields
-          tablet: "0.875rem",
-          // 14px - reduced from 16px
-          desktop: "0.875rem"
-          // 14px - better for form elements
-        },
-        lineHeight: {
-          mobile: 1.5,
-          tablet: 1.5,
-          desktop: 1.5
-        },
-        fontWeight: 400,
-        fontFamily: "primary"
-        // Inter for readability
-      },
-      // Button - Interface elements (OPTIMIZED)
-      button: {
-        fontSize: {
-          mobile: "0.75rem",
-          // 12px - reduced for more compact buttons
-          tablet: "0.8125rem",
-          // 13px - reduced from 14px
-          desktop: "0.8125rem"
-          // 13px - more compact for business UI
-        },
-        lineHeight: {
-          mobile: 1.3,
-          // Tighter line height for buttons (was 1.4)
-          tablet: 1.3,
-          desktop: 1.3
-        },
-        fontWeight: 500,
-        fontFamily: "display"
-      },
-      // Caption - Small text, metadata (REFINED for small buttons)
-      caption: {
-        fontSize: {
-          mobile: "0.6875rem",
-          // 11px - reduced for metadata
-          tablet: "0.75rem",
-          // 12px - reduced from 13px
-          desktop: "0.75rem"
-          // 12px - appropriate for helper text
-        },
-        lineHeight: {
-          mobile: 1.3,
-          // Tighter for small buttons (was 1.4)
-          tablet: 1.3,
-          desktop: 1.3
-        },
-        fontWeight: 500,
-        // Increased from 400 for better small text legibility
-        fontFamily: "display"
-        // Changed from "primary" to "display" for button consistency
-      }
-    }
-  },
-  // TextField component tokens
-  textField: {
-    height: {
-      mobile: "3rem",
-      // 48px
-      tablet: "3.25rem",
-      // 52px
-      desktop: "3.25rem"
-      // 52px
-    },
-    minWidth: {
-      mobile: "280px",
-      // Minimum mobile width
-      tablet: "320px",
-      // Minimum tablet width
-      desktop: "360px"
-      // Minimum desktop width
-    },
-    fontSize: {
-      mobile: "1rem",
-      // 16px
-      tablet: "1.1rem",
-      // 20px
-      desktop: "1.1rem"
-      // 20px
-    },
-    spacing: {
-      paddingTop: {
-        mobile: "20px",
-        tablet: "24px",
-        desktop: "24px"
-      },
-      paddingBottom: {
-        mobile: "8px",
-        tablet: "4px",
-        desktop: "4px"
-      },
-      paddingLeft: {
-        mobile: "12px",
-        tablet: "12px",
-        desktop: "12px"
-      }
-    }
-  },
-  // Spacing system (unchanged - was already good)
-  spacing: {
-    tight: {
-      mobile: "4px",
-      tablet: "4px",
-      desktop: "6px"
-      // Slightly increased for desktop precision
-    },
-    normal: {
-      mobile: "6px",
-      // Reduced from 8px for more compact buttons
-      tablet: "8px",
-      desktop: "10px"
-      // More refined than 8px
-    },
-    comfortable: {
-      mobile: "12px",
-      tablet: "14px",
-      // Slightly increased for better button width
-      desktop: "16px"
-      // Reduced from 20px for more compact feel
-    },
-    spacious: {
-      mobile: "16px",
-      tablet: "20px",
-      // Reduced from 24px
-      desktop: "24px"
-      // Reduced from 32px for business interfaces
-    },
-    loose: {
-      mobile: "20px",
-      // Reduced from 24px
-      tablet: "28px",
-      // Reduced from 32px
-      desktop: "36px"
-      // Reduced from 48px - better for business apps
-    }
-  }
-};
-const hexToRgb = (hex) => {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  if (!result) return "0, 0, 0";
-  return [
-    parseInt(result[1], 16),
-    parseInt(result[2], 16),
-    parseInt(result[3], 16)
-  ].join(", ");
-};
-const getAllThemeVariables = () => {
-  const modes = ["light", "dark"];
-  const breakpoints = [
-    "mobile",
-    "tablet",
-    "desktop"
-  ];
-  const result = {};
-  modes.forEach((mode) => {
-    breakpoints.forEach((breakpoint) => {
-      const tokens = {
-        color: {},
-        borderRadius: {},
-        shadows: {},
-        glassmorphism: {},
-        effects: {},
-        animation: SEMANTIC_TOKENS.animation,
-        typography: {
-          fontFamily: SEMANTIC_TOKENS.typography.fontFamily,
-          fontWeight: SEMANTIC_TOKENS.typography.fontWeight,
-          variants: {}
-        },
-        spacing: {},
-        textField: {}
-      };
-      Object.entries(SEMANTIC_TOKENS.colors).forEach(([category, colors]) => {
-        tokens.color[category] = {};
-        Object.entries(colors).forEach(([name, colorDef]) => {
-          tokens.color[category][name] = colorDef[mode];
-          if (colorDef.needsRGB) {
-            const colorValue = colorDef[mode];
-            tokens.color[category][name + "RGB"] = hexToRgb(colorValue);
-          }
-        });
-      });
-      Object.entries(SEMANTIC_TOKENS.spacing).forEach(
-        ([name, responsiveValue]) => {
-          tokens.spacing[name] = responsiveValue[breakpoint];
-        }
-      );
-      Object.entries(SEMANTIC_TOKENS.borderRadius).forEach(
-        ([name, responsiveValue]) => {
-          tokens.borderRadius[name] = responsiveValue[breakpoint];
-        }
-      );
-      Object.entries(SEMANTIC_TOKENS.shadows).forEach(([name, shadowValue]) => {
-        if (typeof shadowValue === "object" && "light" in shadowValue && "dark" in shadowValue) {
-          tokens.shadows[name] = shadowValue[mode];
-        } else {
-          tokens.shadows[name] = shadowValue;
-        }
-      });
-      Object.entries(SEMANTIC_TOKENS.glassmorphism).forEach(
-        ([name, glassValue]) => {
-          if (typeof glassValue === "object" && "light" in glassValue && "dark" in glassValue) {
-            tokens.glassmorphism[name] = glassValue[mode];
-          } else {
-            tokens.glassmorphism[name] = glassValue;
-          }
-        }
-      );
-      Object.entries(SEMANTIC_TOKENS.effects).forEach(([name, effectValue]) => {
-        if (typeof effectValue === "object" && "light" in effectValue && "dark" in effectValue) {
-          tokens.effects[name] = effectValue[mode];
-        } else {
-          tokens.effects[name] = effectValue;
-        }
-      });
-      tokens.textField = {
-        height: SEMANTIC_TOKENS.textField.height[breakpoint],
-        minWidth: SEMANTIC_TOKENS.textField.minWidth[breakpoint],
-        fontSize: SEMANTIC_TOKENS.textField.fontSize[breakpoint],
-        spacing: {
-          paddingTop: SEMANTIC_TOKENS.textField.spacing.paddingTop[breakpoint],
-          paddingBottom: SEMANTIC_TOKENS.textField.spacing.paddingBottom[breakpoint],
-          paddingLeft: SEMANTIC_TOKENS.textField.spacing.paddingLeft[breakpoint]
-        }
-      };
-      Object.entries(SEMANTIC_TOKENS.typography.variants).forEach(
-        ([variantName, variant]) => {
-          tokens.typography.variants[variantName] = {
-            fontSize: variant.fontSize[breakpoint],
-            lineHeight: variant.lineHeight[breakpoint],
-            fontWeight: variant.fontWeight,
-            fontFamily: SEMANTIC_TOKENS.typography.fontFamily[variant.fontFamily],
-            ...variant.letterSpacing && {
-              letterSpacing: variant.letterSpacing
-            }
-          };
-        }
-      );
-      const key = `${mode}${breakpoint.charAt(0).toUpperCase()}${breakpoint.slice(1)}`;
-      result[key] = generateCSSVariablesFromTokens(tokens);
-    });
-  });
-  return result;
-};
-
-const createQuantumTheme = (mode) => {
-  const {
-    lightDesktop,
-    lightMobile,
-    lightTablet,
-    darkDesktop,
-    darkMobile,
-    darkTablet
-  } = getAllThemeVariables();
-  const colors = SEMANTIC_TOKENS.colors;
-  const currentModeColors = {
-    actionPrimary: colors.action.primary[mode],
-    actionSecondary: colors.action.secondary[mode],
-    feedbackError: colors.feedback.error[mode],
-    feedbackWarning: colors.feedback.warning[mode],
-    feedbackInfo: colors.feedback.info[mode],
-    feedbackSuccess: colors.feedback.success[mode],
-    surfacePrimary: colors.surface.primary[mode],
-    surfaceSecondary: colors.surface.secondary[mode],
-    textPrimary: colors.text.primary[mode],
-    textSecondary: colors.text.secondary[mode],
-    textDisabled: colors.text.disabled[mode],
-    borderDefault: colors.border.default[mode]
-  };
-  const theme = createTheme({
-    // Note: Material-UI cssVariables disabled to prevent interference with our theme persistence
-    // Our CSS variables are injected via MuiCssBaseline styleOverrides instead
-    palette: {
-      mode,
-      primary: {
-        main: currentModeColors.actionPrimary,
-        contrastText: currentModeColors.textPrimary
-      },
-      secondary: {
-        main: currentModeColors.actionSecondary,
-        contrastText: currentModeColors.textPrimary
-      },
-      error: {
-        main: currentModeColors.feedbackError,
-        contrastText: currentModeColors.textPrimary
-      },
-      warning: {
-        main: currentModeColors.feedbackWarning,
-        contrastText: currentModeColors.textPrimary
-      },
-      info: {
-        main: currentModeColors.feedbackInfo,
-        contrastText: currentModeColors.textPrimary
-      },
-      success: {
-        main: currentModeColors.feedbackSuccess,
-        contrastText: currentModeColors.textPrimary
-      },
-      background: {
-        default: currentModeColors.surfacePrimary,
-        paper: currentModeColors.surfaceSecondary
-      },
-      text: {
-        primary: currentModeColors.textPrimary,
-        secondary: currentModeColors.textSecondary,
-        disabled: currentModeColors.textDisabled
-      },
-      divider: currentModeColors.borderDefault
-    },
-    typography: {
-      h1: {
-        fontFamily: "var(--quantum-typography-fontFamily-display)",
-        fontSize: "var(--quantum-typography-variants-display-fontSize)",
-        lineHeight: "var(--quantum-typography-variants-display-lineHeight)",
-        fontWeight: "var(--quantum-typography-variants-display-fontWeight)",
-        letterSpacing: "var(--quantum-typography-variants-display-letterSpacing)",
-        color: "var(--quantum-color-text-primary)"
-      },
-      h2: {
-        fontFamily: "var(--quantum-typography-fontFamily-display)",
-        fontSize: "var(--quantum-typography-variants-h1-fontSize)",
-        lineHeight: "var(--quantum-typography-variants-h1-lineHeight)",
-        fontWeight: "var(--quantum-typography-variants-h1-fontWeight)",
-        color: "var(--quantum-color-text-primary)"
-      },
-      h3: {
-        fontFamily: "var(--quantum-typography-fontFamily-display)",
-        fontSize: "var(--quantum-typography-variants-h2-fontSize)",
-        lineHeight: "var(--quantum-typography-variants-h2-lineHeight)",
-        fontWeight: "var(--quantum-typography-variants-h2-fontWeight)",
-        color: "var(--quantum-color-text-primary)"
-      },
-      h4: {
-        fontFamily: "var(--quantum-typography-fontFamily-primary)",
-        fontSize: "var(--quantum-typography-variants-h3-fontSize)",
-        lineHeight: "var(--quantum-typography-variants-h3-lineHeight)",
-        fontWeight: "var(--quantum-typography-variants-h3-fontWeight)",
-        color: "var(--quantum-color-text-primary)"
-      },
-      h5: {
-        fontFamily: "var(--quantum-typography-fontFamily-primary)",
-        fontSize: "var(--quantum-typography-variants-h4-fontSize)",
-        lineHeight: "var(--quantum-typography-variants-h4-lineHeight)",
-        fontWeight: "var(--quantum-typography-variants-h4-fontWeight)",
-        color: "var(--quantum-color-text-primary)"
-      },
-      h6: {
-        fontFamily: "var(--quantum-typography-fontFamily-primary)",
-        fontSize: "var(--quantum-typography-variants-caption-fontSize)",
-        lineHeight: "var(--quantum-typography-variants-caption-lineHeight)",
-        fontWeight: "var(--quantum-typography-fontWeight-medium)",
-        color: "var(--quantum-color-text-secondary)"
-      },
-      body1: {
-        fontFamily: "var(--quantum-typography-fontFamily-primary)",
-        fontSize: "var(--quantum-typography-variants-body1-fontSize)",
-        lineHeight: "var(--quantum-typography-variants-body1-lineHeight)",
-        fontWeight: "var(--quantum-typography-variants-body1-fontWeight)",
-        color: "var(--quantum-color-text-primary)"
-      },
-      body2: {
-        fontFamily: "var(--quantum-typography-fontFamily-primary)",
-        fontSize: "var(--quantum-typography-variants-body2-fontSize)",
-        lineHeight: "var(--quantum-typography-variants-body2-lineHeight)",
-        fontWeight: "var(--quantum-typography-variants-body2-fontWeight)",
-        color: "var(--quantum-color-text-secondary)"
-      },
-      button: {
-        fontFamily: "var(--quantum-typography-fontFamily-display)",
-        fontSize: "var(--quantum-typography-variants-button-fontSize)",
-        lineHeight: "var(--quantum-typography-variants-button-lineHeight)",
-        fontWeight: "var(--quantum-typography-variants-button-fontWeight)",
-        color: "var(--quantum-color-text-primary)",
-        textTransform: "none"
-      },
-      caption: {
-        fontFamily: "var(--quantum-typography-fontFamily-primary)",
-        fontSize: "var(--quantum-typography-variants-caption-fontSize)",
-        lineHeight: "var(--quantum-typography-variants-caption-lineHeight)",
-        fontWeight: "var(--quantum-typography-variants-caption-fontWeight)",
-        color: "var(--quantum-color-text-secondary)"
-      },
-      overline: {
-        fontFamily: "var(--quantum-typography-fontFamily-primary)",
-        fontWeight: "var(--quantum-typography-fontWeight-medium)",
-        color: "var(--quantum-color-text-secondary)",
-        textTransform: "uppercase",
-        letterSpacing: "0.08em"
-      }
-    },
-    shape: {
-      borderRadius: 8
-    },
-    components: {
-      // CSS Variables injection
-      MuiCssBaseline: {
-        styleOverrides: {
-          "@keyframes quantumConfidenceRotate": {
-            "0%": { transform: "rotate(0deg)" },
-            "100%": { transform: "rotate(360deg)" }
-          },
-          // Energy burst animation for button clicks
-          "@keyframes quantumEnergyBurst": {
-            "0%": {
-              transform: "translate(-50%, -50%) scale(0)",
-              opacity: 1
-            },
-            "100%": {
-              transform: "translate(-50%, -50%) scale(2)",
-              opacity: 0
-            }
-          },
-          // Warning rotate animation for destructive buttons (similar to primary)
-          "@keyframes quantumWarningRotate": {
-            "0%": { transform: "rotate(0deg)" },
-            "100%": { transform: "rotate(360deg)" }
-          },
-          // Respect reduced motion preferences
-          "@media (prefers-reduced-motion: reduce)": {
-            "*": {
-              animationDuration: "0.01ms !important",
-              animationIterationCount: "1 !important",
-              transitionDuration: "0.01ms !important"
-            }
-          },
-          // Add Space Grotesk font loading
-          "@font-face": {
-            fontFamily: "Space Grotesk",
-            fontDisplay: "swap"
-          },
-          // Light mode - mobile first (base styles)
-          ":root": {
-            ...lightMobile,
-            // Ensure font is loaded
-            fontFamily: SEMANTIC_TOKENS.typography.fontFamily.primary
-          },
-          // Dark mode - mobile first
-          '[data-theme="dark"]': darkMobile,
-          // Light mode - tablet and up & Dark mode - tablet and up
-          "@media (min-width: 768px)": {
-            ":root": lightTablet,
-            '[data-theme="dark"]': darkTablet
-          },
-          // Light mode - desktop and up & Dark mode - desktop and up
-          "@media (min-width: 1024px)": {
-            ":root": lightDesktop,
-            '[data-theme="dark"]': darkDesktop
-          },
-          // Ensure all text uses Space Grotesk by default
-          "html, body": {
-            fontFamily: SEMANTIC_TOKENS.typography.fontFamily.primary,
-            fontDisplay: "swap"
-          }
-        }
-      },
-      // Component theme overrides
-      MuiButton: ButtonTheme,
-      MuiPaper: PaperTheme,
-      MuiTextField: TextFieldTheme
-    }
-  });
-  return theme;
-};
-
-const ThemeScript = ({
-  defaultColorScheme = "light",
-  storageKey = "quantum-color-scheme",
-  attribute = "data-theme",
-  preventFlickering = true
-}) => {
-  const script = `
-(function() {
-  ${preventFlickering ? `
-  // Add no-transition class to prevent flickering during initial load
-  document.documentElement.classList.add('no-transition');
-  ` : ""}
-  
-  try {
-    const savedScheme = localStorage.getItem('${storageKey}');
-    const validSchemes = ['light', 'dark'];
-    const themeToApply = savedScheme && validSchemes.includes(savedScheme) 
-      ? savedScheme 
-      : '${defaultColorScheme}';
-    
-    document.documentElement.setAttribute('${attribute}', themeToApply);
-  } catch (e) {
-    // Fallback if localStorage is not available (private browsing, etc.)
-    document.documentElement.setAttribute('${attribute}', '${defaultColorScheme}');
-  }
-  
-  ${preventFlickering ? `
-  // Remove no-transition class after DOM is ready to enable smooth transitions
-  function enableTransitions() {
-    document.documentElement.classList.remove('no-transition');
-    document.documentElement.classList.add('loaded');
-  }
-  
-  if (document.readyState === 'loading') {
-    window.addEventListener('DOMContentLoaded', function() {
-      setTimeout(enableTransitions, 100);
-    });
-  } else {
-    // DOM is already ready
-    setTimeout(enableTransitions, 100);
-  }
-  ` : ""}
-})();
-`;
-  return /* @__PURE__ */ jsx(
-    "script",
-    {
-      dangerouslySetInnerHTML: { __html: script },
-      suppressHydrationWarning: true
-    }
-  );
-};
-const getThemeScript = (options = {}) => {
-  const {
-    defaultColorScheme = "light",
-    storageKey = "quantum-color-scheme",
-    attribute = "data-theme",
-    preventFlickering = true
-  } = options;
-  return `
-(function() {
-  ${preventFlickering ? `
-  document.documentElement.classList.add('no-transition');
-  ` : ""}
-  
-  try {
-    const savedScheme = localStorage.getItem('${storageKey}');
-    const validSchemes = ['light', 'dark'];
-    const themeToApply = savedScheme && validSchemes.includes(savedScheme) 
-      ? savedScheme 
-      : '${defaultColorScheme}';
-    
-    document.documentElement.setAttribute('${attribute}', themeToApply);
-  } catch (e) {
-    document.documentElement.setAttribute('${attribute}', '${defaultColorScheme}');
-  }
-  
-  ${preventFlickering ? `
-  function enableTransitions() {
-    document.documentElement.classList.remove('no-transition');
-    document.documentElement.classList.add('loaded');
-  }
-  
-  if (document.readyState === 'loading') {
-    window.addEventListener('DOMContentLoaded', function() {
-      setTimeout(enableTransitions, 100);
-    });
-  } else {
-    setTimeout(enableTransitions, 100);
-  }
-  ` : ""}
-})();
-`.trim();
-};
-
-export { SEMANTIC_TOKENS as S, ThemeScript as T, createQuantumTheme as c, getThemeScript as g };
-//# sourceMappingURL=ThemeScript-BcAiGxU5.js.map