@import "tailwindcss";

@theme {
  --color-primary: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-600: #2563eb;
  --color-primary-500: #3b82f6;
  --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: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@layer components {
  .btn {
    @apply bg-primary hover:bg-primary-700 text-white font-medium text-sm py-2.5 px-5 rounded-full cursor-pointer transition-colors;
  }

  .btn-secondary {
    @apply bg-secondary hover:bg-secondary-800 text-white font-medium text-sm py-2.5 px-5 rounded-full cursor-pointer transition-colors;
  }

  .btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-medium text-sm py-2.5 px-5 rounded-full cursor-pointer transition-colors;
  }

  .form-input {
    @apply block w-full px-3 py-2 border border-gray-200 rounded-md outline-none focus:ring-1 focus:ring-primary focus:border-primary;
  }
}