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

* {
  scrollbar-width: thin;
  scrollbar-color: #3b82f6 #151d35;
}

body {
  min-height: 100vh;
}

@layer components {
  .card {
    @apply bg-navy-800/80 border border-navy-700/50 rounded-2xl p-5 backdrop-blur-sm;
  }
  .btn-primary {
    @apply bg-accent hover:bg-accent-light text-white font-medium py-3 px-6 rounded-xl transition-colors w-full disabled:opacity-50;
  }
  .btn-outline {
    @apply border border-navy-700 text-gray-300 hover:border-accent hover:text-white py-2 px-4 rounded-xl transition-colors;
  }
  .input-field {
    @apply w-full bg-navy-900 border border-navy-700 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-accent transition-colors;
  }
  .badge-buy {
    @apply bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 px-3 py-1 rounded-lg text-sm font-bold;
  }
  .badge-sell {
    @apply bg-red-500/20 text-red-400 border border-red-500/30 px-3 py-1 rounded-lg text-sm font-bold;
  }
  .nav-item {
    @apply flex items-center gap-3 px-4 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-navy-700/50 transition-all;
  }
  .nav-item-active {
    @apply flex items-center gap-3 px-4 py-3 rounded-xl bg-accent text-white font-medium;
  }
}
