@import "tailwindcss";

/* Import pixel font for retro GBC aesthetic */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Custom theme */
@theme {
  /* Pokemon type colors */
  --color-type-grass: #78C850;
  --color-type-fire: #F08030;
  --color-type-water: #6890F0;
  --color-type-lightning: #F8D030;
  --color-type-psychic: #F85888;
  --color-type-fighting: #C03028;
  --color-type-darkness: #705848;
  --color-type-metal: #B8B8D0;
  --color-type-fairy: #EE99AC;
  --color-type-dragon: #7038F8;
  --color-type-colorless: #A8A878;

  /* UI colors */
  --color-primary: #3B82F6;
  --color-primary-dark: #2563EB;
  --color-primary-light: #60A5FA;
  --color-secondary: #6366F1;
  --color-secondary-dark: #4F46E5;
  --color-secondary-light: #818CF8;
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* Dark theme surfaces */
  --color-surface: #374151;
  --color-surface-dark: #1F2937;
  --color-surface-light: #4B5563;

  /* Font family */
  --font-pixel: "Press Start 2P", cursive;
}

@layer base {
  html {
    @apply bg-gray-900 text-gray-100;
  }

  body {
    @apply min-h-screen;
  }
}

@layer components {
  /* Card styling */
  .card {
    @apply bg-surface rounded-lg shadow-lg overflow-hidden;
  }

  /* Button variants */
  .btn {
    @apply px-4 py-2 rounded font-medium transition-colors duration-200;
  }

  .btn-primary {
    @apply bg-primary hover:bg-primary-dark text-white;
  }

  .btn-secondary {
    @apply bg-secondary hover:bg-secondary-dark text-white;
  }

  /* Type badges */
  .type-badge {
    @apply px-2 py-1 rounded text-xs font-bold uppercase;
  }
}
