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

@import "tailwindcss";

@layer components {
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    @apply cursor-pointer;
  }

  .documentation-content {
    @apply text-gray-800;
  }
  .documentation-content h1 {
    @apply text-2xl font-semibold text-gray-900 mt-8 mb-4;
  }
  .documentation-content h1:first-child {
    @apply mt-0;
  }
  .documentation-content h2 {
    @apply text-xl font-semibold text-gray-900 mt-8 mb-3 border-b border-gray-200 pb-1;
  }
  .documentation-content h3 {
    @apply text-lg font-semibold text-gray-900 mt-6 mb-2;
  }
  .documentation-content p {
    @apply my-3 leading-relaxed;
  }
  .documentation-content ul {
    @apply list-disc pl-6 my-3 space-y-1;
  }
  .documentation-content ol {
    @apply list-decimal pl-6 my-3 space-y-1;
  }
  .documentation-content li {
    @apply leading-relaxed;
  }
  .documentation-content a {
    @apply text-blue-600 underline hover:text-blue-800;
  }
  .documentation-content code {
    @apply bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-sm font-mono;
  }
  .documentation-content pre {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 text-sm;
  }
  .documentation-content pre code {
    @apply bg-transparent p-0 text-inherit;
  }
  .documentation-content blockquote {
    @apply border-l-4 border-gray-300 pl-4 my-3 text-gray-600 italic;
  }
  .documentation-content table {
    @apply w-full border-collapse my-4 text-sm;
  }
  .documentation-content th,
  .documentation-content td {
    @apply border border-gray-200 px-3 py-2 text-left;
  }
  .documentation-content th {
    @apply bg-gray-50 font-semibold text-gray-900;
  }
  .documentation-content hr {
    @apply my-6 border-gray-200;
  }
}