/**
 * Apple-Inspired Glassmorphism System
 * Standardized blur levels, consistent effects, and semantic naming
 * Based on iOS/macOS glassmorphism design patterns
 */

:root {
  /* ============================================
     BLUR LEVELS - Standardized Values
     ============================================ */
  --blur-none: blur(0);
  --blur-sm: blur(8px);          /* Subtle glass effect */
  --blur-md: blur(16px);         /* Standard glass effect */
  --blur-lg: blur(24px);         /* Strong glass effect */
  --blur-xl: blur(32px);         /* Maximum glass effect */

  /* Legacy support - maps old values to new system */
  --blur-10: var(--blur-sm);     /* blur(10px) → blur(8px) */
  --blur-15: var(--blur-md);     /* blur(15px) → blur(16px) */
  --blur-20: var(--blur-md);     /* blur(20px) → blur(16px) */
  --blur-25: var(--blur-lg);     /* blur(25px) → blur(24px) */

  /* ============================================
     GLASS MATERIAL LEVELS
     Complete glass effect combining blur + background
     ============================================ */

  /* Glass Light - For use on dark backgrounds */
  --glass-light-subtle: rgba(255, 255, 255, 0.05);
  --glass-light-soft: rgba(255, 255, 255, 0.08);
  --glass-light-medium: rgba(255, 255, 255, 0.12);
  --glass-light-strong: rgba(255, 255, 255, 0.18);
  --glass-light-intense: rgba(255, 255, 255, 0.25);

  /* Glass Dark - For use on light backgrounds */
  --glass-dark-subtle: rgba(0, 0, 0, 0.05);
  --glass-dark-soft: rgba(0, 0, 0, 0.08);
  --glass-dark-medium: rgba(0, 0, 0, 0.12);
  --glass-dark-strong: rgba(0, 0, 0, 0.18);
  --glass-dark-intense: rgba(0, 0, 0, 0.25);

  /* ============================================
     GLASS BORDERS
     ============================================ */
  --glass-border-light-subtle: rgba(255, 255, 255, 0.1);
  --glass-border-light-medium: rgba(255, 255, 255, 0.2);
  --glass-border-light-strong: rgba(255, 255, 255, 0.3);

  --glass-border-dark-subtle: rgba(0, 0, 0, 0.1);
  --glass-border-dark-medium: rgba(0, 0, 0, 0.15);
  --glass-border-dark-strong: rgba(0, 0, 0, 0.2);

  /* ============================================
     GLASS SHADOWS
     Subtle shadows for depth on glass surfaces
     ============================================ */
  --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.08);
  --glass-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12);
  --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);

  /* ============================================
     VIBRANCY EFFECTS (iOS-style)
     ============================================ */
  --vibrancy-light: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );

  --vibrancy-dark: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.08) 100%
  );

  --vibrancy-ultra-light: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.12) 100%
  );

  /* ============================================
     BACKDROP SATURATION
     Enhances color richness behind glass
     ============================================ */
  --saturation-normal: saturate(1);
  --saturation-enhanced: saturate(1.2);
  --saturation-vibrant: saturate(1.5);
}

/* ============================================
   GLASS MATERIAL CLASSES - Preset Combinations
   ============================================ */

/* Glass Subtle - Minimal effect */
.glass-subtle {
  background: var(--glass-light-subtle);
  backdrop-filter: var(--blur-sm) var(--saturation-normal);
  -webkit-backdrop-filter: var(--blur-sm) var(--saturation-normal);
  border: 1px solid var(--glass-border-light-subtle);
}

/* Glass Soft - Light effect */
.glass-soft {
  background: var(--glass-light-soft);
  backdrop-filter: var(--blur-sm) var(--saturation-enhanced);
  -webkit-backdrop-filter: var(--blur-sm) var(--saturation-enhanced);
  border: 1px solid var(--glass-border-light-medium);
}

/* Glass Medium - Standard effect (most common) */
.glass-medium {
  background: var(--glass-light-medium);
  backdrop-filter: var(--blur-md) var(--saturation-enhanced);
  -webkit-backdrop-filter: var(--blur-md) var(--saturation-enhanced);
  border: 1px solid var(--glass-border-light-medium);
}

/* Glass Strong - Pronounced effect */
.glass-strong {
  background: var(--glass-light-strong);
  backdrop-filter: var(--blur-lg) var(--saturation-vibrant);
  -webkit-backdrop-filter: var(--blur-lg) var(--saturation-vibrant);
  border: 1px solid var(--glass-border-light-strong);
}

/* Glass Intense - Maximum effect */
.glass-intense {
  background: var(--glass-light-intense);
  backdrop-filter: var(--blur-xl) var(--saturation-vibrant);
  -webkit-backdrop-filter: var(--blur-xl) var(--saturation-vibrant);
  border: 1px solid var(--glass-border-light-strong);
}

