/* =============================================
   Glass — Glassmorphism / Liquid Glass system
   ============================================= */

/* ── Base glass effect ── */
.glass {
  background: var(--color-glass);
  backdrop-filter: blur(var(--blur-md)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%);
  border: 1px solid var(--color-glass-border);
  box-shadow: var(--shadow-glass);
}

/* ── Surface glass — lighter, for page-level surfaces ── */
.glass-surface {
  background: var(--color-surface);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: var(--shadow-sm);
}

/* ── Heavy glass — more opaque, for overlays and prominent elements ── */
.glass-heavy {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(var(--blur-lg)) saturate(200%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: var(--shadow-lg);
}

/* ── Dark glass — for contrast panels, dark mode elements ── */
.glass-dark {
  background: var(--color-glass-dark);
  backdrop-filter: blur(var(--blur-lg)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%);
  border: 1px solid var(--color-glass-dark-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  color: var(--color-text-inverse);
}

.glass-dark p,
.glass-dark h1,
.glass-dark h2,
.glass-dark h3,
.glass-dark h4,
.glass-dark span,
.glass-dark a {
  color: inherit;
}

/* ── Frosted glass — subtle tint, good for headers ── */
.glass-frosted {
  background: rgba(245, 245, 245, 0.82);
  backdrop-filter: blur(var(--blur-md)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow-sm);
}

/* ── Glass card — glass + standard card treatment ── */
.glass-card {
  background: var(--color-glass);
  backdrop-filter: blur(var(--blur-md)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-glass);
  transition: transform var(--transition-base),
    box-shadow var(--transition-base);
}

.glass-card:active {
  transform: scale(0.98);
}

/* ── Glass input — reuse .form-input from auth.css, add glass-specific overrides ── */
.glass-input {
  padding: 12px var(--space-md);
  border-width: 1px;
}

/* ── Glass button ── */
.glass-btn {
  background: var(--color-glass);
  backdrop-filter: blur(var(--blur-sm)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(160%);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-full);
  padding: 10px var(--space-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
  cursor: pointer;
}

.glass-btn:hover {
  background: var(--color-glass-hover);
  box-shadow: var(--shadow-md);
}

.glass-btn:active {
  transform: scale(0.97);
}

/* ── Glass tag / chip ── */
.glass-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* ── Glass separator ── */
.glass-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-glass-border),
    transparent
  );
  border: none;
  margin: var(--space-md) 0;
}

/* ── Decorative glass glow ── */
.glass-glow {
  position: relative;
}

.glass-glow::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  border-radius: var(--radius-full);
  pointer-events: none;
}

/* ── Glass inner highlight ── */
.glass-highlight {
  position: relative;
  overflow: hidden;
}

.glass-highlight::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  pointer-events: none;
  border-radius: inherit;
}

/* ── Fallback: no backdrop-filter support ── */
@supports not (backdrop-filter: blur(1px)) {
  .glass,
  .glass-card {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-md);
  }

  .glass-surface {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow-sm);
  }

  .glass-heavy {
    background: var(--color-surface-solid);
    box-shadow: var(--shadow-lg);
  }

  .glass-dark {
    background: rgba(30, 30, 30, 0.92);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  }

  .glass-frosted {
    background: rgba(245, 245, 245, 0.95);
    box-shadow: var(--shadow-sm);
  }

  .glass-input {
    background: var(--color-bg);
  }

  .glass-btn {
    background: rgba(255, 255, 255, 0.92);
  }

  .glass-tag {
    background: rgba(255, 255, 255, 0.85);
  }
}