/* website/static/css/base/glass.css */

/* ------------------------------------------------------------
   GLOBAL GLASS SYSTEM (Theme-Aware + Unified Architecture)
   website/static/css/base/glass.css
------------------------------------------------------------
   PURPOSE:
   This file defines the *entire* glassmorphism engine used
   across the application. All components (cards, navbar,
   buttons, notes, tags, modals, alerts, forms, spinners)
   must use these classes instead of defining their own.

   GOALS:
   ✓ 100% theme-aware (uses variables from themes.css)
   ✓ Consistent blur, saturation, borders, shadows
   ✓ Unified hover behavior
   ✓ Zero duplication with animations.css
   ✓ Responsive-friendly
------------------------------------------------------------ */


/* ============================================================
   1) BASE GLASS STYLE
   ------------------------------------------------------------
   Default crystal panel used everywhere.
============================================================ */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-base);
  color: var(--glass-text);

  backdrop-filter: blur(var(--glass-blur, 14px))
                   saturate(var(--glass-saturate, 160%));
  -webkit-backdrop-filter: blur(var(--glass-blur, 14px))
                           saturate(var(--glass-saturate, 160%));

  box-shadow: var(--shadow-light);

  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast),
    background-color var(--transition-fast);

  /* Default fade-in from global animation system */
  opacity: 0;
  animation: fadeIn var(--transition-slow) forwards;
}



/* ============================================================
   2) HOVER BEHAVIOR (Unified)
============================================================ */
.glass:hover {
  transform: translateY(-2px);
  border-color: var(--glass-border-hover, var(--color-gold));
  box-shadow: var(--shadow-medium);
}



/* ============================================================
   3) COLOR VARIANTS (Border Accents Only)
   ------------------------------------------------------------
   These variants DO NOT override background or blur.
   They only change border color for semantic meaning.
============================================================ */
.glass-primary   { border-color: var(--color-primary); }
.glass-secondary { border-color: var(--color-secondary); }
.glass-accent    { border-color: var(--color-accent); }
.glass-success   { border-color: var(--color-success); }
.glass-danger    { border-color: var(--color-danger); }
.glass-warning   { border-color: var(--color-warning); }
.glass-info      { border-color: var(--color-info); }



/* ============================================================
   4) ELEVATED GLASS (Modals, Dropdowns, Overlays)
============================================================ */
.glass-elevated {
  background: var(--glass-elevated-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-heavy);

  backdrop-filter: blur(var(--glass-elevated-blur, 16px))
                   saturate(var(--glass-elevated-saturate, 180%));
  -webkit-backdrop-filter: blur(var(--glass-elevated-blur, 16px))
                           saturate(var(--glass-elevated-saturate, 180%));
}



/* ============================================================
   5) TRANSPARENT GLASS (Buttons, Pills, Overlays)
============================================================ */
.glass-transparent {
  background: var(--glass-transparent-bg);
  border: 1px solid var(--glass-transparent-border, var(--glass-border));
}



/* ============================================================
   6) GLOW EFFECT (Premium Highlight)
   ------------------------------------------------------------
   Uses the global glowPulse animation from animations.css
============================================================ */
.glass-glow {
  animation: glowPulse 1.5s infinite;
}



/* ============================================================
   7) RESPONSIVE ADJUSTMENTS
============================================================ */
@media (max-width: 768px) {
  .glass {
    border-radius: var(--radius-small);
    padding: 0.8rem;
  }
}

@media (max-width: 480px) {
  .glass {
    border-radius: var(--radius-small);
    padding: 0.6rem;
  }
}