/* Custom styles for KajitoDoc */

:root {
    --scrollbar-bg: #0B0B0C;
    --scrollbar-thumb: #1E1E21;
    --scrollbar-thumb-hover: #262629;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
    border: 2px solid var(--scrollbar-bg);
}

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

/* CodeMirror Dracula Tweak */
.CodeMirror {
    height: 100% !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 14px;
    background: #0B0B0C !important;
}

.CodeMirror-gutters {
    background: #0B0B0C !important;
    border-right: 1px solid #1E1E21 !important;
}

/* Documentation Styling */
#content-renderer h1 {
    @apply text-4xl font-bold text-white mb-8 tracking-tight;
}

#content-renderer h2 {
    @apply text-2xl font-semibold text-white mt-12 mb-4;
}

#content-renderer p {
    @apply mb-6 leading-relaxed text-gray-400;
}

#content-renderer ul {
    @apply list-disc list-inside mb-6 text-gray-400;
}

#content-renderer pre {
    @apply bg-dark-surface border border-dark-border rounded-xl p-6 mb-8 overflow-x-auto;
}

#content-renderer code {
    @apply font-mono text-sm text-indigo-400;
}

#content-renderer pre code {
    @apply text-gray-300;
}

#content-renderer blockquote {
    @apply border-l-4 border-indigo-500 bg-indigo-500/10 p-4 rounded-r-lg mb-8 text-gray-300 italic;
}

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

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}