/* Blog palette follows the active site's light/dark theme. */
.blog-page,
.blog-list-section,
.blog-article-page {
  background: var(--background-color) !important;
  color: var(--default-color) !important;
}

.blog-hero {
  background:
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--accent-color), transparent 82%), transparent 31%),
    linear-gradient(135deg, var(--surface-color), var(--background-color)) !important;
}

.blog-hero::after {
  border-color: color-mix(in srgb, var(--accent-color), transparent 72%) !important;
  box-shadow:
    0 0 0 40px color-mix(in srgb, var(--accent-color), transparent 94%),
    0 0 0 80px color-mix(in srgb, var(--accent-color), transparent 97%) !important;
}

.blog-kicker,
.section-kicker,
.blog-card-label,
.blog-card-link,
.blog-back-link,
.blog-article-kicker,
.blog-empty i,
.blog-card-placeholder {
  color: var(--accent-color) !important;
}

.blog-hero h1,
.blog-section-heading h2,
.blog-card-copy h3,
.blog-empty h3,
.blog-article-heading h1,
.blog-article-header h1,
.blog-article-copy h1,
.blog-article-copy h2,
.blog-article-copy h3,
.blog-article-copy h4,
.blog-article-copy strong {
  color: var(--heading-color) !important;
}

.blog-hero p,
.blog-card-copy p,
.blog-empty p,
.blog-article-meta time,
.blog-article-summary,
.blog-article-copy,
.blog-article-modal .modal-body {
  color: var(--default-color) !important;
}

.blog-count {
  border-color: color-mix(in srgb, var(--accent-color), transparent 62%) !important;
  background: color-mix(in srgb, var(--accent-color), transparent 88%) !important;
  color: var(--accent-color) !important;
}

.blog-card,
.blog-empty,
.blog-article-shell,
.blog-article-modal .modal-content {
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%) !important;
  background: var(--surface-color) !important;
}

.blog-card:hover {
  border-color: var(--accent-color) !important;
}

.blog-card-media,
.blog-card-placeholder,
.blog-empty,
.blog-article-modal .modal-header,
.blog-article-copy blockquote {
  background: color-mix(in srgb, var(--accent-color), var(--surface-color) 89%) !important;
}

.blog-card-number {
  color: color-mix(in srgb, var(--accent-color), transparent 67%) !important;
}

.blog-article-dot {
  background-color: var(--accent-color);
}

.blog-empty {
  border-style: dashed !important;
}

.blog-article-copy a,
.blog-card-link:hover,
.blog-back-link:hover {
  color: var(--accent-color) !important;
}

body.site-dark-mode .blog-page,
body.site-dark-mode .blog-hero,
body.site-dark-mode .blog-list-section,
body.site-dark-mode .blog-article-page {
  color: var(--default-color) !important;
}