/* styles.css */
body {
    font-family: 'Georgia', 'Times New Roman', Times, serif;
    color: #334155; /* slate-700 */
    background-color: #f8fafc; /* slate-50 */
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: #0f172a; /* slate-900 */
    font-weight: 600;
}

/* MathJax display equations */
mjx-container[jax="CHTML"][display="true"] {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    background-color: #f8fafc; /* slate-50 for slight contrast */
    border: 1px solid #e2e8f0; /* slate-200 */
    border-radius: 0.375rem; /* rounded-md */
    padding: 1em;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); /* shadow-sm */
}

/* Tailwind typography plugin overrides or enhancements */
.prose {
    line-height: 1.8;
    color: #334155; /* slate-700 */
}

.prose h3 { /* Used for sub-sections like 2.1, 2.2 */
    @apply text-2xl font-semibold text-slate-800 mt-10 mb-5 border-b border-slate-200 pb-2;
}
.prose h4 { /* Used for sub-sub-sections */
    @apply text-xl font-semibold text-slate-800 mt-8 mb-4;
}

.prose a {
    color: #0284c7; /* sky-600 */
    text-decoration: none;
    font-weight: 500;
}
.prose a:hover {
    color: #0369a1; /* sky-700 */
    text-decoration: underline;
}

.prose strong {
    color: #1e293b; /* slate-800 */
}

.prose blockquote {
    border-left-color: #0ea5e9; /* sky-500 */
    color: #475569; /* slate-600 */
}

.prose code:not(pre code) {
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background-color: #e2e8f0; /* slate-200 */
    color: #334155; /* slate-700 */
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-weight: 500;
}

.prose pre {
    background-color: #f8fafc; /* slate-50 */
    border: 1px solid #e2e8f0; /* slate-200 */
    border-radius: 0.375rem; /* rounded-md */
    padding: 1.25em;
    overflow-x: auto;
    font-size: 0.875em; /* text-sm */
    line-height: 1.6;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.prose pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    color: #1e293b; /* slate-800 */
}

.prose table {
    @apply w-full my-8 text-base; /* Slightly larger text for tables */
    font-size: 0.9rem;
}
.prose th {
    @apply border border-slate-300 px-4 py-3 bg-slate-100 font-semibold text-left text-slate-700;
}
.prose td {
    @apply border border-slate-300 px-4 py-3;
}
.prose ul li::marker {
    color: #0ea5e9; /* sky-500 */
}

/* Specific for boxed equations in Julian's email */
.boxed-equation mjx-container[jax="CHTML"][display="true"] {
    border: 2px solid #0ea5e9; /* sky-500 */
    box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.2), 0 2px 4px -2px rgba(14, 165, 233, 0.15);
}

/* Styling for the validation table */
.validation-table th, .validation-table td {
    padding: 0.75rem 1rem; /* More padding */
}
.validation-table th {
    background-color: #f1f5f9; /* slate-100 */
}
.validation-table .status-ok {
    color: #16a34a; /* green-600 */
    font-weight: bold;
}