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

:root {
  --background: #ffffff;
  --foreground: #171717;
  --gradient-light: linear-gradient(135deg, #ffffff 0%, #ffcad4 100%);
  --gradient-dark: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
}

.dark {
  --background: #0f0f23;
  --foreground: #e5e7eb;
}

body {
  color: var(--foreground);
  background: var(--gradient-light);
  min-height: 100vh;
  font-family: 'Inter', Arial, sans-serif;
  transition: background 0.3s ease, color 0.3s ease;
}

body.dark {
  background: var(--gradient-dark);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .blur-3xl, .backdrop-blur {
    backdrop-filter: none !important;
    filter: none !important;
  }
}

.btn {
  @apply inline-flex items-center justify-center font-semibold rounded-full px-6 py-3 transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-lg hover:shadow-xl;
}

.btn-discord {
  @apply bg-[#5865F2] hover:bg-[#4752c4] text-white hover:-translate-y-0.5 focus:ring-[#5865F2];
}

.btn-glass {
  @apply bg-white/80 dark:bg-gray-800/80 backdrop-blur hover:bg-white dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 hover:-translate-y-0.5 focus:ring-gray-200 dark:focus:ring-gray-600;
}

.btn-accent {
  @apply bg-pink-500 hover:bg-pink-600 text-white hover:-translate-y-0.5 focus:ring-pink-500;
}

.feature-card {
  @apply relative rounded-2xl p-6 bg-white/80 dark:bg-gray-800/60 backdrop-blur ring-1 ring-gray-900/10 dark:ring-white/10 shadow-sm hover:shadow-xl transition-all hover:-translate-y-1 hover:ring-pink-300/30;
}

.badge {
  @apply px-3 py-1 rounded-full bg-white/70 dark:bg-white/5 text-gray-700 dark:text-gray-300 ring-1 ring-gray-900/5 dark:ring-white/10 text-xs;
}

.input {
  @apply flex h-10 w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50;
}

.command-card {
  @apply bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-lg p-6 shadow-lg;
}

.stats-card {
  @apply bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-lg p-6 shadow-lg border border-white/20 dark:border-gray-700/20;
}

.status-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

.pixel-art {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}