@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --blur-xl: 24px;
  --blur-2xl: 40px;
}

@layer base {
  body {
    @apply bg-[#0a0a0a] text-zinc-100 antialiased;
  }
}

@layer utilities {
  .glass {
    backdrop-filter: blur(24px);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .glass-dark {
    backdrop-filter: blur(40px);
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }

  .sidebar-item:hover {
    @apply bg-emerald-500/10 text-emerald-400;
  }

  .sidebar-item.active {
    @apply bg-emerald-500/15 text-emerald-400 border-r-2 border-emerald-500;
  }

  .btn-primary {
    @apply bg-emerald-500 hover:bg-emerald-400 text-white font-bold py-3 px-6 rounded-xl shadow-lg shadow-emerald-500/20 transition-all active:scale-95;
  }
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

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

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