/*
 * Hand-translated from the CSS custom properties used by
 * src/app/globals.css in the main Next.js app (light + dark tokens,
 * terminal/mono aesthetic), plus a typography system for post content
 * translated from tailwind.config.ts's `typography.DEFAULT.css`.
 */

:root {
  color-scheme: light;
  --bg:         252 252 253;
  --bg-subtle:  245 245 247;
  --bg-card:    255 255 255;
  --bg-elevated: 255 255 255;
  --line:       228 228 231;
  --line-strong: 212 212 216;
  --fg:         9 9 11;
  --fg-muted:   82 82 91;
  --fg-dim:     113 113 122;
  --accent:     109 40 217;
  --accent-hover: 91 33 182;
  --accent-glow: 139 92 246;

  --prose-body:        #27272a;
  --prose-headings:    #09090b;
  --prose-lead:        #52525b;
  --prose-links:       #6d28d9;
  --prose-bullets:     #71717a;
  --prose-hr:          #e4e4e7;
  --prose-code:        #6d28d9;
  --prose-pre-code:    #ededed;
  --prose-pre-bg:      #0a0a0a;
  --prose-inline-code-bg:     rgba(109, 40, 217, 0.1);
  --prose-inline-code-border: rgba(109, 40, 217, 0.2);

  --card-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04), 0 1px 3px 0 rgba(0, 0, 0, 0.03);
}

.dark {
  color-scheme: dark;
  --bg:          0 0 0;
  --bg-subtle:   10 10 10;
  --bg-card:     10 10 10;
  --bg-elevated: 17 17 17;
  --line:        38 38 38;
  --line-strong: 51 51 51;
  --fg:          237 237 237;
  --fg-muted:    161 161 161;
  --fg-dim:      112 112 112;
  --accent:      139 109 255;
  --accent-hover: 124 92 255;
  --accent-glow: 177 156 255;

  --prose-body:        #d4d4d4;
  --prose-headings:    #fafafa;
  --prose-lead:        #a1a1a1;
  --prose-links:       #b19cff;
  --prose-bullets:     #707070;
  --prose-hr:          #262626;
  --prose-code:        #bc8cff;
  --prose-pre-code:    #ededed;
  --prose-pre-bg:      #0a0a0a;
  --prose-inline-code-bg:     rgba(139, 109, 255, 0.12);
  --prose-inline-code-border: rgba(139, 109, 255, 0.25);

  --card-shadow: 0 0 0 transparent;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  color: rgb(var(--fg));
  background: rgb(var(--bg));
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color .15s ease, color .15s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.mono { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; }
.chip { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 9999px; border: 1px solid rgb(var(--line)); background: rgb(var(--bg-subtle)); padding: 0.25rem 0.7rem; font-size: 0.7rem; color: rgb(var(--fg-muted)); }

.site-main { min-height: 60vh; }

/* ---------- Nav ---------- */
.site-nav { position: sticky; top: 0; z-index: 50; background: rgb(var(--bg) / 0.8); backdrop-filter: blur(16px); border-bottom: 1px solid rgb(var(--line)); }
.site-nav__inner { max-width: 72rem; margin: 0 auto; padding: 0 1rem; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-nav__logo { display: flex; align-items: center; gap: 0.5rem; }
.site-nav__logo-icon { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; background: rgb(var(--accent) / 0.1); box-shadow: inset 0 0 0 1px rgb(var(--accent) / 0.3); color: rgb(var(--accent)); }
.site-nav__logo-text { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; color: rgb(var(--fg)); }
.site-nav__logo-dim { color: rgb(var(--fg-muted)); }
.site-nav__logo-blink { display: inline-block; margin-left: 0.125rem; width: 0.35rem; height: 0.7rem; vertical-align: middle; background: rgb(var(--accent)); animation: et-blink 1s step-end infinite; }
@keyframes et-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.site-nav__links { display: none; align-items: center; gap: 0.125rem; }
@media (min-width: 900px) { .site-nav__links { display: flex; } }
.site-nav__links a { font-size: 0.875rem; font-weight: 500; color: rgb(var(--fg-muted)); padding: 0.5rem 0.875rem; border-radius: 0.375rem; }
.site-nav__links a:hover { color: rgb(var(--fg)); background: rgb(var(--bg-subtle)); }
.site-nav__links a.is-active { color: rgb(var(--accent)); }

.site-nav__actions { display: flex; align-items: center; gap: 0.25rem; }
.site-nav__theme-toggle, .site-nav__hamburger {
  display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: 0.375rem; background: none; border: none; cursor: pointer; color: rgb(var(--fg-muted));
}
.site-nav__theme-toggle:hover, .site-nav__hamburger:hover { color: rgb(var(--fg)); background: rgb(var(--bg-subtle)); }
@media (min-width: 900px) { .site-nav__hamburger { display: none; } }

.site-nav__mobile { display: none; padding: 0.5rem 1rem 1rem; border-top: 1px solid rgb(var(--line)); }
.site-nav__mobile.is-open { display: block; }
.site-nav__mobile > a { display: block; font-size: 0.9375rem; font-weight: 500; color: rgb(var(--fg)); padding: 0.625rem 0.75rem; border-radius: 0.5rem; }
.site-nav__mobile > a:hover { background: rgb(var(--bg-subtle)); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid rgb(var(--line)); background: rgb(var(--bg-subtle) / 0.5); margin-top: 6rem; }
.site-footer__inner { max-width: 72rem; margin: 0 auto; padding: 3rem 1rem; }
.site-footer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 2.5rem; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(7, 1fr); } }
.site-footer__brand { grid-column: span 2 / span 2; }
@media (min-width: 768px) { .site-footer__brand { grid-column: span 1 / span 1; } }
.site-footer__brand-name { font-size: 0.875rem; font-weight: 600; color: rgb(var(--fg)); }
.site-footer__brand p { margin-top: 0.5rem; font-size: 0.75rem; color: rgb(var(--fg-muted)); max-width: 18rem; }

