/* Base styles and modern reset */
* {
    box-sizing: border-box;
}

:root {
    --primary-gradient: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    --secondary-gradient: linear-gradient(135deg, #64748b 0%, #475569 100%);
    --accent-gradient: linear-gradient(135deg, #dc26ff 0%, #c916ed 100%);
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
}

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

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-gradient);
    border-radius: 10px;
    border: 2px solid #f1f5f9;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-gradient);
}

/* Glass morphism effect */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
}

/* Enhanced button styles */
.btn-primary {
    @apply px-8 py-4 bg-gradient-to-r from-primary-500 to-primary-600 text-white font-semibold rounded-xl transition-all duration-300 transform hover:scale-105 hover:shadow-glow focus:outline-none focus:ring-4 focus:ring-primary-200;
}

.btn-secondary {
    @apply px-8 py-4 bg-white text-primary-600 font-semibold rounded-xl border-2 border-primary-200 transition-all duration-300 transform hover:scale-105 hover:bg-primary-50 hover:border-primary-300 focus:outline-none focus:ring-4 focus:ring-primary-200;
}

.btn-accent {
    @apply px-8 py-4 bg-gradient-to-r from-accent-500 to-accent-600 text-white font-semibold rounded-xl transition-all duration-300 transform hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-accent-200;
}

.docs-sidebar {
    color: inherit;
}

/* Card components */
.card {
    @apply bg-white rounded-2xl shadow-lg border border-gray-100 transition-all duration-300 hover:shadow-xl hover:scale-105;
}

.card-feature {
    @apply relative overflow-hidden;
}

.card-feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-gradient);
}

/* Enhanced typography */
.heading-xl {
    @apply text-5xl md:text-6xl lg:text-7xl font-bold font-poppins text-gray-900 leading-tight;
}

.heading-lg {
    @apply text-3xl md:text-4xl lg:text-5xl font-bold font-poppins text-gray-900 leading-tight;
}

.heading-md {
    @apply text-2xl md:text-3xl font-semibold font-poppins text-gray-800 leading-tight;
}

.heading-sm {
    @apply text-xl md:text-2xl font-semibold font-poppins text-gray-800 leading-tight;
}

.text-body {
    @apply text-base md:text-lg text-gray-700 leading-relaxed;
}

.text-muted {
    @apply text-sm md:text-base text-gray-600 leading-relaxed;
}

/* Documentation specific styles */
.doc-content {
    @apply prose prose-lg max-w-none;
}

.doc-content h1,
.doc-content h2,
.doc-content h3,
.doc-content h4,
.doc-content h5,
.doc-content h6 {
    font-weight: bold;
    margin: 10px 0;
}

.doc-content h1 {
    @apply text-4xl font-bold font-poppins text-gray-900 mb-6 !important;
    font-size: 2rem;
}

.doc-content h2 {
    @apply text-3xl font-semibold font-poppins text-gray-800 mt-12 mb-6 !important;
    font-size: 1.5rem;
}

.doc-content h3 {
    @apply text-2xl font-semibold font-poppins text-gray-800 mt-8 mb-4 !important;
    font-size: 1.25rem;
}

.doc-content h4 {
    @apply text-xl font-semibold font-poppins text-gray-700 mt-6 mb-3 !important;
}

.doc-content h5 {
    @apply text-lg font-semibold text-gray-700 mt-4 mb-2 !important;
}

.doc-content h6 {
    @apply text-base font-semibold text-gray-700 mt-4 mb-2 !important;
}

.doc-content p {
    @apply text-gray-700 leading-relaxed mb-6 !important;
}

.doc-content a {
    @apply text-primary-600 hover:text-primary-700 underline transition-colors duration-200 !important;
}

.doc-content a:visited {
    @apply text-accent-600 !important;
}

.doc-content ul, .doc-content ol {
    @apply mb-6 space-y-2 !important;
}

.doc-content li {
    @apply text-gray-700 leading-relaxed !important;
}

.doc-content pre {
    @apply bg-gray-900 text-gray-100 p-6 rounded-xl overflow-x-auto mb-6 shadow-lg !important;
    background-color: #0f172ae0 !important;
    padding: 10px 20px;
    border-radius: 10px;
    margin: 10px 0;
}

