/**
 * COEUS Design System V2 - Depth-Aware Glassmorphism System
 *
 * PURPOSE:
 * Comprehensive glass effect system with automatic depth detection
 * Progressive opacity based on nesting depth like typography --depth-scale
 * Beautiful orange gradient strokes for glass-like lighting
 *
 * FEATURES:
 * - Automatic depth-based opacity (5% → 45%)
 * - Theme-responsive across 5 themes
 * - Orange gradient stroke system
 * - Modal/popup strong backdrop blur
 * - No hover color changes (transform only)
 *
 * DEPTH LEVELS:
 * Level 0: Body children (5-10% opacity) - Hero sections, overlays
 * Level 1: Container children (15-20% opacity) - Main content cards
 * Level 2: Glass card children (25-35% opacity) - Nested cards, forms
 * Level 3+: Deep nesting (35-45% opacity) - Modals, complex forms
 */

/* ============================================ */
/*         GLASS OPACITY DEPTH VARIABLES        */
/* ============================================ */
:root {
  /* Depth-based opacity scales (0-1 range for rgba) */
  --glass-opacity-0: 0.08;   /* Level 0: Very transparent (8%) */
  --glass-opacity-1: 0.18;   /* Level 1: Moderate (18%) */
  --glass-opacity-2: 0.30;   /* Level 2: More opaque (30%) */
  --glass-opacity-3: 0.40;   /* Level 3+: Least transparent (40%) */

  /* Blur intensity by depth */
  --glass-blur-0: blur(20px);
  --glass-blur-1: blur(24px);
  --glass-blur-2: blur(30px);
  --glass-blur-3: blur(40px);

  /* Saturation levels */
  --glass-saturation: saturate(180%);

  /* Orange gradient stroke (warm glass lighting) */
  --glass-stroke-gradient: linear-gradient(135deg,
    rgba(255, 140, 60, 0.6),    /* Warm orange */
    rgba(255, 180, 100, 0.4),   /* Lighter orange-yellow */
    rgba(255, 140, 60, 0.6)     /* Warm orange */
  );

  /* Alternative gradient for subtle elements */
  --glass-stroke-gradient-subtle: linear-gradient(135deg,
    rgba(255, 160, 80, 0.3),
    rgba(255, 200, 120, 0.2),
    rgba(255, 160, 80, 0.3)
  );

  /* Inner highlight colors */
  --glass-highlight-top: rgba(255, 200, 150, 0.5);
  --glass-highlight-top-hover: rgba(255, 200, 150, 0.7);

  /* Outer glow colors */
  --glass-glow-orange: rgba(255, 140, 60, 0.2);
  --glass-glow-orange-hover: rgba(255, 140, 60, 0.3);

  /* Default values (overridden by depth detection) */
  --glass-opacity: var(--glass-opacity-0);
  --glass-blur: var(--glass-blur-0);
}

/* ============================================ */
/*     THEME-SPECIFIC RGB VALUES FOR GLASS      */
/* ============================================ */

/* Light themes use white glass */
[data-theme="light"] {
  --theme-glass-rgb: 255, 255, 255;  /* White glass */
  --glass-stroke-gradient: linear-gradient(135deg,
    rgba(255, 140, 60, 0.5),
    rgba(255, 180, 100, 0.3),
    rgba(255, 140, 60, 0.5)
  );
}

[data-theme="lightmodern"] {
  --theme-glass-rgb: 255, 255, 255;  /* White glass */
  --glass-stroke-gradient: linear-gradient(135deg,
    rgba(255, 130, 50, 0.4),
    rgba(255, 170, 90, 0.25),
    rgba(255, 130, 50, 0.4)
  );
}

/* Dark themes use dark glass */
[data-theme="dark"] {
  --theme-glass-rgb: 0, 0, 0;  /* Black glass */
  --glass-stroke-gradient: linear-gradient(135deg,
    rgba(255, 150, 70, 0.7),
    rgba(255, 190, 110, 0.5),
    rgba(255, 150, 70, 0.7)
  );
}

[data-theme="darkart"] {
  --theme-glass-rgb: 20, 20, 30;  /* Purple-tinted dark glass */
  --glass-stroke-gradient: linear-gradient(135deg,
    rgba(255, 145, 65, 0.65),
    rgba(255, 185, 105, 0.45),
    rgba(255, 145, 65, 0.65)
  );
}

[data-theme="darkmodern"] {
  --theme-glass-rgb: 10, 10, 15;  /* Very dark glass */
  --glass-stroke-gradient: linear-gradient(135deg,
    rgba(255, 135, 55, 0.6),
    rgba(255, 175, 95, 0.4),
    rgba(255, 135, 55, 0.6)
  );
}

/* ============================================ */
/*      AUTOMATIC DEPTH DETECTION FOR GLASS     */
/* ============================================ */

/**
 * Level 0: Direct body children
 * VERY transparent - barely visible glass
 */
