@import "tailwindcss";

@layer utilities {
  .backdrop-blur-sm {
    backdrop-filter: blur(4px);
  }

  .backdrop-blur-md {
    backdrop-filter: blur(8px);
  }
}
@layer base {
  :root {
    --background: #000000;
    --foreground: #ffffff;
  }

  body {
    @apply bg-black text-white antialiased;
  }

  input[type="checkbox"] {
    @apply appearance-none w-4 h-4 rounded border-2 border-gray-700 bg-gray-900 
           checked:bg-blue-600 checked:border-blue-600 
           hover:border-blue-500 cursor-pointer transition-all duration-200
           focus:ring-2 focus:ring-blue-500 focus:ring-offset-0 focus:ring-offset-black;
  }

  select {
    @apply appearance-none bg-gray-900 border-2 border-gray-700 
           rounded-lg px-4 py-2.5 text-gray-200
           focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
           hover:border-gray-600 cursor-pointer transition-all duration-200;
  }
}

@layer components {
  .input-field {
    @apply w-full px-4 py-3 bg-gray-900 border-2 border-gray-700 
           rounded-lg text-white placeholder-gray-500
           focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
           hover:border-gray-600 transition-all duration-200;
  }

  .category-button {
    @apply flex items-center justify-between w-full p-3.5 
           bg-gray-900 border-2 border-gray-800 rounded-lg
           hover:bg-gray-800 hover:border-gray-700
           transition-all duration-200;
  }

  .extension-grid {
    @apply grid grid-cols-2 md:grid-cols-3 gap-3 p-4 
           bg-gray-800/50 rounded-lg mt-2 
           border-2 border-gray-700;
  }
}
