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

@layer base {
  html {
    @apply antialiased;
  }

  body {
    @apply bg-gray-50 text-gray-900;
  }

  * {
    @apply border-gray-200;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }

  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500;
  }

  .btn-secondary {
    @apply bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus-visible:ring-secondary-500;
  }

  .btn-outline {
    @apply border border-gray-300 bg-white hover:bg-gray-50 focus-visible:ring-gray-500;
  }

  .btn-danger {
    @apply bg-danger-600 text-white hover:bg-danger-700 focus-visible:ring-danger-500;
  }

  .btn-sm {
    @apply h-8 px-3 text-sm;
  }

  .btn-md {
    @apply h-10 px-4;
  }

  .btn-lg {
    @apply h-12 px-6 text-lg;
  }

  .input {
    @apply block w-full rounded-md border border-gray-300 px-3 py-2 text-sm placeholder-gray-400 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500;
  }

  .input-error {
    @apply border-danger-500 focus:border-danger-500 focus:ring-danger-500;
  }

  .label {
    @apply block text-sm font-medium text-gray-700;
  }

  .card {
    @apply rounded-lg border bg-white shadow-sm;
  }

  .link {
    @apply text-primary-600 hover:text-primary-700 hover:underline;
  }
}

@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: theme('colors.gray.300') transparent;
  }

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

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

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: theme('colors.gray.300');
    border-radius: 3px;
  }
}