.site-footer__col h3 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--fg-dim)); margin: 0 0 0.75rem; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer__col a { font-size: 0.875rem; color: rgb(var(--fg-muted)); }
.site-footer__col a:hover { color: rgb(var(--fg)); }
.site-footer__col-more { color: rgb(var(--accent)) !important; }
.site-footer__col-more:hover { color: rgb(var(--accent-glow)) !important; }

.site-footer__bottom { border-top: 1px solid rgb(var(--line)); padding: 1.5rem 0 0; margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.75rem; color: rgb(var(--fg-dim)); }
@media (min-width: 768px) { .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.site-footer__bottom p { margin: 0; }
.site-footer__bottom-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.site-footer__bottom-links a:hover { color: rgb(var(--fg)); }
.site-footer__attribution { font-size: 0.75rem; color: rgb(var(--fg-dim)) !important; }

/* ---------- Blog index ---------- */
.blog-index { max-width: 56rem; margin: 0 auto; padding: 2.5rem 1rem 4rem; }
.blog-index__breadcrumb { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: rgb(var(--fg-dim)); margin-bottom: 1.5rem; }
.blog-index__breadcrumb a:hover { color: rgb(var(--fg)); }
.blog-index__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 768px) { .blog-index__grid { grid-template-columns: repeat(2, 1fr); } }
.blog-index__card { display: block; border: 1px solid rgb(var(--line)); border-radius: 0.5rem; background: rgb(var(--bg-card)); box-shadow: var(--card-shadow); overflow: hidden; transition: all .2s ease; }
.blog-index__card:hover { border-color: rgb(var(--line-strong)); background: rgb(var(--bg-elevated)); transform: translateY(-2px); }
.blog-index__card img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.blog-index__card-fallback { width: 100%; aspect-ratio: 1200/630; display: flex; align-items: center; justify-content: center; background: rgb(var(--bg-subtle)); color: rgb(var(--accent)); }
.blog-index__card-body { padding: 1.25rem; }
.blog-index__card h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: rgb(var(--fg)); margin: 0.625rem 0 0.5rem; }
.blog-index__card p { font-size: 0.875rem; color: rgb(var(--fg-muted)); margin: 0; line-height: 1.6; }

/* ---------- Pagination ---------- */
.blog-pagination { max-width: 56rem; margin: 2rem auto 0; padding: 0 1rem; }
.blog-pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; }
.blog-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; color: rgb(var(--fg-muted)); background: rgb(var(--bg-card)); border: 1px solid rgb(var(--line)); }
.blog-pagination a.page-numbers:hover { border-color: rgb(var(--line-strong)); color: rgb(var(--fg)); }
.blog-pagination .page-numbers.current { background: rgb(var(--accent)); border-color: rgb(var(--accent)); color: #fff; }
.blog-pagination .page-numbers.dots { border: none; background: none; color: rgb(var(--fg-dim)); }

/* ---------- Post content ---------- */
.post-wrap { max-width: 48rem; margin: 0 auto; padding: 2.5rem 1rem 4rem; }
.post-breadcrumb { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: rgb(var(--fg-dim)); margin-bottom: 1.5rem; }
.post-breadcrumb a:hover { color: rgb(var(--fg)); }
.post-breadcrumb span:last-child { color: rgb(var(--fg)); }
.post-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.post-readtime { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: rgb(var(--fg-muted)); }
.post-thumb { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 0.75rem; border: 1px solid rgb(var(--line)); margin: 1.5rem 0; }
.post-title { font-size: 1.875rem; font-weight: 600; letter-spacing: -0.03em; color: rgb(var(--fg)); margin: 0 0 0.75rem; }
@media (min-width: 768px) { .post-title { font-size: 2.25rem; } }
.post-description { font-size: 1rem; color: rgb(var(--fg-muted)); margin: 0 0 1.25rem; }
.post-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 2rem; font-size: 0.75rem; color: rgb(var(--fg-muted)); }
.post-byline__dot { color: rgb(var(--fg-dim)); }
.post-author-name { font-weight: 600; color: rgb(var(--fg)); }

