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

* {
  @apply box-border;
}

html {
  scroll-behavior: smooth;
}

body {
  @apply bg-white text-gray-900;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: 'Monaco', 'Courier New', monospace;
}

/* TipTap Editor Styles */
.ProseMirror {
  @apply p-4 border border-gray-300 rounded-lg min-h-96 focus:outline-none focus:ring-2 focus:ring-blue-500;
}

.ProseMirror p {
  @apply mb-2;
}

.ProseMirror h1 {
  @apply text-3xl font-bold mb-4 mt-6;
}

.ProseMirror h2 {
  @apply text-2xl font-bold mb-3 mt-5;
}

.ProseMirror h3 {
  @apply text-xl font-bold mb-2 mt-4;
}

.ProseMirror code {
  @apply bg-gray-100 px-2 py-1 rounded text-sm;
}

.ProseMirror pre {
  @apply bg-gray-900 text-white p-4 rounded-lg overflow-x-auto;
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-in {
  animation: slideIn 0.5s ease-out;
}

/* Responsive utilities */
@media (max-width: 768px) {
  .container {
    @apply px-4;
  }
}
