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

@layer base {
  :root {
    --color-brand: 244 63 94;
    --color-brand-hover: 225 29 72;
    --color-admin: 99 102 241;
    --color-success: 34 197 94;
    --color-warning: 245 158 11;
    --color-danger: 239 68 68;
  }
}

@layer components {
  /* Button styles */
  .btn {
    @apply px-5 py-2.5 rounded-[10px] font-medium text-sm transition-colors cursor-pointer;
  }
  
  .btn-primary {
    @apply bg-brand text-white hover:bg-brand-hover;
  }
  
  .btn-secondary {
    @apply bg-admin text-white hover:bg-indigo-700;
  }
  
  .btn-success {
    @apply bg-success text-white hover:bg-green-700;
  }
  
  .btn-danger {
    @apply bg-danger text-white hover:bg-red-700;
  }
  
  .btn-outline {
    @apply border border-[#E5E7EB] bg-white text-ink hover:bg-[#F9FAFB];
  }
  
  /* Card styles */
  .card {
    @apply bg-white border border-[#E5E7EB] rounded-[14px] p-5;
  }
  
  .card-hover {
    @apply hover:shadow-md hover:border-brand/20 transition-all;
  }
  
  /* Input styles */
  .input {
    @apply w-full px-3.5 py-2.5 text-sm border border-[#E5E7EB] rounded-[10px] focus:outline-none focus:border-brand focus:ring-[3px] focus:ring-brand/10;
  }
  
  .input-error {
    @apply border-danger focus:border-danger focus:ring-danger/10;
  }
  
  /* Badge styles */
  .badge {
    @apply text-[10px] font-bold uppercase tracking-[0.5px] px-2.5 py-1 rounded;
  }
  
  .badge-success {
    @apply bg-success-bg text-success-text;
  }
  
  .badge-warning {
    @apply bg-warning-bg text-warning-text;
  }
  
  .badge-danger {
    @apply bg-danger-bg text-danger-text;
  }
  
  .badge-info {
    @apply bg-info-bg text-info-text;
  }
  
  /* Table styles */
  .table th {
    @apply text-left py-3 px-2 text-[11.5px] font-semibold text-ink-soft uppercase tracking-[0.5px];
  }
  
  .table td {
    @apply py-3 px-2 text-[13px];
  }
  
  .table tr {
    @apply border-b border-[#F1F5F9] last:border-b-0;
  }
  
  /* Modal styles */
  .modal-backdrop {
    @apply fixed inset-0 bg-black/50 z-40;
  }
  
  .modal {
    @apply fixed inset-0 z-50 flex items-center justify-center p-4;
  }
  
  .modal-content {
    @apply bg-white rounded-[14px] max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-xl;
  }
}

@layer utilities {
  .text-brand {
    color: rgb(var(--color-brand));
  }
  
  .bg-brand {
    background-color: rgb(var(--color-brand));
  }
  
  .hover\:bg-brand-hover:hover {
    background-color: rgb(var(--color-brand-hover));
  }
}