/* ========================================
   Blog Stylesheet
   Unified with frontend design system
   ======================================== */

/* --- Reset & Base --- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Theme Tokens --- */

:root {
  --background: #fafafa;
  --foreground: #171717;
  --surface-1: #f4f4f5;
  --text-secondary: #52525b;
  --text-tertiary: #a1a1aa;
  --text-ghost: #d4d4d8;
  --signal: #22d3ee;
}

.dark {
  --background: #0a0a0a;
  --foreground: #ededed;
  --surface-1: #111113;
  --text-secondary: #a1a1a8;
  --text-tertiary: #63636e;
  --text-ghost: #3f3f47;
  --signal: #22d3ee;
}

/* --- Body --- */

body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Geist", system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

@media (min-width: 640px) {
  main { padding: 3rem 2rem; }
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ========================================
   Site Chrome — Header, Footer, Toggle
   ======================================== */

.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-wrapper > main {
  flex: 1;
}

/* --- Site Header --- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  padding: 1rem 1.5rem;
}

.site-header .wordmark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--foreground);
  text-decoration: none;
}

.site-header .header-login {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-header .header-login:hover {
  color: color-mix(in srgb, var(--foreground) 60%, transparent);
}

.site-header .header-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-header nav a {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-header nav a:hover {
  color: color-mix(in srgb, var(--foreground) 60%, transparent);
}

/* --- Theme Toggle --- */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 44px;
  min-height: 44px;
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 60%, transparent);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover {
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
  color: var(--foreground);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* --- Site Footer --- */

.site-footer {
  border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  padding: 1.5rem;
}

.site-footer-inner {
  max-width: 48rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.site-footer nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.site-footer nav a {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer nav a:hover {
  color: color-mix(in srgb, var(--foreground) 60%, transparent);
}

.site-footer .copyright {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--foreground) 30%, transparent);
}

@media (min-width: 640px) {
  .site-header {
    padding: 1rem 1.5rem;
  }
}

@media (max-width: 639px) {
  .site-header {
    padding: 0.75rem 1rem;
  }
  .site-header .header-nav {
    display: none;
  }
}

/* ========================================
   Blog Hero (Index Page)
   ======================================== */

.blog-hero {
  padding: 4rem 0 2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  margin-bottom: 1rem;
}

.blog-hero h1 {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.blog-hero .tagline {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 32rem;
}

@media (max-width: 639px) {
  .blog-hero {
    padding: 2.5rem 0 1.5rem;
  }
  .blog-hero h1 {
    font-size: 1.75rem;
  }
}

/* ========================================
   Article List (Index Page)
   ======================================== */

.article-list article {
  padding: 1.5rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.article-list article:last-child {
  border-bottom: none;
}

.article-list h2 {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin-bottom: 0.375rem;
}

.article-list h2 a {
  color: var(--foreground);
  text-decoration: none;
  transition: color 0.15s ease;
}

.article-list h2 a:hover {
  color: var(--signal);
}

.article-list time {
  display: block;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  margin-bottom: 0.5rem;
}

.article-list p {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.article-list .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

/* --- Pagination --- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 2rem 0 1rem;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  text-decoration: none;
  color: var(--text-secondary);
  transition: color 0.15s ease, background 0.15s ease;
}

.pagination a:hover {
  color: var(--signal);
  background: color-mix(in srgb, var(--signal) 10%, transparent);
}

.pagination-current {
  font-weight: 700;
  color: var(--signal) !important;
  background: color-mix(in srgb, var(--signal) 12%, transparent);
}

.pagination-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.pagination-ellipsis {
  min-width: auto;
  padding: 0;
  opacity: 0.4;
}

.pagination-prev,
.pagination-next {
  min-width: auto;
  padding: 0 0.75rem;
}

@media (max-width: 639px) {
  .pagination { font-size: 0.75rem; gap: 0.125rem; }
  .pagination a, .pagination span { min-width: 1.75rem; height: 1.75rem; padding: 0 0.375rem; }
}

/* --- Tags --- */

.tag {
  display: inline-block;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1875rem 0.5rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--signal) 15%, transparent);
  color: var(--signal);
}

/* ========================================
   Article Metadata Header
   ======================================== */

.article-meta {
  padding-bottom: 2rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
}

.article-meta .back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
  text-decoration: none;
  transition: color 0.15s ease;
  margin-bottom: 1.5rem;
}

.article-meta .back-link:hover {
  color: color-mix(in srgb, var(--foreground) 60%, transparent);
}

.article-meta h1 {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.article-meta .byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.article-meta .byline .separator {
  color: color-mix(in srgb, var(--foreground) 20%, transparent);
}

.article-meta .article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 1rem;
}

/* Remove extra top padding from markdown body when it follows article metadata */
.article-meta ~ .markdown-body {
  padding-top: 0;
}

@media (max-width: 639px) {
  .article-meta h1 {
    font-size: 1.625rem;
  }
}

/* ========================================
   Markdown Reading Experience
   ======================================== */

.markdown-body {
  --md-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --md-sans: "Geist", system-ui, sans-serif;
  --md-mono: "Geist Mono", ui-monospace, monospace;
  --md-code-bg: #f6f8fa;
  --md-code-border: rgba(0, 0, 0, 0.06);
  --md-inline-code-bg: rgba(0, 0, 0, 0.06);
  --md-inline-code-color: #9a3412;
  --md-blockquote-border: #c08b5c;
  --md-blockquote-bg: rgba(192, 139, 92, 0.06);
  --md-hr-from: transparent;
  --md-hr-mid: rgba(0, 0, 0, 0.15);
  --md-link-color: #92400e;
  --md-link-hover: #78350f;
  --md-table-border: rgba(0, 0, 0, 0.08);
  --md-table-stripe: rgba(0, 0, 0, 0.02);
  --md-marker: #c08b5c;

  padding: 2.5rem 1.5rem;
  animation: md-enter 0.4s ease-out;
}

.dark .markdown-body {
  --md-code-bg: #1a1b26;
  --md-code-border: rgba(255, 255, 255, 0.06);
  --md-inline-code-bg: rgba(255, 255, 255, 0.08);
  --md-inline-code-color: #fbbf24;
  --md-blockquote-border: #b07d50;
  --md-blockquote-bg: rgba(176, 125, 80, 0.08);
  --md-hr-mid: rgba(255, 255, 255, 0.1);
  --md-link-color: #d4a574;
  --md-link-hover: #e0b88a;
  --md-table-border: rgba(255, 255, 255, 0.08);
  --md-table-stripe: rgba(255, 255, 255, 0.03);
  --md-marker: #b07d50;
}

@media (min-width: 640px) {
  .markdown-body { padding: 3rem 2rem; }
}
@media (min-width: 1024px) {
  .markdown-body { padding: 3.5rem 3rem; }
}

@keyframes md-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Body Text — editorial serif --- */

.markdown-body p,
.markdown-body li,
.markdown-body dd,
.markdown-body dt {
  font-family: var(--md-serif);
  font-size: 1.125rem;
  line-height: 1.85;
  letter-spacing: -0.005em;
}

/* --- Headings — crisp sans-serif --- */

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  font-family: var(--md-sans);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.markdown-body h1 {
  font-size: 2.25rem;
  margin-top: 0;
  margin-bottom: 1.25rem;
  letter-spacing: -0.035em;
}

.markdown-body h2 {
  font-size: 1.625rem;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}

.markdown-body h3 {
  font-size: 1.3125rem;
  margin-top: 2.25rem;
  margin-bottom: 0.625rem;
}

.markdown-body h4 {
  font-size: 1.0625rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

/* --- Links --- */

.markdown-body a {
  color: var(--md-link-color);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--md-link-color) 40%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.markdown-body a:hover {
  color: var(--md-link-hover);
  text-decoration-color: var(--md-link-hover);
}

/* --- Blockquotes --- */

.markdown-body blockquote {
  border-left: 3px solid var(--md-blockquote-border);
  background: var(--md-blockquote-bg);
  padding: 0.875rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 0.5rem 0.5rem 0;
  font-style: italic;
}

.markdown-body blockquote p:first-child { margin-top: 0; }
.markdown-body blockquote p:last-child { margin-bottom: 0; }

/* --- Code Blocks --- */

.markdown-body pre {
  background: var(--md-code-bg) !important;
  border: 1px solid var(--md-code-border);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 1.75rem 0;
  font-size: 0.875rem;
  line-height: 1.7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.markdown-body pre code {
  font-family: var(--md-mono) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: inherit;
  color: #24292e;
  border-radius: 0;
}

.dark .markdown-body pre code {
  color: #c0caf5;
}

/* --- Inline Code --- */

.markdown-body :not(pre) > code {
  font-family: var(--md-mono);
  background: var(--md-inline-code-bg);
  color: var(--md-inline-code-color);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.85em;
  font-weight: 500;
  border: none;
}

/* --- Tables --- */

.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-family: var(--md-sans);
  font-size: 0.9375rem;
}

.markdown-body th {
  font-weight: 600;
  text-align: left;
  padding: 0.625rem 1rem;
  border-bottom: 2px solid var(--md-table-border);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

.markdown-body td {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--md-table-border);
}

.markdown-body tbody tr:nth-child(even) {
  background: var(--md-table-stripe);
}

.markdown-body tbody tr:last-child td {
  border-bottom: none;
}

/* --- Horizontal Rules --- */

.markdown-body hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, var(--md-hr-from), var(--md-hr-mid) 20%, var(--md-hr-mid) 80%, var(--md-hr-from));
  margin: 3rem 0;
}

