/* OnSumn v2 — Glass Design Tokens & Mixins */

/* Glass material: translucent layered bg + inner glow + blur */
const GLASS = {
  // Standard glass panel (dark)
  dark: {
    background: 'linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), linear-gradient(rgba(51,51,51,0.35), rgba(51,51,51,0.35)), linear-gradient(rgba(153,153,153,0.15), rgba(153,153,153,0.15))',
    boxShadow: 'inset 0px 0px 20px 0px rgba(242,242,242,0.06), inset 0px 0px 3px 0px rgba(255,255,255,0.12), inset -1px -1px 0.5px -1px rgba(255,255,255,0.25), inset 1px 1px 0.5px -1px rgba(255,255,255,0.25), inset -1px -1px 0px -0.5px rgba(38,38,38,0.5), inset 1px 1px 0px -0.5px rgba(51,51,51,0.5)',
    backdropFilter: 'blur(40px)',
    WebkitBackdropFilter: 'blur(40px)',
  },
  // Light mode glass panel
  light: {
    background: 'linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)), linear-gradient(rgba(200,200,200,0.2), rgba(200,200,200,0.2))',
    boxShadow: 'inset 0px 0px 20px 0px rgba(255,255,255,0.3), inset 0px 0px 3px 0px rgba(255,255,255,0.4), inset -1px -1px 0.5px -1px rgba(255,255,255,0.6), inset 1px 1px 0.5px -1px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,0.06)',
    backdropFilter: 'blur(40px)',
    WebkitBackdropFilter: 'blur(40px)',
  },
  // Subtle glass for cards
  cardDark: {
    background: 'linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), linear-gradient(rgba(51,51,51,0.3), rgba(51,51,51,0.3)), linear-gradient(rgba(153,153,153,0.1), rgba(153,153,153,0.1))',
    boxShadow: 'inset 0px 0px 16px 0px rgba(242,242,242,0.04), inset 0px 0px 2px 0px rgba(255,255,255,0.1), inset -1px -1px 0.5px -1px rgba(255,255,255,0.15), inset 1px 1px 0.5px -1px rgba(255,255,255,0.15)',
    backdropFilter: 'blur(20px)',
    WebkitBackdropFilter: 'blur(20px)',
  },
  cardLight: {
    background: 'linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), linear-gradient(rgba(200,200,200,0.15), rgba(200,200,200,0.15))',
    boxShadow: 'inset 0px 0px 16px 0px rgba(255,255,255,0.25), inset 0px 0px 2px 0px rgba(255,255,255,0.35), inset -1px -1px 0.5px -1px rgba(255,255,255,0.5), inset 1px 1px 0.5px -1px rgba(255,255,255,0.5), 0 1px 2px rgba(0,0,0,0.04)',
    backdropFilter: 'blur(20px)',
    WebkitBackdropFilter: 'blur(20px)',
  },
  // Button glass — dark (unchanged)
  btnDark: {
    background: 'linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.06))',
    boxShadow: 'inset 0px 0px 8px 0px rgba(255,255,255,0.06), inset -1px -1px 0.5px -1px rgba(255,255,255,0.2), inset 1px 1px 0.5px -1px rgba(255,255,255,0.2)',
    backdropFilter: 'blur(12px)',
    WebkitBackdropFilter: 'blur(12px)',
  },
  // Button glass — light: soft white neon glow at 60% opacity
  btnLight: {
    background: 'linear-gradient(rgba(255,255,255,0.72), rgba(255,255,255,0.55))',
    boxShadow: '0 0 12px rgba(255,255,255,0.6), 0 0 28px rgba(255,255,255,0.25), inset 0px 0px 10px 0px rgba(255,255,255,0.5), inset -1px -1px 0.5px -1px rgba(255,255,255,0.6), inset 1px 1px 0.5px -1px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,0.08)',
    backdropFilter: 'blur(14px)',
    WebkitBackdropFilter: 'blur(14px)',
  },
};

function glassStyle(darkMode, variant = 'card') {
  if (variant === 'panel') return darkMode ? GLASS.dark : GLASS.light;
  if (variant === 'btn') return darkMode ? GLASS.btnDark : GLASS.btnLight;
  return darkMode ? GLASS.cardDark : GLASS.cardLight;
}

window.GLASS = GLASS;
window.glassStyle = glassStyle;