styles/glass.css

/* ============================================================
   GLASSGRID — GLASSMORPHISM UTILITY SYSTEM
   
   Reusable glass surface classes.
   All visual values come from tokens.
   Structure-free — layout is defined in layout.css.
   ============================================================ */

/* ── Base Glass Mixin Pattern ── */
.glass {
  background: var(--color-glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  border: 1px solid var(--color-glass-border);
  box-shadow: var(--shadow-md);
}

.glass-sm {
  background: var(--color-glass-fill);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturation));
  border: 1px solid var(--color-glass-border);
  box-shadow: var(--shadow-sm);
}

.glass-md {
  background: var(--color-glass-fill-md);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  border: 1px solid var(--color-glass-border-md);
  box-shadow: var(--shadow-lg);
}

.glass-lg {
  background: var(--color-glass-fill-lg);
  backdrop-filter: blur(var(--blur-xl)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(var(--glass-saturation));
  border: 1px solid var(--color-glass-border-md);
  box-shadow: var(--shadow-xl);
}

/* ── Glass with Highlight (top edge) ── */
.glass-elevated {
  background: var(--color-glass-fill-md);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  border: 1px solid var(--color-glass-border-md);
  box-shadow: var(--shadow-lg),
              inset 0 1px 0 var(--color-glass-highlight);
}

/* ── Glass Accent Border ── */
.glass-accent {
  background: var(--color-glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  border: 1px solid var(--color-border-accent);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

/* ── Gradient Glass ── */
.glass-gradient {
  background: linear-gradient(
    135deg,
    var(--color-glass-fill-md),
    var(--color-glass-fill)
  );
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  border: 1px solid var(--color-glass-border);
  box-shadow: var(--shadow-lg);
}

/* ── Navigation Glass ── */
.glass-nav {
  background: var(--navbar-bg);
  backdrop-filter: blur(var(--navbar-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--navbar-blur)) saturate(var(--glass-saturation));
  border-bottom: 1px solid var(--color-glass-border);
}

/* ── Glass Bottom Bar ── */
.glass-bottom {
  background: var(--navbar-bg);
  backdrop-filter: blur(var(--navbar-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--navbar-blur)) saturate(var(--glass-saturation));
  border-top: 1px solid var(--color-glass-border);
}

/* ── Glass Modal ── */
.glass-modal {
  background: rgba(10, 10, 20, 0.85);
  backdrop-filter: blur(var(--blur-2xl)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(var(--glass-saturation));
  border: 1px solid var(--color-glass-border-md);
  box-shadow: var(--shadow-xl),
              inset 0 1px 0 var(--color-glass-highlight);
}

/* ── Glass Input ── */
.glass-input {
  background: var(--color-glass-fill);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  border: 1px solid var(--color-glass-border);
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.glass-input:focus {
  background: var(--color-glass-fill-md);
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.glass-input::placeholder {
  color: var(--color-text-muted);
}

/* ── Radius Helpers ── */
.r-sm   { border-radius: var(--radius-sm); }
.r-md   { border-radius: var(--radius-md); }
.r-lg   { border-radius: var(--radius-lg); }
.r-xl   { border-radius: var(--radius-xl); }
.r-2xl  { border-radius: var(--radius-2xl); }
.r-full { border-radius: var(--radius-full); }

/* ── Glow Helpers ── */
.glow         { box-shadow: var(--shadow-glow); }
.glow-accent  { box-shadow: var(--shadow-glow-accent); }

/* ── Gradient Border (using pseudo) ── */
.gradient-border {
  position: relative;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--color-accent-gradient-full);
  z-index: -1;
  opacity: 0.5;
}