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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.2s;
}

.btn-primary {
  background-color: #4F46E5;
  color: white;
}

.btn-primary:hover {
  background-color: #4338CA;
}

.btn-secondary {
  background-color: white;
  color: #4B5563;
  border: 1px solid #E5E7EB;
}

.btn-secondary:hover {
  background-color: #F9FAFB;
}

.btn-success {
  background-color: #059669;
  color: white;
}

.btn-success:hover {
  background-color: #047857;
}

.card {
  background-color: white;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  border: 2px solid transparent;
  transition: all 0.2s;
}

.input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #E5E7EB;
  border-radius: 0.375rem;
  background-color: white;
}

.input:focus {
  outline: none;
  border-color: #4F46E5;
  ring: 2px;
  ring-color: #E0E7FF;
}

.checkbox-card {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  background-color: white;
  border: 1px solid #E5E7EB;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.checkbox-card:hover {
  background-color: #F9FAFB;
}