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

:root {
  --color-bg-primary: #0a0a0f;
  --color-bg-secondary: #1a1a2e;
  --color-bg-tertiary: #2d2d44;
  --color-border: #404060;
  --color-text-primary: #ffffff;
  --color-text-secondary: #a0a0b0;
  --color-accent-primary: #a855f7;
  --color-accent-secondary: #ec4899;
}

* {
  @apply selection:bg-purple-600 selection:text-white;
}

html, body {
  @apply bg-gray-900 text-white;
}

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white font-semibold rounded-lg transition;
  }

  .input-field {
    @apply px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500 transition;
  }

  .card {
    @apply bg-gray-800 border border-gray-700 rounded-lg p-6;
  }

  .card-hover {
    @apply card hover:border-purple-500 transition;
  }
}

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

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

/* Loading Spinner */
.spinner {
  border: 3px solid rgba(168, 85, 247, 0.1);
  border-top: 3px solid #a855f7;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5a6b7a;
}
