/* CSS Variables & Design System Foundations */

:root {
  /* Color System (HSL Tailored) */
  --bg-primary: #0a0a0c;
  --bg-secondary: #121216;
  --bg-tertiary: #1a1a22;
  
  /* Accent Colors */
  --accent-hue: 180; /* Teal */
  --accent-saturation: 85%;
  --accent-lightness: 50%;
  --accent: hsl(var(--accent-hue), var(--accent-saturation), var(--accent-lightness));
  --accent-glow: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness), 0.15);
  --accent-hover: hsl(var(--accent-hue), var(--accent-saturation), 42%);
  
  --accent-alt-hue: 260; /* Violet */
  --accent-alt: hsl(var(--accent-alt-hue), 85%, 65%);
  --accent-alt-glow: hsla(var(--accent-alt-hue), 85%, 65%, 0.15);

  /* Status Colors */
  --success: #10b981; /* Emerald */
  --success-glow: rgba(16, 185, 129, 0.15);
  --warning: #f59e0b; /* Amber */
  --warning-glow: rgba(245, 158, 11, 0.15);
  --error: #ef4444; /* Red */
  --error-glow: rgba(239, 68, 68, 0.15);

  /* Text Colors */
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;

  /* Glassmorphism Styles */
  --glass-bg: rgba(18, 18, 22, 0.6);
  --glass-bg-hover: rgba(26, 26, 34, 0.75);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-border-focus: rgba(255, 255, 255, 0.15);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  --glass-blur: blur(16px);
  
  /* Layout Metrics */
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --border-radius-full: 9999px;
  --container-width: 1400px;
  
  /* Interactive Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Reset & Key Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 12px var(--accent-glow); }
  50% { box-shadow: 0 0 24px hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness), 0.3); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Glassmorphism Global Utilities */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass-interactive {
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.glass-interactive:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-focus);
}

.shimmer-bg {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 37%, var(--bg-secondary) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}