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

@layer base {
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans;
    @apply transition-colors duration-200;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    @apply w-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-600 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400 dark:bg-gray-500;
  }

  /* Focus styles */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
  }
}

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

  .btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-medium px-4 py-2 rounded-lg;
    @apply transition-all duration-200 focus-ring disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .input-field {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg;
    @apply bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100;
    @apply focus-ring transition-colors duration-200;
  }

  .card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700;
    @apply transition-colors duration-200;
  }

  .error-text {
    @apply text-red-600 dark:text-red-400 text-sm mt-1 flex items-center gap-1;
  }

  .warning-text {
    @apply text-yellow-600 dark:text-yellow-400 text-sm mt-1 flex items-center gap-1;
  }

  .success-text {
    @apply text-green-600 dark:text-green-400 text-sm mt-1 flex items-center gap-1;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}