@vritti/quantum-ui 0.1.0

package/dist/ThemeScript-CQlC-jGc.js

@@ -0,0 +1,1509 @@
+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)",
+      // Target data-variant attribute using CSS selector
+      "&[data-variant='standard']": {
+        backgroundColor: "var(--quantum-color-surface-primary)",
+        border: "1px solid var(--quantum-color-border-default)",
+        boxShadow: "var(--quantum-shadows-small)"
+      },
+      "&[data-variant='glass']": {
+        backgroundColor: "var(--quantum-color-surface-secondary)",
+        backdropFilter: "var(--quantum-glassmorphism-backdrop)",
+        border: "1px solid var(--quantum-color-border-subtle)",
+        boxShadow: "var(--quantum-shadows-glass)"
+      },
+      "&[data-variant='elevated']": {
+        backgroundColor: "var(--quantum-color-surface-elevated)",
+        border: "1px solid var(--quantum-color-border-subtle)",
+        boxShadow: "var(--quantum-shadows-large)",
+        "&:hover": {
+          transform: "translateY(-2px)",
+          boxShadow: "var(--quantum-shadows-large)"
+        }
+      },
+      "&[data-variant='subtle']": {
+        backgroundColor: "var(--quantum-color-surface-secondary)",
+        border: "1px solid var(--quantum-color-border-subtle)",
+        boxShadow: "none"
+      },
+      "&[data-variant='glassCard']": {
+        backgroundColor: "var(--quantum-color-surface-glass)",
+        backdropFilter: "var(--quantum-glassmorphism-backdrop)",
+        border: "1px solid var(--quantum-color-border-glass)",
+        borderRadius: "var(--quantum-borderRadius-large)",
+        transition: "all var(--quantum-animation-duration-slow) var(--quantum-animation-easing-standard)",
+        "&:hover": {
+          backgroundColor: "var(--quantum-color-surface-glassHover)",
+          border: "1px solid var(--quantum-color-border-glassAccent)"
+        }
+      },
+      "&[data-variant='glassCardHover']": {
+        backgroundColor: "var(--quantum-color-surface-glassHover)",
+        backdropFilter: "var(--quantum-glassmorphism-backdrop)",
+        border: "1px solid var(--quantum-color-border-glassAccent)",
+        borderRadius: "var(--quantum-borderRadius-large)"
+      },
+      "&[data-variant='interactive']": {
+        backgroundColor: "var(--quantum-color-surface-interactive)",
+        border: "1px solid var(--quantum-color-border-glass)",
+        borderRadius: "var(--quantum-borderRadius-medium)",
+        transition: "all var(--quantum-animation-duration-slow) var(--quantum-animation-easing-standard)",
+        "&:hover": {
+          backgroundColor: "var(--quantum-color-surface-glassHover)",
+          border: "1px solid var(--quantum-color-border-subtle)"
+        }
+      },
+      "&[data-variant='overlay']": {
+        backgroundColor: "var(--quantum-color-surface-overlay)",
+        backdropFilter: "var(--quantum-glassmorphism-backdropLight)",
+        border: "none"
+      }
+    }
+  }
+};
+
+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-CQlC-jGc.js.map