/* =============================================================================
   glass.css — the glassmorphism system
   .glass (base) · .glass--nav (pill/bar) · .glass--card (padded card)
   All color/blur via tokens so light & dark theme just work.
   ========================================================================== */

.glass {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  /* establish stacking so the glass sits above section glows */
  isolation: isolate;
}

/* A faint top sheen makes the pane read as real glass (both themes).
   Kept subtle so it never fights text contrast. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-raised) 22%, transparent),
    transparent 42%
  );
  opacity: 0.6;
  z-index: -1;
}

/* Make sure any direct text inside glass uses the legible primary color
   (prevents accidental glass-on-glass low-contrast traps). */
.glass :where(h1, h2, h3, h4, p, span, li, label, small, a) {
  color: inherit;
}

/* ---------- NAV / BAR VARIANT (pill) ---------- */
.glass--nav {
  border-radius: 999px;
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 color-mix(in srgb, var(--surface-raised) 35%, transparent);
}

/* ---------- CARD VARIANT (padded) ---------- */
.glass--card {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

@media (max-width: 768px) {
  .glass--card { padding: var(--space-3); }
}

/* ---------- FALLBACK: no backdrop-filter support ----------
   Drop transparency to keep text legible; lean on the raised surface. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  }
  .glass::before { opacity: 0.35; }
}