/* 96MSG Hoseh — Celestial Dark Design System */
/* Tailwind handles most utilities; this file covers custom additions */

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #001135; }
::-webkit-scrollbar-thumb { background: #444656; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #FF8A00; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Focus styles */
:focus-visible { outline: 2px solid #FF8A00; outline-offset: 2px; }

/* Prose overrides for blog content */
.prose-dark h2 { color: #dae2ff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.5rem; margin-top: 2rem; margin-bottom: 1rem; }
.prose-dark h3 { color: #bdc2ff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.125rem; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.prose-dark p { color: #c5c5d9; line-height: 1.75; margin-bottom: 1rem; }
.prose-dark ul { color: #c5c5d9; list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose-dark ul li { margin-bottom: 0.5rem; }
.prose-dark a { color: #FF8A00; text-decoration: underline; }
.prose-dark a:hover { color: #ffb77f; }
.prose-dark strong { color: #dae2ff; }
.prose-dark table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.prose-dark th { background: #0524dd; color: #dae2ff; padding: 0.75rem 1rem; text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.prose-dark td { padding: 0.75rem 1rem; border-bottom: 1px solid #444656; color: #c5c5d9; font-size: 0.875rem; }
.prose-dark tr:hover td { background: #081d47; }

/* FAQ accordion */
.faq-answer { display: none; }
.faq-answer.open { display: block; }

/* Author card */
.author-chip { display: inline-flex; align-items: center; gap: 0.5rem; background: #081d47; border: 1px solid #444656; border-radius: 9999px; padding: 0.375rem 0.875rem; font-size: 0.75rem; color: #c5c5d9; }

/* Table of contents */
.toc a { color: #bdc2ff; text-decoration: none; font-size: 0.875rem; display: block; padding: 0.25rem 0; }
.toc a:hover { color: #FF8A00; }