/* ============================================
   DARK GLASS VARIANTS
   ============================================ */

.glass-dark-subtle {
  background: var(--glass-dark-subtle);
  backdrop-filter: var(--blur-sm) var(--saturation-normal);
  -webkit-backdrop-filter: var(--blur-sm) var(--saturation-normal);
  border: 1px solid var(--glass-border-dark-subtle);
}

.glass-dark-medium {
  background: var(--glass-dark-medium);
  backdrop-filter: var(--blur-md) var(--saturation-enhanced);
  -webkit-backdrop-filter: var(--blur-md) var(--saturation-enhanced);
  border: 1px solid var(--glass-border-dark-medium);
}

.glass-dark-strong {
  background: var(--glass-dark-strong);
  backdrop-filter: var(--blur-lg) var(--saturation-vibrant);
  -webkit-backdrop-filter: var(--blur-lg) var(--saturation-vibrant);
  border: 1px solid var(--glass-border-dark-strong);
}

/* ============================================
   VIBRANCY CLASSES (iOS-style blur materials)
   ============================================ */

.glass-vibrancy-light {
  background: var(--vibrancy-light);
  backdrop-filter: var(--blur-md) var(--saturation-enhanced);
  -webkit-backdrop-filter: var(--blur-md) var(--saturation-enhanced);
  border: 1px solid var(--glass-border-light-medium);
}

.glass-vibrancy-dark {
  background: var(--vibrancy-dark);
  backdrop-filter: var(--blur-md) var(--saturation-enhanced);
  -webkit-backdrop-filter: var(--blur-md) var(--saturation-enhanced);
  border: 1px solid var(--glass-border-dark-medium);
}

.glass-vibrancy-ultra {
  background: var(--vibrancy-ultra-light);
  backdrop-filter: var(--blur-lg) var(--saturation-vibrant);
  -webkit-backdrop-filter: var(--blur-lg) var(--saturation-vibrant);
  border: 1px solid var(--glass-border-light-strong);
}

/* ============================================
   COMPONENT-SPECIFIC GLASS PRESETS
   ============================================ */

/* Card Glass - Standard cards */
.glass-card {
  background: var(--glass-light-medium);
  backdrop-filter: var(--blur-md) var(--saturation-enhanced);
  -webkit-backdrop-filter: var(--blur-md) var(--saturation-enhanced);
  border: 1px solid var(--glass-border-light-medium);
  box-shadow: var(--glass-shadow-md);
  border-radius: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  background: var(--glass-light-strong);
  border-color: var(--glass-border-light-strong);
  box-shadow: var(--glass-shadow-lg);
  transform: translateY(-2px);
}

/* Navigation Glass - Top navbar */
.glass-nav {
  background: var(--glass-light-soft);
  backdrop-filter: var(--blur-md) var(--saturation-enhanced);
  -webkit-backdrop-filter: var(--blur-md) var(--saturation-enhanced);
  border-bottom: 1px solid var(--glass-border-light-subtle);
  box-shadow: var(--glass-shadow-sm);
}

/* Modal Glass - Overlays and modals */
.glass-modal {
  background: var(--glass-light-strong);
  backdrop-filter: var(--blur-lg) var(--saturation-vibrant);
  -webkit-backdrop-filter: var(--blur-lg) var(--saturation-vibrant);
  border: 1px solid var(--glass-border-light-medium);
  box-shadow: var(--glass-shadow-lg);
  border-radius: 24px;
}