body > * {
  --glass-opacity: var(--glass-opacity-0);
  --glass-blur: var(--glass-blur-0);
}

/**
 * Level 1: Inside main containers
 * Slightly more visible glass
 */
.container > *,
.main-container > *,
.app-container > * {
  --glass-opacity: var(--glass-opacity-1);
  --glass-blur: var(--glass-blur-1);
}

/**
 * Level 2: Inside glass cards/boxes
 * More opaque for better contrast
 */
.glass-card > *,
.glass-container > *,
.coeus-box > *,
.panel > *,
.card > * {
  --glass-opacity: var(--glass-opacity-2);
  --glass-blur: var(--glass-blur-2);
}

/**
 * Level 3+: Deeply nested elements
 * Most opaque for maximum readability
 */
.glass-card .glass-card > *,
.glass-container .glass-container > *,
.card .card > *,
.form-group > *,
.modal-content > * {
  --glass-opacity: var(--glass-opacity-3);
  --glass-blur: var(--glass-blur-3);
}

/* Special case: Forms inside glass cards need more opacity */
.glass-card form,
.glass-container form {
  --glass-opacity: var(--glass-opacity-2);
}

.glass-card form input,
.glass-card form select,
.glass-card form textarea {
  --glass-opacity: var(--glass-opacity-3);
}

/* ============================================ */
/*          BASE GLASS EFFECT CLASS             */
/* ============================================ */

/**
 * .glass-base - Core glass effect implementation
 * Used by all glass containers and buttons
 */
.glass-base {
  /* Glass background with depth-aware opacity */
  background: rgba(var(--theme-glass-rgb), var(--glass-opacity));

  /* Backdrop blur with saturation */
  backdrop-filter: var(--glass-blur) var(--glass-saturation);
  -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturation);

  /* Orange gradient stroke border */
  border: 2px solid transparent;
  background-clip: padding-box;
  background-image:
    linear-gradient(
      rgba(var(--theme-glass-rgb), var(--glass-opacity)),
      rgba(var(--theme-glass-rgb), var(--glass-opacity))
    );
  border-image: var(--glass-stroke-gradient);
  border-image-slice: 1;

  /* Inner highlight + outer orange glow */
  box-shadow:
    inset 0 1px 0 var(--glass-highlight-top),
    0 0 20px var(--glass-glow-orange),
    0 4px 6px rgba(0, 0, 0, 0.1);

  /* Smooth transitions (no color change on hover) */
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    border-image 0.2s ease;

  /* Rounded corners */
  border-radius: var(--radius-lg, 1.5rem);

  /* Prevent content from touching edges */
  position: relative;
  isolation: isolate;
}

/**
 * Hover state - NO background change, only transform/shadow
 */
.glass-base:hover {
  /* Lift effect */
  transform: translateY(-2px);

  /* Enhanced shadows and glow (no background change) */
  box-shadow:
    inset 0 1px 0 var(--glass-highlight-top-hover),
    0 0 30px var(--glass-glow-orange-hover),
    0 8px 16px rgba(0, 0, 0, 0.15);

  /* Slightly brighter border on hover */
  border-image: linear-gradient(135deg,
    rgba(255, 140, 60, 0.8),
    rgba(255, 180, 100, 0.6),
    rgba(255, 140, 60, 0.8)
  );
  border-image-slice: 1;
}

/* Active/pressed state */
.glass-base:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight-top),
    0 0 15px var(--glass-glow-orange),
    0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================ */
/*         GLASS CONTAINER VARIANTS             */
/* ============================================ */

/* Primary glass card */
.glass-card {
  composes: glass-base;
  padding: var(--spacing-xl, 2rem);
}

/* Alternative name (same as glass-card) */
.coeus-box {
  composes: glass-base;
  padding: var(--spacing-xl, 2rem);
}

/* Thin glass container (more transparent) */
.glass-container-thin {
  composes: glass-base;
  --glass-opacity: calc(var(--glass-opacity) * 0.6);
  padding: var(--spacing-lg, 1.5rem);
}

/* Regular glass container */
.glass-container {
  composes: glass-base;
  padding: var(--spacing-lg, 1.5rem);
}

/* Ultra-thin variant (very subtle) */
.glass-ultra-thin {
  composes: glass-base;
  --glass-opacity: calc(var(--glass-opacity) * 0.4);
  --glass-blur: blur(10px);
  border-image: var(--glass-stroke-gradient-subtle);
  border-image-slice: 1;
  padding: var(--spacing-md, 1rem);
}

/* Thick variant (more opaque) */
.glass-thick {
  composes: glass-base;
  --glass-opacity: calc(var(--glass-opacity) * 1.5);
  --glass-blur: blur(40px);
  padding: var(--spacing-xl, 2rem);
}

/* ============================================ */
/*         MODAL/POPUP BACKDROP SYSTEM          */
/* ============================================ */

