/* ============================================================
   Nomomail — glassmorphism.css
   Glass-card utility and related surface styles
   ============================================================ */

/* ── Glass Card ── */

.glass-card {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-xl, 1rem);
}

/* Backdrop-filter applied only when supported */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass-card {
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    background: rgba(255, 255, 255, 0.55);
  }
}

/* ── Dark theme variant ── */
.theme-dark .glass-card {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .theme-dark .glass-card {
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    background: rgba(30, 41, 59, 0.6);
  }
}

/* ── Subtle glass (lighter effect) ── */
.glass-subtle {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass-subtle {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.7);
  }
}

.theme-dark .glass-subtle {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.06);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .theme-dark .glass-subtle {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: rgba(30, 41, 59, 0.75);
  }
}

/* ── Nav glass ── */
.glass-nav {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass-nav {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.8);
  }
}

.theme-dark .glass-nav {
  background: rgba(15, 23, 42, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .theme-dark .glass-nav {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: rgba(15, 23, 42, 0.8);
  }
}