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

@layer base {
    html {
      scroll-behavior: smooth;
    }
    
    body {
      @apply transition-colors duration-200;
    }
  }
  
  @layer components {
    /* Custom scrollbar for webkit browsers */
    ::-webkit-scrollbar {
      width: 8px;
    }
    
    ::-webkit-scrollbar-track {
      @apply bg-zinc-100 dark:bg-zinc-800;
    }
    
    ::-webkit-scrollbar-thumb {
      @apply bg-zinc-300 dark:bg-zinc-600 rounded-full;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      @apply bg-zinc-400 dark:bg-zinc-500;
    }
    
    /* Focus styles for better accessibility */
    .focus-ring {
      @apply focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:focus:ring-offset-zinc-900;
    }
    
    /* Card styles */
    .card {
      @apply bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200;
    }
    
    /* Button styles */
    /* Removed custom .btn-primary to avoid DaisyUI conflict */
    
    /* Input styles */
    .input-field {
      @apply w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-500 dark:placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors duration-200;
    }
  }
  
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  .animate-float {
    animation: float 4s ease-in-out infinite;
  }