/* --- Lists --- */

.markdown-body ul,
.markdown-body ol {
  padding-left: 1.5rem;
}

.markdown-body li {
  margin: 0.375rem 0;
}

.markdown-body li::marker {
  color: var(--md-marker);
}

.markdown-body li > ul,
.markdown-body li > ol {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* --- Task Lists (GFM) --- */

.markdown-body .contains-task-list {
  list-style: none;
  padding-left: 0;
}

.markdown-body .task-list-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.markdown-body .task-list-item input[type="checkbox"] {
  accent-color: var(--md-blockquote-border);
  margin: 0;
  flex-shrink: 0;
}

/* --- Images --- */

.markdown-body img {
  border-radius: 0.75rem;
  margin: 2rem auto;
  max-width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --- Footnotes --- */

.markdown-body .footnotes {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--md-table-border);
  font-size: 0.875rem;
}

/* --- Strikethrough --- */

.markdown-body del {
  opacity: 0.5;
}

/* ========================================
   Syntax Highlighting — Tokyo Night (dark only)
   ======================================== */

.dark .markdown-body .hljs { color: #c0caf5; }

.dark .markdown-body .hljs-comment,
.dark .markdown-body .hljs-quote { color: #565f89; font-style: italic; }

.dark .markdown-body .hljs-keyword,
.dark .markdown-body .hljs-selector-tag { color: #bb9af7; }

.dark .markdown-body .hljs-string,
.dark .markdown-body .hljs-doctag,
.dark .markdown-body .hljs-addition { color: #9ece6a; }

.dark .markdown-body .hljs-number,
.dark .markdown-body .hljs-literal,
.dark .markdown-body .hljs-regexp { color: #ff9e64; }

.dark .markdown-body .hljs-built_in,
.dark .markdown-body .hljs-type,
.dark .markdown-body .hljs-template-tag { color: #2ac3de; }

.dark .markdown-body .hljs-title,
.dark .markdown-body .hljs-section,
.dark .markdown-body .hljs-name { color: #7aa2f7; }

.dark .markdown-body .hljs-attr,
.dark .markdown-body .hljs-attribute,
.dark .markdown-body .hljs-params { color: #e0af68; }

.dark .markdown-body .hljs-variable,
.dark .markdown-body .hljs-template-variable,
.dark .markdown-body .hljs-subst { color: #c0caf5; }

.dark .markdown-body .hljs-deletion,
.dark .markdown-body .hljs-tag { color: #f7768e; }

.dark .markdown-body .hljs-symbol,
.dark .markdown-body .hljs-bullet,
.dark .markdown-body .hljs-link,
.dark .markdown-body .hljs-property { color: #73daca; }

.dark .markdown-body .hljs-meta,
.dark .markdown-body .hljs-selector-class,
.dark .markdown-body .hljs-selector-id { color: #565f89; }

.dark .markdown-body .hljs-emphasis { font-style: italic; }
.dark .markdown-body .hljs-strong { font-weight: bold; }
.dark .markdown-body .hljs-punctuation { color: #89ddff; }