html[data-theme="dark"] .blog {
  --pink: #df984c;
  --pink-dark: #f0b269;
  --pink-soft: #173641;
  --ink: #f2f6f7;
  --ink-2: #cfdee3;
  --muted: #91afbb;
  --line: #294b58;
  --surface: #0b2833;
  --surface-2: #123440;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .22);
  --shadow: 0 12px 34px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .blog-index {
  --card-ink: #f2f6f7;
  --card-muted: #9db6c0;
  --card-accent: #df984c;
}

html[data-theme="dark"] .article-card,
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .blog-featured,
html[data-theme="dark"] .post-nav a,
html[data-theme="dark"] .post-share a,
html[data-theme="dark"] .post-share button {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .article-card__image,
html[data-theme="dark"] .blog-card__media,
html[data-theme="dark"] .blog-featured__media {
  background: var(--surface-2) !important;
}

html[data-theme="dark"] .article-card h2 a,
html[data-theme="dark"] .article-card h2 a:visited,
html[data-theme="dark"] .blog-card__title a,
html[data-theme="dark"] .post-nav strong {
  color: var(--ink) !important;
}

html[data-theme="dark"] .article-card h2 a:hover,
html[data-theme="dark"] .blog-card__title a:hover,
html[data-theme="dark"] .post-nav a:hover strong {
  color: var(--pink) !important;
}

html[data-theme="dark"] .article-card__body > p,
html[data-theme="dark"] .blog-card__excerpt,
html[data-theme="dark"] .blog-card__foot,
html[data-theme="dark"] .blog-index__header p,
html[data-theme="dark"] .blog-index__notice {
  color: var(--card-muted, var(--muted)) !important;
}

html[data-theme="dark"] .article-card__read {
  color: var(--pink) !important;
  background: transparent !important;
  border-color: var(--pink) !important;
}

html[data-theme="dark"] .article-card__read:hover {
  color: #071f29 !important;
  background: var(--pink) !important;
}

html[data-theme="dark"] .article-card .article-card__badge,
html[data-theme="dark"] .blog-badge {
  color: #071f29 !important;
  background: var(--pink) !important;
  border-color: var(--pink) !important;
}

html[data-theme="dark"] .blog-search input,
html[data-theme="dark"] .blog-chip,
html[data-theme="dark"] .post-tag {
  color: var(--ink-2) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .blog-search input::placeholder {
  color: var(--muted);
}

html[data-theme="dark"] .blog-chip.is-active {
  color: #071f29 !important;
  background: var(--pink) !important;
  border-color: var(--pink) !important;
}

html[data-theme="dark"] .post-title,
html[data-theme="dark"] .post-byline strong,
html[data-theme="dark"] .post-related h2,
html[data-theme="dark"] .post-cta h3,
html[data-theme="dark"] .post-content h2,
html[data-theme="dark"] .post-content h3,
html[data-theme="dark"] .post-content h4,
html[data-theme="dark"] .post-content strong {
  color: var(--ink) !important;
}

html[data-theme="dark"] .post-lede,
html[data-theme="dark"] .post-content,
html[data-theme="dark"] .post-content p,
html[data-theme="dark"] .post-content li,
html[data-theme="dark"] .post-content td,
html[data-theme="dark"] .post-content blockquote {
  color: var(--ink-2) !important;
}

html[data-theme="dark"] .post-byline,
html[data-theme="dark"] .post-crumbs,
html[data-theme="dark"] .post-crumbs a,
html[data-theme="dark"] .post-cover-caption,
html[data-theme="dark"] .post-toc__title,
html[data-theme="dark"] .post-toc a,
html[data-theme="dark"] .post-cta p {
  color: var(--muted) !important;
}

html[data-theme="dark"] .post-cta {
  background: linear-gradient(135deg, #123440, #173641) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .post-cta .btn-cta {
  color: #071f29 !important;
  background: var(--pink) !important;
  box-shadow: none;
}

html[data-theme="dark"] .post-content code {
  color: #f0b269;
  background: #123440;
}

html[data-theme="dark"] .post-content th {
  color: var(--ink) !important;
  background: var(--surface-2) !important;
}

html[data-theme="dark"] .post-content th,
html[data-theme="dark"] .post-content td {
  border-color: var(--line);
}

html[data-theme="dark"] .post-content tbody tr:nth-child(even) {
  background: #0d2c37;
}