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

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 220 20% 4%;
    --foreground: 0 0% 98%;
    --card: 220 18% 8%;
    --card-foreground: 0 0% 98%;
    --popover: 220 18% 8%;
    --popover-foreground: 0 0% 98%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 15% 14%;
    --secondary-foreground: 0 0% 98%;
    --muted: 220 15% 18%;
    --muted-foreground: 220 10% 60%;
    --accent: 217 91% 60%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 220 15% 18%;
    --input: 220 15% 18%;
    --ring: 217 91% 60%;
    --radius: 0.75rem;
    
    --tech-blue: 217 91% 60%;
    --tech-purple: 262 83% 58%;
    --tech-cyan: 189 94% 43%;
    --tech-glow: 217 91% 60%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400;
  }
  
  .glow-blue {
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.3);
  }
  
  .glow-purple {
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.3);
  }
  
  .glass {
    @apply bg-white/5 backdrop-blur-xl border border-white/10;
  }
  
  .glass-dark {
    @apply bg-black/20 backdrop-blur-xl border border-white/5;
  }
}

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

::-webkit-scrollbar-track {
  background: hsl(220 20% 6%);
}

::-webkit-scrollbar-thumb {
  background: hsl(220 15% 25%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(217 91% 60%);
}

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

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.4); }
  50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.8); }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

.animate-pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

.animate-slide-up {
  animation: slide-up 0.6s ease-out forwards;
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out forwards;
}

.animate-scale-in {
  animation: scale-in 0.4s ease-out forwards;
}