/* Blog reading typography — drops into the existing main-site Tailwind config.
   Uses the coba/matrix color tokens defined in tailwind.config (see _includes/blog-head.html). */

* {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 200ms;
  transition-timing-function: ease;
}

/* Reveal animation — same pattern as main marketing site */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* Article body typography */
.blog-body {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgb(31 41 55); /* gray-800 */
}
.dark .blog-body { color: rgb(229 231 235); /* gray-200 */ }

.blog-body p {
  margin: 0 0 1.4rem 0;
}
.blog-body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 2.5rem 0 1rem;
  color: rgb(17 24 39); /* gray-900 */
}
.dark .blog-body h2 { color: rgb(255 255 255); }

.blog-body h3, .blog-body h4, .blog-body h5 {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 2rem 0 0.75rem;
  color: rgb(17 24 39);
}
.dark .blog-body h3, .dark .blog-body h4, .dark .blog-body h5 { color: rgb(255 255 255); }

.blog-body a {
  color: #00B86B; /* coba-600 */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.blog-body a:hover { color: #009A59; }
.dark .blog-body a { color: #00ff88; /* matrix-glow */ }
.dark .blog-body a:hover { color: #00cc6a; }

.blog-body ul, .blog-body ol {
  margin: 0 0 1.4rem 1.5rem;
  padding: 0;
}
.blog-body li {
  margin-bottom: 0.5rem;
}
.blog-body ul > li { list-style: disc; }
.blog-body ol > li { list-style: decimal; }

.blog-body blockquote {
  margin: 1.6rem 0;
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-left: 3px solid #00D67E; /* coba-500 */
  color: rgb(75 85 99); /* gray-600 */
  font-style: italic;
}
.dark .blog-body blockquote {
  border-left-color: #00ff88;
  color: rgb(156 163 175);
}

.blog-body code {
  background: rgb(243 244 246);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
}
.dark .blog-body code { background: rgb(13 18 16); }

.blog-body pre {
  background: rgb(17 24 39);
  color: rgb(243 244 246);
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}
.blog-body pre code { background: none; padding: 0; }

.blog-body img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}

.blog-body figure {
  margin: 1.5rem 0;
}
.blog-body figcaption {
  font-size: 0.875rem;
  color: rgb(107 114 128);
  text-align: center;
  margin-top: 0.5rem;
}

.blog-body iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}

.blog-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.blog-body th, .blog-body td {
  padding: 0.6rem 0.9rem;
  border: 1px solid rgb(229 231 235);
  text-align: left;
}
.dark .blog-body th, .dark .blog-body td { border-color: rgb(26 36 32); }
.blog-body th {
  background: rgb(249 250 251);
  font-weight: 600;
}
.dark .blog-body th { background: rgb(13 18 16); }

.blog-body strong { font-weight: 700; color: rgb(17 24 39); }
.dark .blog-body strong { color: rgb(255 255 255); }