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

@layer base {
  body {
    @apply bg-dark-950 text-dark-100 font-sans;
  }
}

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700
           transition-colors duration-200 font-medium text-sm
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply px-4 py-2 bg-dark-700 text-dark-200 rounded-lg hover:bg-dark-600
           transition-colors duration-200 font-medium text-sm border border-dark-600;
  }

  .btn-danger {
    @apply px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700
           transition-colors duration-200 font-medium text-sm;
  }

  .input-field {
    @apply w-full px-3 py-2 bg-dark-800 border border-dark-600 rounded-lg
           text-dark-100 placeholder-dark-400
           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
           transition-all duration-200;
  }

  .card {
    @apply bg-dark-800 border border-dark-700 rounded-xl p-4;
  }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  @apply bg-dark-600 rounded-full;
}
::-webkit-scrollbar-thumb:hover {
  @apply bg-dark-500;
}

/* Code highlighting */
.hljs {
  @apply bg-dark-900 rounded-lg p-4 text-sm overflow-x-auto;
}
