/* glass.css — QI glass morphism utilities
 * Ported from QIGlassModifier (QIDesignSystem.swift)
 * ADR 0002: Port QI design system from iOS SwiftUI to CSS
 */

/* ── Base glass ────────────────────────────────────── */
/* Mirrors .qiGlass() — translucent white .08, blur 24, border .08 */
.qi-glass {
  background: var(--qi-glass);
  backdrop-filter: blur(var(--qi-blur)) saturate(var(--qi-saturate));
  -webkit-backdrop-filter: blur(var(--qi-blur)) saturate(var(--qi-saturate));
  border: 0.5px solid var(--qi-glass-border-subtle);
  border-radius: var(--qi-radius-lg);
}

/* ── Raised glass ──────────────────────────────────── */
/* Mirrors .qiGlassRaised() — darker tint, stronger border (cards over atmosphere) */
.qi-glass-raised {
  background: rgba(15, 25, 22, 0.55);
  backdrop-filter: blur(var(--qi-blur)) saturate(var(--qi-saturate));
  -webkit-backdrop-filter: blur(var(--qi-blur)) saturate(var(--qi-saturate));
  border: 1px solid var(--qi-glass-border);
  border-radius: var(--qi-radius-lg);
}

/* ── Pill glass ────────────────────────────────────── */
/* Mirrors .qiGlassPill() — for topbar, pills */
.qi-glass-pill {
  background: rgba(15, 25, 22, 0.55);
  backdrop-filter: blur(var(--qi-blur)) saturate(var(--qi-saturate));
  -webkit-backdrop-filter: blur(var(--qi-blur)) saturate(var(--qi-saturate));
  border: 0.5px solid var(--qi-glass-border-subtle);
  border-radius: var(--qi-radius-pill);
}

/* ── Accent-tinted glass ───────────────────────────── */
/* Mirrors .qiGlassAccent() — for human chat bubbles */
.qi-glass-accent {
  background: color-mix(in srgb, var(--qi-accent) 8%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 0.5px solid color-mix(in srgb, var(--qi-accent) 15%, transparent);
  border-radius: var(--qi-radius-md);
}

/* ── Trust-tinted glass ────────────────────────────── */
/* Mirrors .qiGlassTrust() — for mission cards */
.qi-glass-trust {
  background: color-mix(in srgb, var(--qi-trust) 6%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 0.5px solid color-mix(in srgb, var(--qi-trust) 20%, transparent);
  border-radius: var(--qi-radius-md);
}

/* ── Error-tinted glass ────────────────────────────── */
/* Mirrors .qiGlassError() — for HIT approval cards */
.qi-glass-error {
  background: color-mix(in srgb, var(--qi-error) 8%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 0.5px solid color-mix(in srgb, var(--qi-error) 20%, transparent);
  border-radius: var(--qi-radius-md);
}

/* ── Shadows ───────────────────────────────────────── */
/* Mirrors .qiShadow() — large shadow for floating panels */
.qi-shadow {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* Mirrors .qiGlow() — glow for active/accent elements */
.qi-glow-shadow {
  box-shadow: 0 4px 8px color-mix(in srgb, var(--qi-accent) 25%, transparent);
}

.qi-glow-shadow-trust {
  box-shadow: 0 4px 8px color-mix(in srgb, var(--qi-trust) 25%, transparent);
}

/* ── Glassy fade ───────────────────────────────────── */
/* Bottom edge fade — mirrors the LinearGradient in QIDashboardView */
.qi-fade-bottom {
  background: linear-gradient(to bottom, transparent, var(--qi-bg));
  pointer-events: none;
}