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

.custom-button {
  background-color: #2563eb;
  color: #fff;
  padding: 0.75em 2em;
  border: none;
  border-radius: 0.5em;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.custom-button:hover,
.custom-button:focus {
  background-color: #1d4ed8;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.16);
  outline: none;
}

@layer utilities {
  @keyframes slide-in {
    from {
      opacity: 0;
      transform: translateX(100%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-slide-in {
    animation: slide-in 0.4s ease-out;
  }
}