/* ===================================
   Antikythera Technologies Design System
   Glass Morphism + Tokyo Night Enhanced
   =================================== */

:root {
  /* Tokyo Night Enhanced Colors with Alpha Variants */
  --tn-bg-primary: #1a1b26;
  --tn-bg-secondary: #24283b;
  --tn-bg-tertiary: #414868;
  --tn-text-primary: #c0caf5;
  --tn-text-secondary: #9aa5ce;
  --tn-text-dim: #565f89;
  
  /* Accent Colors */
  --tn-blue: #7aa2f7;
  --tn-cyan: #7dcfff;
  --tn-purple: #bb9af7;
  --tn-pink: #ff8fa3;
  --tn-green: #9ece6a;
  --tn-orange: #ff9e64;
  --tn-red: #f7768e;
  
  /* Glass Morphism Alpha Variants */
  --glass-bg-primary: rgba(26, 27, 38, 0.7);
  --glass-bg-secondary: rgba(36, 40, 59, 0.6);
  --glass-bg-light: rgba(192, 202, 245, 0.05);
  --glass-bg-dark: rgba(26, 27, 38, 0.9);
  
  /* Glass Borders */
  --glass-border: rgba(192, 202, 245, 0.1);
  --glass-border-light: rgba(192, 202, 245, 0.2);
  --glass-border-active: rgba(122, 162, 247, 0.3);
  
  /* Shadows and Glows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4);
  
  --glow-blue: 0 0 20px rgba(122, 162, 247, 0.3);
  --glow-cyan: 0 0 20px rgba(125, 207, 255, 0.3);
  --glow-purple: 0 0 20px rgba(187, 154, 247, 0.3);
  --glow-pink: 0 0 20px rgba(255, 143, 163, 0.3);
  
  /* Blur Values */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;
  --blur-xl: 32px;
  
  /* Spacing System */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  
  /* Z-Index Layers */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-tooltip: 500;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-spring: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===================================
   Glass Morphism Components
   =================================== */

/* Base Glass Container */
.glass {
  background: var(--glass-bg-primary);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

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

/* Glass Variants */
.glass-light {
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
}

.glass-dark {
  background: var(--glass-bg-dark);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
}

.glass-clear {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(var(--blur-xl));
  -webkit-backdrop-filter: blur(var(--blur-xl));
}

/* Glass Card Component */
.glass-card {
  background: var(--glass-bg-primary);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent,
    var(--glass-border-light) 50%,
    transparent
  );
  opacity: 0.6;
}

.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl), var(--glow-blue);
  border-color: var(--glass-border-active);
}

/* Glass Button */
.glass-button {
  background: var(--glass-bg-secondary);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-xl);
  color: var(--tn-text-primary);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.glass-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, 
    rgba(122, 162, 247, 0.3) 0%,
    transparent 70%
  );
  transition: all var(--transition-slow);
  transform: translate(-50%, -50%);
}

.glass-button:hover {
  background: var(--glass-bg-light);
  border-color: var(--glass-border-active);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--glow-blue);
}

.glass-button:hover::before {
  width: 300px;
  height: 300px;
}

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

/* Glass Input */
.glass-input {
  background: var(--glass-bg-secondary);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  color: var(--tn-text-primary);
  width: 100%;
  transition: all var(--transition-base);
  font-family: inherit;
}

.glass-input:focus {
  outline: none;
  background: var(--glass-bg-primary);
  border-color: var(--glass-border-active);
  box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.1), var(--glow-blue);
}

.glass-input::placeholder {
  color: var(--tn-text-dim);
}

/* Glass Navigation */
.glass-nav {
  background: var(--glass-bg-dark);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  transition: all var(--transition-base);
}

.glass-nav.scrolled {
  background: rgba(26, 27, 38, 0.95);
  box-shadow: var(--shadow-lg);
}

/* Floating Elements */
.float-animation {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* Glow Effects */
.glow-blue { box-shadow: var(--glow-blue); }
.glow-cyan { box-shadow: var(--glow-cyan); }
.glow-purple { box-shadow: var(--glow-purple); }
.glow-pink { box-shadow: var(--glow-pink); }

/* Gradient Backgrounds */
.gradient-blue-purple {
  background: linear-gradient(135deg, var(--tn-blue) 0%, var(--tn-purple) 100%);
}

.gradient-cyan-blue {
  background: linear-gradient(135deg, var(--tn-cyan) 0%, var(--tn-blue) 100%);
}

.gradient-pink-purple {
  background: linear-gradient(135deg, var(--tn-pink) 0%, var(--tn-purple) 100%);
}

.gradient-mesh {
  background: 
    radial-gradient(at 20% 80%, rgba(122, 162, 247, 0.15) 0%, transparent 50%),
    radial-gradient(at 80% 20%, rgba(187, 154, 247, 0.15) 0%, transparent 50%),
    radial-gradient(at 40% 40%, rgba(125, 207, 255, 0.1) 0%, transparent 50%),
    var(--tn-bg-primary);
}

/* Utility Classes */
.blur-sm { backdrop-filter: blur(var(--blur-sm)); }
.blur-md { backdrop-filter: blur(var(--blur-md)); }
.blur-lg { backdrop-filter: blur(var(--blur-lg)); }
.blur-xl { backdrop-filter: blur(var(--blur-xl)); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Responsive Utilities */
@media (max-width: 768px) {
  .glass-card {
    padding: var(--space-lg);
  }
  
  .glass-button {
    padding: var(--space-sm) var(--space-lg);
  }
  
  /* Reduce blur on mobile for performance */
  .glass,
  .glass-card,
  .glass-nav {
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark Mode Support (Already dark by default) */
@media (prefers-color-scheme: light) {
  /* Optional: Add light mode overrides if needed */
}