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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300;
  }
}

@layer components {
  .canvas-container {
    @apply relative overflow-hidden bg-white dark:bg-gray-800 rounded-lg shadow-lg;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
  }

  .pixel {
    @apply absolute cursor-crosshair;
    image-rendering: pixelated;
  }

  .color-picker-button {
    @apply w-8 h-8 rounded-full border-2 border-gray-300 dark:border-gray-600 cursor-pointer transition-all duration-200 hover:scale-110;
  }

  .color-picker-button.selected {
    @apply border-4 border-blue-500 scale-110 shadow-lg;
  }

  .tool-button {
    @apply p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200;
  }

  .tool-button.active {
    @apply bg-blue-500 text-white hover:bg-blue-600;
  }
}

@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}