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

@layer base {
  :root {
    --primary: #4f46e5;
    --secondary: #6366f1;
    --success: #10b981;
    --error: #ef4444;
  }

  body {
    @apply bg-gray-50 text-gray-900 font-sans antialiased;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-md font-medium transition-all duration-200;
  }

  .btn-primary {
    @apply bg-primary text-white hover:bg-primary/90;
  }

  .btn-secondary {
    @apply bg-white text-gray-700 border border-gray-300 hover:bg-gray-50;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-sm;
  }

  .icon {
    @apply inline-flex items-center justify-center flex-shrink-0 transition-all duration-200;
  }

  .icon-xs {
    @apply w-4 h-4;
  }

  .icon-sm {
    @apply w-5 h-5;
  }

  .icon-md {
    @apply w-6 h-6;
  }

  .icon-lg {
    @apply w-8 h-8;
  }

  .icon-xl {
    @apply w-10 h-10;
  }

  .tab {
    @apply inline-flex items-center gap-2 px-4 py-2 text-gray-600 font-medium border-b-2 border-transparent hover:text-primary transition-all duration-200;
  }

  .tab.active {
    @apply text-primary border-primary;
  }

  .schema-item {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md;
  }

  .schema-header {
    @apply flex items-center justify-between p-4 bg-gray-50 cursor-pointer;
  }

  .schema-title {
    @apply flex items-center gap-2 m-0 text-lg font-semibold text-primary;
  }

  .schema-content {
    @apply p-4 border-t border-gray-200;
  }

  .status-message {
    @apply p-4 rounded-md flex items-center gap-2 mb-4;
  }

  .status-message.info {
    @apply bg-blue-50 text-blue-700 border-l-4 border-blue-500;
  }

  .status-message.error {
    @apply bg-red-50 text-red-700 border-l-4 border-red-500;
  }

  .results-section {
    @apply bg-white rounded-lg shadow-sm p-4 mt-4;
  }

  .results-content {
    @apply bg-gray-50 p-4 rounded-md font-mono whitespace-pre-wrap;
  }

  .code-editor {
    @apply font-mono text-sm leading-relaxed p-4 bg-gray-50 border border-gray-300 rounded-md w-full min-h-[300px] resize-y focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/10;
  }
}

@layer utilities {
  .transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
}