@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ============================================
   COSMIC THEME VARIABLES
   Replace with your 'undefined' color values
   ============================================ */
:root {
  --color-primary: #8B5CF6;   /* undefined-500 replacement */
  --color-secondary: #06B6D4; /* undefined-400 replacement */
  --color-dark: #0B0D17;
  --color-darker: #070815;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-darker);
}

/* Typography */
h1, h2, h3 {
  font-family: 'Space Grotesk', sans-serif;
}

/* ============================================
   GLASSMORPHISM & EFFECTS
   ============================================ */
.cosmic-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.05),
    0 0 60px -15px rgba(139, 92, 246, 0.1);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
  0%, 100% { 
    opacity: 0.2; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.4; 
    transform: scale(1.05);
  }
}

@keyframes orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-orbit {
  animation: orbit 20s linear infinite;
}

.orbit-particle {
  animation: orbit 20s linear infinite;
  transform-origin: 50% 140px;
}

/* Input Autofill Styling for Dark Theme */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #0B0D17 inset !important;
  -webkit-text-fill-color: white !important;
  caret-color: white;
  transition: background-color 5000s ease-in-out 0s;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #070815;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #8B5CF6, #06B6D4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #7C3AED, #0891B2);
}

/* Perspective for 3D effects */
.perspective-1000 {
  perspective: 1000px;
}

/* Focus Visible Styles */
button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Selection Color */
::selection {
  background: rgba(139, 92, 246, 0.3);
  color: white;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
  .cosmic-card {
    margin: 1rem;
    padding: 1.5rem;
  }
}