/* ==========================================================================
   Liquid Glass Design System — 32 Dental Pearls Clinic
   Modular Apple-Style Refraction & Glassmorphism Utilities
   ========================================================================== */

:root {
  --glass-tint-a: rgba(248, 249, 250, 0.88);
  --glass-tint-b: rgba(242, 245, 250, 0.65);
  --glass-tint-strong-a: rgba(248, 249, 250, 0.95);
  --glass-tint-strong-b: rgba(242, 245, 250, 0.88);
  
  --glass-line: rgba(157, 159, 168, 0.25);
  --glass-line-hover: rgba(138, 115, 156, 0.5);
  --glass-highlight: rgba(255, 255, 255, 0.95);
  
  --glass-shadow: 0 12px 34px rgba(54, 55, 61, 0.06);
  --glass-shadow-lift: 0 20px 48px rgba(138, 115, 156, 0.18);
  
  --glass-blur: 16px;
  --glass-saturate: 1.4;
  --glass-radius: 20px;
}

/* Base Glass Surface */
.glass {
  position: relative;
  border-radius: var(--glass-radius);
  background: linear-gradient(135deg, var(--glass-tint-a), var(--glass-tint-b));
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.glass--strong {
  background: linear-gradient(135deg, var(--glass-tint-strong-a), var(--glass-tint-strong-b));
}

.glass--hover {
  transition: border-color var(--transition-fast, 0.15s ease), box-shadow var(--transition-normal, 0.25s ease), transform var(--transition-normal, 0.25s ease);
}

.glass--hover:hover {
  border-color: var(--glass-line-hover);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow-lift);
  transform: translateY(-3px);
}

/* Chromium Refraction host mapping */
[data-glass].lg-fallback {
  background: linear-gradient(135deg, var(--glass-tint-strong-a), var(--glass-tint-strong-b));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}