/* ─── LuvCode Design System ─── */

/* Font classes */
.font-heading { font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif; }
.font-sans { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; }

/* Heading weight override */
h1, h2, h3, h4, h5, h6, .font-heading { font-weight: 600 !important; }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
:root { --scroll-track: #f1f5f9; --scroll-thumb: #cbd5e1; }
.dark { --scroll-track: #0f172a; --scroll-thumb: #1e293b; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Selection */
::selection { background: rgba(37,99,235,0.25); }

/* Focus visible */
:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; }

/* Line clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@supports (line-clamp: 2) {
    .line-clamp-2 { display: block; line-clamp: 2; -webkit-box-orient: unset; }
    .line-clamp-3 { display: block; line-clamp: 3; -webkit-box-orient: unset; }
}

/* ─── Markdown Body ─── */
.markdown-body { line-height: 1.7; }
.markdown-body h1 { font-size: 1.75em; font-weight: 600; margin: 1.25em 0 0.5em; padding-bottom: 0.3em; border-bottom: 1px solid #e2e8f0; }
.dark .markdown-body h1 { border-bottom-color: #1e293b; }
.markdown-body h2 { font-size: 1.375em; font-weight: 600; margin: 1.25em 0 0.5em; padding-bottom: 0.25em; border-bottom: 1px solid #e2e8f0; }
.dark .markdown-body h2 { border-bottom-color: #1e293b; }
.markdown-body h3 { font-size: 1.125em; font-weight: 600; margin: 1em 0 0.5em; }
.markdown-body h4 { font-size: 1em; font-weight: 600; margin: 1em 0 0.5em; }
.markdown-body p { margin: 0.5em 0; }
.markdown-body a { color: #2563eb; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; }
.markdown-body a:hover { border-bottom-color: #2563eb; }
.markdown-body code { background: #f1f5f9; padding: 0.15em 0.35em; border-radius: 4px; font-size: 0.85em; font-family: 'JetBrains Mono', monospace; }
.dark .markdown-body code { background: #1e293b; }
.markdown-body pre { background: #0f172a; border: 1px solid #1e293b; border-radius: 6px; padding: 1em; margin: 1em 0; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; overflow-wrap: break-word; }
.markdown-body pre code { background: none; padding: 0; font-size: 0.85em; color: #e2e8f0; white-space: pre-wrap; word-wrap: break-word; }
.markdown-body ul, .markdown-body ol { margin: 0.5em 0; padding-left: 1.75em; }
.markdown-body li { margin: 0.2em 0; }
.markdown-body blockquote { border-left: 3px solid #2563eb; padding: 0.5em 1em; margin: 1em 0; color: #64748b; background: #f8fafc; border-radius: 0 6px 6px 0; }
.dark .markdown-body blockquote { background: #0f172a; color: #94a3b8; }
.markdown-body img { max-width: 100%; border-radius: 6px; }
.markdown-body table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.9em; }
.markdown-body th, .markdown-body td { border: 1px solid #e2e8f0; padding: 0.5em 0.75em; text-align: left; }
.dark .markdown-body th, .dark .markdown-body td { border-color: #1e293b; }
.markdown-body th { background: #f8fafc; font-weight: 600; }
.dark .markdown-body th { background: #0f172a; }
.markdown-body hr { border: none; border-top: 1px solid #e2e8f0; margin: 1.5em 0; }
.dark .markdown-body hr { border-top-color: #1e293b; }

/* ─── File Tree ─── */
.file-tree-item { cursor: pointer; user-select: none; }
.file-tree-item:hover { background: rgba(37,99,235,0.06); }
.dark .file-tree-item:hover { background: rgba(37,99,235,0.08); }
.tree-children { display: none; }
.tree-children.open { display: block; }

/* ─── Vote & Heart States ─── */
.vote-btn.active-up { color: #22c55e; }
.vote-btn.active-down { color: #ef4444; }
.heart-btn.active { color: #f43f5e; }

/* ─── Toast Animations ─── */
@keyframes toast-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }
.toast-enter { animation: toast-in 0.25s ease-out; }
.toast-exit { animation: toast-out 0.2s ease-in forwards; }

/* ─── Modal Animations ─── */
@keyframes modal-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.modal-enter { animation: modal-in 0.15s ease-out; }

/* ─── Card Hover ─── */
.card-hover { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.card-hover:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.dark .card-hover:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

/* ─── Skeleton Loading ─── */
.skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ─── Print ─── */
@media print {
    nav, footer, #toast-container, #modal-overlay { display: none !important; }
    body { background: white !important; color: black !important; }
}

/* ─── Bento Grid Card ─── */
.bento-card { transition: border-color 0.15s, box-shadow 0.15s; }
.bento-card:hover { border-color: rgba(99,102,241,0.3); }
.dark .bento-card:hover { border-color: rgba(99,102,241,0.3); }

/* ─── Heart Stat Clickable ─── */
.heart-stat { cursor: pointer; transition: color 0.15s, transform 0.15s; }
.heart-stat:hover { color: #f43f5e; }
.heart-stat.text-rose-500 { color: #f43f5e; }

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

/* ─── Selection color in dark ─── */
.dark ::selection { background: rgba(37,99,235,0.4); }

/* ─── Link transitions ─── */
a { transition: color 0.15s; }