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

@layer components {
  .btn-primary {
    @apply bg-primary-500 text-white px-4 py-2 rounded-lg font-medium transition-all duration-200 hover:bg-primary-600 hover:shadow-lg active:scale-95;
  }
  .btn-secondary {
    @apply bg-secondary-500 text-white px-4 py-2 rounded-lg font-medium transition-all duration-200 hover:bg-secondary-600 hover:shadow-lg active:scale-95;
  }
  .card {
    @apply bg-white rounded-xl border border-border shadow-sm transition-all duration-200 hover:shadow-md;
  }
  .status-dot {
    @apply w-2.5 h-2.5 rounded-full;
  }
  .status-dot-success {
    @apply status-dot bg-secondary-500;
  }
  .status-dot-warning {
    @apply status-dot bg-accent-500;
  }
  .status-dot-error {
    @apply status-dot bg-red-500;
  }
  .status-dot-loading {
    @apply status-dot bg-primary-400 animate-pulse;
  }
}