@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

:root {
  --background: #ffffff;
  --foreground: #1a4731;
  --primary: #4ade80;
  --primary-dark: #22c55e;
  --secondary: #86efac;
  --accent: #bbf7d0;
  --card-bg: #ffffff;
  --card-border: #d1fae5;
}

.dark {
  --background: #0f172a;
  --foreground: #f0fdf4;
  --card-bg: #1e293b;
  --card-border: #334155;
  --primary: #4ade80;
  --primary-dark: #86efac;
  --secondary: #166534;
  --accent: #052e16;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-dark: var(--primary-dark);
  --color-secondary: var(--secondary);
  --color-accent: var(--accent);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Pokemon HOME-inspired Design System */
.pkm-gradient {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #86efac 100%);
}

.pkm-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  @apply rounded-xl shadow-lg hover:shadow-xl transition-all duration-300;
}

.pkm-button-primary {
  @apply bg-gradient-to-r from-green-400 to-green-500 text-white px-6 py-3 rounded-lg font-semibold hover:from-green-500 hover:to-green-600 transition-all duration-200 shadow-md hover:shadow-lg;
}

.pkm-button-secondary {
  @apply bg-white text-green-600 border-2 border-green-400 px-6 py-3 rounded-lg font-semibold hover:bg-green-50 transition-all duration-200;
}

.pkm-input {
  @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-400 focus:ring-2 focus:ring-green-200 transition-all duration-200;
}

.pkm-hero-pattern {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(74, 222, 128, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(34, 197, 94, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(134, 239, 172, 0.1) 0%, transparent 50%);
}

/* Responsive Design Enhancements */
@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  h1 {
    font-size: 2rem !important;
    line-height: 1.2;
  }
  
  h2 {
    font-size: 1.5rem !important;
    line-height: 1.3;
  }
}

@media (min-width: 768px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Smooth transitions for responsive elements */
.transition-all {
  transition: all 0.3s ease;
}

/* Mobile-first responsive grid */
.responsive-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

@media (min-width: 768px) {
  .responsive-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .responsive-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
  }
}

/* PKMFans-style animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(74, 222, 128, 0.3); }
  50% { box-shadow: 0 0 40px rgba(74, 222, 128, 0.6); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

/* Sparkle animations for shiny Pokemon */
@keyframes sparkle-1 {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes sparkle-2 {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
}

.animation-duration-2000 {
  animation-duration: 2s;
}

.animation-duration-2500 {
  animation-duration: 2.5s;
}

.animation-duration-3000 {
  animation-duration: 3s;
}

.animation-duration-3500 {
  animation-duration: 3.5s;
}

.animation-delay-500 {
  animation-delay: 0.5s;
}

.animation-delay-1000 {
  animation-delay: 1s;
}

.animation-delay-1500 {
  animation-delay: 1.5s;
}

.animation-delay-2000 {
  animation-delay: 2s;
}