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

@layer base {
  * {
    @apply border-dark-700;
  }
  body {
    @apply bg-dark-950 text-dark-100 antialiased;
  }
}

@layer components {
  .glass-panel {
    @apply bg-dark-900/50 backdrop-blur-xl border border-dark-700/50 rounded-2xl;
  }
  .glass-panel-light {
    @apply bg-dark-800/30 backdrop-blur-sm border border-dark-700/30 rounded-xl;
  }
  .btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium px-4 py-2 rounded-xl transition-all duration-200 hover:shadow-lg hover:shadow-primary-600/20;
  }
  .btn-ghost {
    @apply hover:bg-dark-800 text-dark-300 hover:text-dark-100 font-medium px-4 py-2 rounded-xl transition-all duration-200;
  }
  .input-field {
    @apply bg-dark-800/50 border border-dark-700/50 rounded-xl px-4 py-3 text-dark-100 placeholder-dark-500 focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500/50 transition-all duration-200;
  }
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}