.post-card { border: 1px solid rgb(var(--line)); border-radius: 0.5rem; background: rgb(var(--bg-card)); box-shadow: var(--card-shadow); }
.post-content { padding: 1.5rem; color: var(--prose-body); line-height: 1.75; }
@media (min-width: 768px) { .post-content { padding: 2rem; } }
.post-content h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; color: var(--prose-headings); margin: 2.25em 0 0.75em; }
.post-content h3 { font-size: 1.2rem; font-weight: 600; color: var(--prose-headings); margin: 2em 0 0.6em; }
.post-content h4 { font-size: 1.05rem; font-weight: 600; color: var(--prose-headings); margin: 1.75em 0 0.4em; }
.post-content p { margin: 1em 0; }
.post-content a { color: var(--prose-links); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(169, 139, 255, 0.4); }
.post-content a:hover { border-bottom-color: #A98BFF; }
.post-content strong { font-weight: 600; color: var(--prose-headings); }
.post-content ul, .post-content ol { margin: 1em 0; padding-left: 1.5rem; color: var(--prose-bullets); }
.post-content li { margin: 0.35em 0; color: var(--prose-body); }
.post-content blockquote { border-left: 3px solid var(--prose-hr); margin: 1.5rem 0; padding: 0.25rem 0 0.25rem 1rem; color: var(--prose-lead); font-style: italic; }
.post-content img { width: 100%; border-radius: 0.5rem; border: 1px solid rgb(var(--line)); margin: 1.4em 0; }
.post-content code { background: var(--prose-inline-code-bg); color: var(--prose-code); padding: 0.15em 0.4em; border-radius: 4px; font-weight: 500; font-size: 0.88em; border: 1px solid var(--prose-inline-code-border); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.post-content pre { background: var(--prose-pre-bg); color: var(--prose-pre-code); border: 1px solid #262626; border-radius: 0.5rem; padding: 1.1em 1.25em; font-size: 0.92rem; line-height: 1.7; margin: 1.4em 0; overflow: auto; }
.post-content pre code { background: transparent; padding: 0; border: none; font-size: 0.9em; color: inherit; font-weight: inherit; }
.post-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95em; }
.post-content th, .post-content td { padding: 0.65em 0.9em; border: 1px solid var(--prose-hr); text-align: left; }
.post-content th { background: rgb(var(--bg-subtle)); font-weight: 600; color: var(--prose-headings); }

/* ---------- Comments ---------- */
.post-comments { margin: 2.5rem 0 0; }
.post-comments > h2 { font-size: 1.25rem; font-weight: 600; color: rgb(var(--fg)); margin-bottom: 1.25rem; }
.comment-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.comment-list li { display: flex; gap: 0.875rem; padding: 1.25rem 0; border-bottom: 1px solid rgb(var(--line)); }
.comment-list li::before { content: attr(data-initial); flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: rgb(var(--bg-subtle)); color: rgb(var(--accent)); font-weight: 700; font-size: 0.875rem; display: flex; align-items: center; justify-content: center; }
.comment-list .post-author-name { font-size: 0.9375rem; }
.comment-list time { display: block; font-size: 0.75rem; color: rgb(var(--fg-dim)); margin: 0.125rem 0 0.5rem; }
.comment-list .comment-body-text { color: rgb(var(--fg-muted)); font-size: 0.9375rem; line-height: 1.6; }
.post-comments .comment-respond { background: rgb(var(--bg-subtle)); border-radius: 0.5rem; padding: 1.75rem; border: 1px solid rgb(var(--line)); }
.comment-reply-title { font-size: 1.125rem; color: rgb(var(--fg)); margin: 0 0 0.375rem; }
.comment-notes { font-size: 0.8125rem; color: rgb(var(--fg-muted)); margin: 0 0 1.25rem; }
.comment-form .required { color: rgb(var(--fg-muted)); }
.comment-form p { margin: 0 0 1rem; }
.comment-form label { display: block; font-size: 0.8125rem; font-weight: 600; color: rgb(var(--fg-muted)); margin-bottom: 0.375rem; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; border: 1px solid rgb(var(--line)); border-radius: 0.375rem; padding: 0.625rem 0.75rem; font: inherit; color: rgb(var(--fg)); background: rgb(var(--bg-subtle));
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: rgb(var(--accent)); box-shadow: 0 0 0 2px rgb(var(--accent) / 0.3); }
.comment-form textarea { min-height: 7rem; resize: vertical; }
@media (min-width: 640px) {
  .comment-form-author, .comment-form-email { display: inline-block; width: calc(50% - 0.5rem); vertical-align: top; }
  .comment-form-author { margin-right: 1rem; }
}
.comment-form .form-submit { margin-top: 1.25rem; margin-bottom: 0; }
.comment-form .form-submit input { background: rgb(var(--accent)); color: #ffffff; border: none; padding: 0.625rem 1.5rem; border-radius: 0.375rem; font-weight: 500; cursor: pointer; }
.comment-form .form-submit input:hover { background: rgb(var(--accent-hover)); }