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

@layer base {
  * {
    box-sizing: border-box;
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-slate-950 text-slate-100 font-sans;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-slate-700 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-600;
  }
}

@layer components {
  .badge {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
  }

  .card {
    @apply bg-slate-900 border border-slate-800 rounded-xl;
  }

  .btn-primary {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-lg
           bg-brand-600 hover:bg-brand-500
           text-white text-sm font-medium
           transition-colors duration-150
           disabled:opacity-50 disabled:cursor-not-allowed;
  }
}