/* style.css - Custom layout compatibility variables & speed optimizations */

:root {
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Scrollbar aesthetic touches */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #090d16;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Elegant utility keyframes for native CSS entries */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Hide Scrollbar generic utility */
.scrollbar-none {
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* Blog article body typography. Plain hand-written CSS (not Tailwind
   utilities) deliberately -- this site has no real Tailwind build step (see
   base.html's own comment on compiled-tailwind.css), so a long article body
   full of ad-hoc utility classes would need every one of those classes
   hand-verified/added to that file. Scoping real semantic-HTML styling here
   instead means BlogPost.body can just be plain <h2>/<p>/<ul>/<blockquote>
   markup, written once in admin, styled consistently forever. */
.article-prose {
  color: #cbd5e1; /* slate-300 */
  font-size: 0.95rem;
  line-height: 1.75;
}
.article-prose > * + * {
  margin-top: 1.25rem;
}
.article-prose h2 {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 800;
  margin-top: 2rem;
}
.article-prose h3 {
  color: #f8fafc; /* slate-50 */
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 1.5rem;
}
.article-prose p {
  color: #cbd5e1;
}
.article-prose strong {
  color: #f1f5f9; /* slate-100 */
  font-weight: 700;
}
.article-prose ul,
.article-prose ol {
  padding-left: 1.25rem;
  color: #cbd5e1;
}
.article-prose ul {
  list-style: disc;
}
.article-prose ol {
  list-style: decimal;
}
.article-prose li + li {
  margin-top: 0.5rem;
}
.article-prose blockquote {
  border-left: 3px solid #f59e0b; /* amber-500 */
  padding-left: 1rem;
  color: #94a3b8; /* slate-400 */
  font-style: italic;
}
.article-prose a {
  color: #fbbf24; /* amber-400 */
  text-decoration: underline;
}
.article-prose code {
  background: #0f172a; /* slate-900 */
  border: 1px solid #1e293b;
  border-radius: 0.25rem;
  padding: 0.1rem 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: #fbbf24;
}