/*
 * SpiderIQ Default Theme — custom overrides + prose styling.
 * Tailwind CDN loads via <script> tag in head.liquid.
 */

/* Custom color mappings via CSS variables (set by head.liquid).
   Surface + text colors are configurable per-site via content_settings
   (migration 120) — null falls back to the canonical dark palette. */
.bg-surface { background-color: var(--surface); }
.bg-surface-elevated { background-color: var(--surface-elevated); }
.bg-subtle { background-color: var(--subtle); }
.border-subtle { border-color: var(--subtle); }
.bg-primary { background-color: var(--primary); }
.text-primary { color: var(--primary); }
.border-primary { border-color: var(--primary); }
.text-body { color: var(--body-text); }
.text-heading { color: var(--heading); }

/* Prose styling for rendered content */
.prose { line-height: 1.75; }
.prose h1 { font-size: 2rem; font-weight: 600; margin-top: 2rem; margin-bottom: 1rem; }
.prose h2 { font-size: 1.5rem; font-weight: 600; margin-top: 1.75rem; margin-bottom: 0.75rem; }
.prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.25rem; }
.prose blockquote { border-left: 3px solid var(--primary); padding-left: 1rem; font-style: italic; color: #a1a1aa; }
.prose pre { background: #0A0A0B; border: 1px solid var(--subtle); border-radius: 0.5rem; padding: 1rem; overflow-x: auto; margin-bottom: 1rem; }
.prose code { font-size: 0.875rem; }
.prose img { border-radius: 0.5rem; margin: 1.5rem 0; }
.prose a { color: var(--primary); text-decoration: underline; }
.prose a:hover { opacity: 0.8; }
.prose hr { border-color: var(--subtle); margin: 2rem 0; }

.prose-invert { color: #d4d4d8; }
.prose-invert h1, .prose-invert h2, .prose-invert h3, .prose-invert h4 { color: #fff; }
.prose-invert strong { color: #fff; }
.prose-invert code { color: #e4e4e7; }

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Font */
body { font-family: system-ui, -apple-system, sans-serif; }
.font-serif { font-family: 'Georgia', serif; }
.font-mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; }