/* Modal overlay with strong backdrop blur */
.modal-overlay,
.dialog-overlay,
[data-radix-dialog-overlay] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
  z-index: var(--z-modal-backdrop, 1000);
  animation: fadeIn 0.2s ease;
}

/* Modal content (uses depth level 3) */
.modal-content,
.dialog-content,
[data-radix-dialog-content] {
  --glass-opacity: var(--glass-opacity-3);
  --glass-blur: var(--glass-blur-3);
  composes: glass-base;
  position: relative;
  z-index: var(--z-modal, 1001);
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Popup/dropdown containers */
.popup,
.dropdown-content,
[data-radix-popover-content],
[data-radix-dropdown-menu-content] {
  --glass-opacity: var(--glass-opacity-3);
  --glass-blur: var(--glass-blur-3);
  composes: glass-base;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight-top),
    0 0 40px var(--glass-glow-orange),
    0 10px 40px rgba(0, 0, 0, 0.2);
}

/* ============================================ */
/*         GLASS BUTTON SYSTEM                  */
/* ============================================ */

/* Base glass button */
.glass-button {
  composes: glass-base;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  user-select: none;
  text-decoration: none;
  color: var(--text-primary);
  font-family: var(--font-ui, 'Figtree', sans-serif);
}

/* Button sizes */
.glass-button.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
}

.glass-button.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
  border-radius: 1rem;
}

/* Button variants */
.glass-button.btn-primary {
  --theme-glass-rgb: var(--accent-primary-rgb, 0, 122, 255);
  color: white;
}

.glass-button.btn-success {
  --theme-glass-rgb: var(--accent-success-rgb, 52, 199, 89);
  color: white;
}

.glass-button.btn-danger {
  --theme-glass-rgb: var(--accent-danger-rgb, 255, 59, 48);
  color: white;
}

.glass-button.btn-warning {
  --theme-glass-rgb: var(--accent-warning-rgb, 255, 149, 0);
  color: white;
}

/* Disabled state */
.glass-button:disabled,
.glass-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ============================================ */
/*         GLASS FORM ELEMENTS                  */
/* ============================================ */

/* Glass input fields */
.glass-input,
.glass-select,
.glass-textarea {
  composes: glass-base;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  color: var(--text-primary);
  width: 100%;
  outline: none;
}

.glass-input:focus,
.glass-select:focus,
.glass-textarea:focus {
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

/* Glass checkbox/radio */
.glass-checkbox,
.glass-radio {
  composes: glass-base;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.glass-radio {
  border-radius: 50%;
}

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

/* Mobile: Less aggressive opacity scaling */
@media (max-width: 48em) {
  :root {
    --glass-opacity-0: 0.10;   /* 10% (was 8%) */
    --glass-opacity-1: 0.20;   /* 20% (was 18%) */
    --glass-opacity-2: 0.32;   /* 32% (was 30%) */
    --glass-opacity-3: 0.42;   /* 42% (was 40%) */

    /* Slightly less blur on mobile for performance */
    --glass-blur-0: blur(15px);
    --glass-blur-1: blur(20px);
    --glass-blur-2: blur(25px);
    --glass-blur-3: blur(30px);
  }
}

/* Tablets: Balanced opacity */
@media (min-width: 48em) and (max-width: 64em) {
  :root {
    --glass-opacity-0: 0.09;
    --glass-opacity-1: 0.19;
    --glass-opacity-2: 0.31;
    --glass-opacity-3: 0.41;
  }
}

/* ============================================ */
/*         UTILITY CLASSES                      */
/* ============================================ */

/* Manual depth overrides */
.glass-depth-0 { --glass-opacity: var(--glass-opacity-0) !important; }
.glass-depth-1 { --glass-opacity: var(--glass-opacity-1) !important; }
.glass-depth-2 { --glass-opacity: var(--glass-opacity-2) !important; }
.glass-depth-3 { --glass-opacity: var(--glass-opacity-3) !important; }

/* Disable glass effect */
.no-glass {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--background-primary) !important;
  border: 1px solid var(--border-color) !important;
}

/* ============================================ */
/*         ANIMATIONS                           */
/* ============================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================ */
/*         ACCESSIBILITY                        */
/* ============================================ */

/* Reduced motion: disable transforms */
@media (prefers-reduced-motion: reduce) {
  .glass-base,
  .glass-button,
  .modal-content,
  .dialog-content {
    transition: box-shadow 0.2s ease !important;
    transform: none !important;
  }

  .glass-base:hover,
  .glass-button:hover {
    transform: none !important;
  }

  @keyframes slideUp {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  :root {
    --glass-opacity-0: 0.15;
    --glass-opacity-1: 0.25;
    --glass-opacity-2: 0.40;
    --glass-opacity-3: 0.55;
  }

  .glass-base {
    border-width: 3px;
  }
}