/* =======================================================================
   GLOBAL CRYSTAL GLASSMORPHISM MODULE
   Centralized variables and classes for the transparent crystal UI effect.
   Edit here to affect the entire application (landing page + dashboard).
   ======================================================================= */

:root, body.dark-mode, body.dark-theme, body:not(.light-theme) {
    --crystal-bg: rgba(255, 255, 255, 0.08);
    --crystal-blur: blur(20px) saturate(150%);
    --crystal-border: rgba(255, 255, 255, 0.15);
    --crystal-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

body.light-mode, body.light-theme {
    --crystal-bg: rgba(255, 255, 255, 0.75);
    --crystal-blur: blur(20px) saturate(150%);
    --crystal-border: rgba(0, 0, 0, 0.08);
    --crystal-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

/* Base Crystal Effect */
.crystal-glass {
    background: var(--crystal-bg) !important;
    backdrop-filter: var(--crystal-blur) !important;
    -webkit-backdrop-filter: var(--crystal-blur) !important;
    border: 1px solid var(--crystal-border) !important;
    box-shadow: var(--crystal-shadow) !important;
}

/* Bottom Border Only (For Headers) */
.crystal-glass-bottom {
    background: var(--crystal-bg) !important;
    backdrop-filter: var(--crystal-blur) !important;
    -webkit-backdrop-filter: var(--crystal-blur) !important;
    border-bottom: 1px solid var(--crystal-border) !important;
    box-shadow: var(--crystal-shadow) !important;
}