.doc-content blockquote {
    @apply border-l-4 border-primary-400 bg-primary-50 pl-6 py-4 my-6 italic rounded-r-lg !important;
    color: #334155 !important;
}

.doc-content table {
    @apply w-full border-collapse bg-white rounded-lg overflow-hidden shadow-lg mb-6 !important;
}

.doc-content table th {
    @apply bg-gray-50 px-6 py-4 text-left font-semibold text-gray-800 border-b border-gray-200 !important;
}

.doc-content table td {
    @apply px-6 py-4 border-b border-gray-200 text-gray-700 !important;
}

.doc-content table tr:hover {
    @apply bg-gray-50 !important;
}

/* Integration-friendly components */
.integration-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-primary-100 text-primary-800 border border-primary-200;
}

.api-endpoint {
    @apply bg-gray-900 text-gray-100 px-4 py-2 rounded-lg font-mono text-sm inline-block;
}

.status-indicator {
    @apply w-3 h-3 rounded-full;
}

.status-success {
    @apply bg-green-400;
}

.status-warning {
    @apply bg-yellow-400;
}

.status-error {
    @apply bg-red-400;
}

/* Enhanced animations */
@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.shimmer {
    background: linear-gradient(90deg, #f0f0f0 0px, #e0e0e0 40px, #f0f0f0 80px);
    background-size: 200px;
    animation: shimmer 1.5s infinite;
}

/* Responsive improvements */
@media (max-width: 640px) {
    .heading-xl {
        @apply text-4xl;
    }
    
    .heading-lg {
        @apply text-3xl;
    }
    
    .btn-primary,
    .btn-secondary,
    .btn-accent {
        @apply px-6 py-3 text-sm;
    }
}

/* Dark mode support */
.dark .doc-content h1,
.dark .doc-content h2,
.dark .doc-content h3,
.dark .doc-content h4,
.dark .doc-content h5,
.dark .doc-content h6 {
    @apply text-white !important;
}

.dark .doc-content p,
.dark .doc-content li {
    @apply text-gray-300 !important;
}

.dark .doc-content a {
    @apply text-primary-400 hover:text-primary-300 !important;
}

.dark .doc-content code {
    @apply bg-gray-800 text-gray-200 !important;
}

.dark .doc-content blockquote {
    @apply bg-gray-800 border-primary-500 !important;
    color: #e2e8f0 !important;
}

/* Focus styles for accessibility */
.focus-ring {
    @apply focus:outline-none focus:ring-4 focus:ring-primary-200 focus:ring-opacity-50;
}

/* Loading states */
.loading {
    @apply opacity-50 pointer-events-none;
}

.skeleton {
    @apply bg-gray-200 animate-pulse rounded;
}

/* Design overrides for readability and navigation layout */
header.glass {
    background-color: #0f172a !important; /* Dark background for better contrast */
}
header.glass nav,
header.glass nav a,
header.glass nav button,
header.glass nav .btn-primary {
    color: #ffffff !important; /* Ensure white text on dark nav */
}
header.glass nav a:hover,
header.glass nav button:hover {
    color: #38bdf8 !important; /* Subtle hover state */
}
header.glass nav { overflow: visible !important; }

.docs-sidebar,
.docs-sidebar a,
.docs-sidebar h3,
.docs-sidebar h4,
.docs-sidebar li {
    color: #334155 !important; /* Consistent sidebar text color */
}

.doc-content pre,
.doc-content pre code {
    color: #f8fafc !important; /* White text in code blocks */
}

/* Prevent dropdown clipping */
.relative > div[style*="absolute"] {
    overflow: visible !important; /* Ensure feature card dropdown is fully visible */
}

/* Ensure markdown list bullets/numbers appear */
.doc-content ul {
    list-style-type: disc !important;
    list-style-position: inside !important;
    padding-left: 1.25rem !important;
}

.doc-content ol {
    list-style-type: decimal !important;
    list-style-position: inside !important;
    padding-left: 1.25rem !important;
}