@import "tailwindcss";

@theme {
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
  
  --color-dark-900: #050505;
  --color-dark-800: #0a0a0a;
  --color-dark-700: #121212;
  
  --color-brand-blue: #0066FF;
  --color-brand-cyan: #00E0FF;
  --color-brand-orange: #FF5500;
}

@layer base {
  body {
    @apply bg-dark-900 text-[#e5e5e5] antialiased;
  }
}

@layer components {
  .glass {
    @apply bg-white/5 backdrop-blur-xl border border-white/10;
  }
  
  .text-gradient-brand {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-brand-cyan to-brand-blue;
  }
}

/* Custom animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.3s ease-out forwards;
}

/* Scrollbar styling */
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}