/* Import admin.css into app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Import design tokens */
@import 'design-tokens.css';

/* Import admin styles */
@import 'admin.css';

@layer base {
  body {
    @apply bg-background text-text;
  }
  
  h1 {
    @apply text-3xl font-bold mb-6;
  }
  
  h2 {
    @apply text-2xl font-bold mb-4;
  }
  
  h3 {
    @apply text-xl font-bold mb-3;
  }
  
  a {
    @apply text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-800;
  }
  
  .btn-secondary {
    @apply bg-secondary-600 hover:bg-secondary-700 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-secondary-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-800;
  }
  
  .btn-danger {
    @apply bg-danger-600 hover:bg-danger-700 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-danger-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-800;
  }
  
  .btn-success {
    @apply bg-success-600 hover:bg-success-700 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-success-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-800;
  }
  
  .btn-warning {
    @apply bg-warning-500 hover:bg-warning-600 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-warning-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-800;
  }
  
  .btn-info {
    @apply bg-info-600 hover:bg-info-700 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-info-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-800;
  }
  
  .btn-outline-primary {
    @apply border border-primary-600 text-primary-600 hover:bg-primary-50 hover:text-primary-700 dark:text-primary-400 dark:border-primary-400 dark:hover:bg-primary-900 dark:hover:text-primary-300 font-medium py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-800;
  }
  
  .card {
    @apply bg-background-elevated dark:bg-background-elevated shadow-md rounded-lg border border-border dark:border-border;
  }
  
  .form-input {
    @apply mt-1 block w-full rounded-md border-border shadow-sm focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50 dark:bg-neutral-800 dark:text-neutral-100;
  }
  
  .form-label {
    @apply block text-sm font-medium text-neutral-700 dark:text-neutral-300;
  }
  
  .action-btn-view {
    @apply inline-flex items-center px-3 py-1.5 text-xs bg-indigo-600 text-white font-medium rounded hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200 ease-in-out;
  }
  
  .action-btn-edit {
    @apply inline-flex items-center px-3 py-1.5 text-xs bg-yellow-600 text-white font-medium rounded hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 transition-colors duration-200 ease-in-out;
  }
  
  .action-btn-delete {
    @apply inline-flex items-center px-3 py-1.5 text-xs bg-red-600 text-white font-medium rounded hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200 ease-in-out;
  }
}

@layer components {
  .prose-custom h2 {
    @apply text-2xl font-bold mb-4 mt-6;
  }
  .prose-custom h3 {
    @apply text-xl font-bold mb-3 mt-5;
  }
  .prose-custom p {
    @apply mb-4 leading-relaxed;
  }
  .prose-custom ul {
    @apply list-disc pl-5 mb-4;
  }
  .prose-custom ul li {
    @apply mb-1;
  }
  .prose-custom ol {
    @apply list-decimal pl-5 mb-4;
  }
  .prose-custom ol li {
    @apply mb-1;
  }
  .prose-custom a {
    @apply text-primary-600 hover:underline dark:text-primary-400;
  }
  .prose-custom hr {
    @apply my-8;
  }
}