/* Common styles for explainers */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

:root {
    --bg-color: #f9fafb; /* gray-50 */
    --text-color: #111827; /* gray-900 */
    --accent-primary: #4f46e5; /* indigo-600 */
    --accent-secondary: #db2777; /* pink-600 */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* MathJax overrides */
mjx-container {
    font-size: 1.1em !important;
    color: #1f2937;
}

/* Selection color */
::selection {
    background-color: #e0e7ff; /* indigo-100 */
    color: #312e81; /* indigo-900 */
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* Fix MathJax color on dark backgrounds */
.from-gray-900 .MathJax,
.bg-gray-900 .MathJax,
.bg-gray-900 .mjx-container,
.bg-gray-900 .mjx-math {
    color: #f3f4f6 !important; /* gray-100 */
}
.bg-gray-900 .MathJax svg path {
    fill: #f3f4f6 !important;
}