@import "tailwindcss";

@layer base {
  html {
    font-size: 17px;
  }
}

@theme {
  --color-primary:     #3b82f6;
  --color-primary-700: #1d4ed8;
  --color-primary-600: #2563eb;
  --color-primary-500: #3b82f6;
  --color-primary-400: #60a5fa;
  --color-primary-100: #dbeafe;
  --color-primary-50:  #eff6ff;
  --color-secondary:     #0f172a;
  --color-secondary-800: #1e293b;
  --color-secondary-700: #334155;
  --color-secondary-600: #475569;
  --color-secondary-100: #f1f5f9;
  --color-secondary-50:  #f8fafc;
  --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}

@layer components {
  .btn {
    @apply bg-primary hover:bg-primary-700 text-white font-semibold text-sm py-3 px-6 rounded-lg cursor-pointer transition-all shadow-sm hover:shadow-md;
  }

  .btn-secondary {
    @apply bg-secondary hover:bg-secondary-800 text-white font-semibold text-sm py-3 px-6 rounded-lg cursor-pointer transition-all shadow-sm hover:shadow-md;
  }

  .btn-outline {
    @apply border border-gray-200 hover:border-gray-300 hover:bg-gray-50 text-gray-700 font-medium text-sm py-2.5 px-5 rounded-lg cursor-pointer transition-all;
  }

  .btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-semibold text-sm py-3 px-6 rounded-lg cursor-pointer transition-all shadow-sm hover:shadow-md;
  }

  .btn-ghost {
    @apply text-gray-500 hover:text-gray-900 hover:bg-gray-100 font-medium text-sm py-2.5 px-4 rounded-lg cursor-pointer transition-all;
  }

  .form-input {
    @apply block w-full px-4 py-3 text-base border border-gray-300 rounded-xl outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all placeholder:text-gray-400;
  }

  .card {
    @apply bg-white rounded-xl border border-gray-100 shadow-xs;
  }

  .modal-overlay {
    @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50;
  }

  .modal-content {
    @apply bg-white rounded-xl p-6 max-w-md w-full mx-4 relative shadow-lg;
  }

  .modal-content-lg {
    @apply bg-white rounded-xl p-6 max-w-xl w-full mx-4 relative shadow-lg;
  }

  .modal-close {
    @apply absolute top-4 right-4 text-gray-400 hover:text-gray-600 cursor-pointer;
  }
}