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

@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
  }
  body {
    background-color: #ffffff;
  }
}

@layer components {
  .btn-primary {
    @apply bg-gradient-to-r from-primary-500 to-success-500 text-white px-6 py-3 rounded-lg font-semibold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300;
  }
  
  .btn-secondary {
    @apply bg-white text-primary-600 border-2 border-primary-500 px-6 py-3 rounded-lg font-semibold hover:bg-primary-50 transition-all duration-300;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:scale-105;
  }
  
  .card-primary {
    @apply bg-primary-50 border-l-4 border-primary-500;
  }
  
  .card-success {
    @apply bg-success-50 border-l-4 border-success-500;
  }
  
  .card-warning {
    @apply bg-warning-50 border-l-4 border-warning-500;
  }
  
  .card-info {
    @apply bg-info-50 border-l-4 border-info-500;
  }
  
  .card-secondary {
    @apply bg-secondary-50 border-l-4 border-secondary-500;
  }
  
  .card-danger {
    @apply bg-danger-50 border-l-4 border-danger-500;
  }
}

.progress-bar {
  background: linear-gradient(45deg, #007aff, #00ff00, #0ea5e9, #ed8936);
  background-size: 400% 400%;
  animation: gradient 2s ease infinite;
}

.loading-dots {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.loading-dots div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #007aff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.loading-dots div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.loading-dots div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.loading-dots div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.loading-dots div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes lds-ellipsis3 {
  0% { transform: scale(1); }
  100% { transform: scale(0); }
}

@keyframes lds-ellipsis2 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(24px, 0); }
}