@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=JetBrains+Mono&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  
  --color-midnight: #0f0a1e;
  --color-midnight-light: #1a1430;
  --color-electric: #9d4edd;
  --color-neon: #00f5d4;
  --color-text-main: #ffffff;
  --color-text-dim: #b8b8b8;
}

@layer base {
  body {
    @apply bg-midnight text-text-main font-sans selection:bg-neon selection:text-midnight;
    scroll-behavior: smooth;
  }
}

@layer components {
  .nav-link {
    @apply text-text-dim hover:text-neon transition-colors duration-300 font-medium text-sm uppercase tracking-widest;
  }
  
  .btn-neon {
    @apply bg-neon text-midnight px-6 py-2 rounded-full font-bold hover:shadow-[0_0_20px_rgba(0,245,212,0.5)] transition-all duration-300 flex items-center gap-2;
  }

  .btn-outline {
    @apply border border-electric text-electric px-6 py-2 rounded-full font-bold hover:bg-electric hover:text-white transition-all duration-300 flex items-center gap-2;
  }

  .glass-card {
    @apply bg-midnight-light/50 backdrop-blur-md border border-white/5 rounded-2xl overflow-hidden hover:border-neon/30 transition-all duration-500;
  }

  .filter-btn {
    @apply px-4 py-1.5 rounded-full border border-white/10 text-sm text-text-dim hover:border-neon hover:text-neon transition-all duration-300;
  }

  .filter-btn.active {
    @apply bg-neon text-midnight border-neon font-bold;
  }

  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .reveal.active {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0f0a1e;
}
::-webkit-scrollbar-thumb {
  background: #1a1430;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #9d4edd;
}

.neon-text-glow {
  text-shadow: 0 0 10px rgba(0, 245, 212, 0.5);
}

.purple-gradient {
  background: linear-gradient(135deg, #0f0a1e 0%, #1a1430 100%);
}

.neon-border-glow {
  box-shadow: 0 0 15px rgba(0, 245, 212, 0.2);
}