/* Styles pour les modals */
.modal-enter {
  animation: modalEnter 0.3s ease-out forwards;
}

.modal-leave {
  animation: modalLeave 0.3s ease-in forwards;
}

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modalLeave {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Styles pour les cartes de plants */
.plant-card {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.plant-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Styles pour les boutons */
.btn {
  @apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
}

.btn-primary {
  @apply bg-primary text-white hover:bg-green-600 active:scale-95;
}

.btn-secondary {
  @apply bg-neutral-100 text-dark hover:bg-neutral-200 active:scale-95;
}

/* Styles pour les inputs */
.input {
  @apply w-full px-4 py-2 rounded-lg border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all duration-200;
}

/* Styles pour les badges */
.badge {
  @apply px-2 py-1 rounded-full text-xs font-medium;
}

.badge-success {
  @apply bg-green-100 text-green-700;
}

.badge-warning {
  @apply bg-yellow-100 text-yellow-700;
}

.badge-info {
  @apply bg-blue-100 text-blue-700;
}

/* Styles pour le thème sombre */
@media (prefers-color-scheme: dark) {
  body {
    @apply bg-dark text-white;
  }

  .plant-card {
    @apply bg-neutral-800;
  }

  .input {
    @apply bg-neutral-800 border-neutral-700 text-white;
  }

  .btn-secondary {
    @apply bg-neutral-800 text-white hover:bg-neutral-700;
  }
}