/* Button Glass - Glass buttons */
.glass-button {
  background: var(--glass-light-soft);
  backdrop-filter: var(--blur-sm) var(--saturation-enhanced);
  -webkit-backdrop-filter: var(--blur-sm) var(--saturation-enhanced);
  border: 1px solid var(--glass-border-light-medium);
  box-shadow: var(--glass-shadow-sm);
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-button:hover {
  background: var(--glass-light-medium);
  border-color: var(--glass-border-light-strong);
  transform: translateY(-1px);
  box-shadow: var(--glass-shadow-md);
}

.glass-button:active {
  transform: translateY(0);
  box-shadow: var(--glass-shadow-sm);
}

/* Sidebar Glass - Side panels */
.glass-sidebar {
  background: var(--glass-light-medium);
  backdrop-filter: var(--blur-lg) var(--saturation-enhanced);
  -webkit-backdrop-filter: var(--blur-lg) var(--saturation-enhanced);
  border-right: 1px solid var(--glass-border-light-subtle);
  box-shadow: var(--glass-shadow-md);
}

/* Header Glass - Section headers */
.glass-header {
  background: var(--glass-light-subtle);
  backdrop-filter: var(--blur-sm) var(--saturation-normal);
  -webkit-backdrop-filter: var(--blur-sm) var(--saturation-normal);
  border-bottom: 1px solid var(--glass-border-light-subtle);
}

/* Caption Glass - Image captions, overlays */
.glass-caption {
  background: var(--glass-light-medium);
  backdrop-filter: var(--blur-md) var(--saturation-enhanced);
  -webkit-backdrop-filter: var(--blur-md) var(--saturation-enhanced);
  border: 1px solid var(--glass-border-light-medium);
  border-radius: 16px;
}

/* Badge Glass - Small badges and labels */
.glass-badge {
  background: var(--glass-light-soft);
  backdrop-filter: var(--blur-sm) var(--saturation-normal);
  -webkit-backdrop-filter: var(--blur-sm) var(--saturation-normal);
  border: 1px solid var(--glass-border-light-subtle);
  border-radius: 20px;
  padding: 4px 12px;
}

/* ============================================
   UTILITY CLASSES - Blur Only
   ============================================ */

.backdrop-blur-none {
  backdrop-filter: var(--blur-none);
  -webkit-backdrop-filter: var(--blur-none);
}

.backdrop-blur-sm {
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

.backdrop-blur-md {
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
}

.backdrop-blur-lg {
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
}

.backdrop-blur-xl {
  backdrop-filter: var(--blur-xl);
  -webkit-backdrop-filter: var(--blur-xl);
}

/* ============================================
   UTILITY CLASSES - Saturation
   ============================================ */

.backdrop-saturate-normal {
  backdrop-filter: var(--saturation-normal);
  -webkit-backdrop-filter: var(--saturation-normal);
}

.backdrop-saturate-enhanced {
  backdrop-filter: var(--saturation-enhanced);
  -webkit-backdrop-filter: var(--saturation-enhanced);
}

.backdrop-saturate-vibrant {
  backdrop-filter: var(--saturation-vibrant);
  -webkit-backdrop-filter: var(--saturation-vibrant);
}

/* ============================================
   COMBINED UTILITIES - Blur + Saturation
   ============================================ */

.backdrop-glass-sm {
  backdrop-filter: var(--blur-sm) var(--saturation-enhanced);
  -webkit-backdrop-filter: var(--blur-sm) var(--saturation-enhanced);
}

.backdrop-glass-md {
  backdrop-filter: var(--blur-md) var(--saturation-enhanced);
  -webkit-backdrop-filter: var(--blur-md) var(--saturation-enhanced);
}

.backdrop-glass-lg {
  backdrop-filter: var(--blur-lg) var(--saturation-vibrant);
  -webkit-backdrop-filter: var(--blur-lg) var(--saturation-vibrant);
}

/* ============================================
   BROWSER FALLBACKS
   ============================================ */

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  .glass-card,
  .glass-medium,
  .glass-strong,
  .glass-nav,
  .glass-modal,
  .glass-button {
    background: rgba(255, 255, 255, 0.9);
  }

  .glass-dark-medium,
  .glass-dark-strong {
    background: rgba(0, 0, 0, 0.85);
  }
}

/* ============================================
   ACCESSIBILITY - Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .glass-card,
  .glass-button,
  .glass-modal {
    transition: none !important;
  }

  .glass-card:hover,
  .glass-button:hover {
    transform: none;
  }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Reduce blur on low-end devices */
@media (max-width: 768px) {
  :root {
    --blur-md: blur(12px);  /* Reduce from 16px */
    --blur-lg: blur(20px);  /* Reduce from 24px */
    --blur-xl: blur(28px);  /* Reduce from 32px */
  }
}

/* Disable heavy effects on very low-end devices */
@media (max-width: 375px) {
  .glass-intense,
  .glass-vibrancy-ultra {
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
  }
}

/* ============================================
   DARK MODE ADJUSTMENTS
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Adjust glass opacity for dark mode */
    --glass-light-subtle: rgba(255, 255, 255, 0.03);
    --glass-light-soft: rgba(255, 255, 255, 0.06);
    --glass-light-medium: rgba(255, 255, 255, 0.10);
    --glass-light-strong: rgba(255, 255, 255, 0.15);

    /* Adjust borders for dark mode */
    --glass-border-light-subtle: rgba(255, 255, 255, 0.08);
    --glass-border-light-medium: rgba(255, 255, 255, 0.15);
    --glass-border-light-strong: rgba(255, 255, 255, 0.25);
  }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {
  .glass-card,
  .glass-medium,
  .glass-nav,
  .glass-modal,
  .glass-button {
    border-width: 2px;
    background: rgba(255, 255, 255, 0.95);
  }

  .glass-dark-medium,
  .glass-dark-strong {
    background: rgba(0, 0, 0, 0.95);
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .glass-card,
  .glass-medium,
  .glass-nav,
  .glass-modal,
  .glass-button,
  [class*="glass-"] {
    background: white;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #ddd;
    box-shadow: none;
  }
}