// Import Tailwind CSS
@import "tailwind";

// Custom fonts
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

// Base styles
:root {
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
}

body {
  font-family: var(--font-family-sans);
  line-height: 1.6;
}

code, pre {
  font-family: var(--font-family-mono);
}

// Syntax highlighting improvements
.highlight {
  @apply rounded-lg overflow-hidden;
  
  pre {
    @apply p-4 m-0 overflow-x-auto;
    background: #1e1e1e !important;
  }
  
  code {
    @apply text-sm;
    background: transparent !important;
  }
}

// Custom scrollbar
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-400 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500;
}

// Responsive table wrapper
.table-wrapper {
  @apply overflow-x-auto;
  
  table {
    @apply min-w-full divide-y divide-gray-200;
    
    thead {
      @apply bg-gray-50;
      
      th {
        @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
      }
    }
    
    tbody {
      @apply bg-white divide-y divide-gray-200;
      
      td {
        @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
      }
    }
  }
}

// Enhanced blockquotes
blockquote {
  @apply border-l-4 border-blue-500 pl-4 italic my-4 text-gray-600;
}

// Better focus states
*:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

// Skip link for accessibility
.skip-link {
  @apply sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 bg-blue-600 text-white px-4 py-2 z-50;
}

// Print styles
@media print {
  .no-print {
    display: none !important;
  }
  
  .docs-sidebar {
    display: none !important;
  }
  
  .docs-content {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}