/*
 * Yuhan Zheng's blog visual system
 * Botanical green + technology teal + warm gold
 */

:root {
  --yuhan-green: #2e7d5b;
  --yuhan-green-deep: #1f5c43;
  --yuhan-teal: #27a9a1;
  --yuhan-gold: #f2b84b;
  --yuhan-ink: #20302a;
  --yuhan-muted: #6f8179;
  --yuhan-surface: rgba(255, 255, 255, 0.88);
  --yuhan-border: rgba(46, 125, 91, 0.12);
  --yuhan-shadow: 0 12px 32px rgba(28, 72, 55, 0.09);
  --yuhan-shadow-hover: 0 18px 42px rgba(28, 72, 55, 0.16);
  --card-bg: var(--yuhan-surface);
  --font-color: var(--yuhan-ink);
  --text-highlight-color: var(--yuhan-green);
}

[data-theme='dark'] {
  --yuhan-ink: #d9e7e1;
  --yuhan-muted: #9bb0a7;
  --yuhan-surface: rgba(20, 33, 29, 0.9);
  --yuhan-border: rgba(117, 203, 169, 0.15);
  --yuhan-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
  --yuhan-shadow-hover: 0 18px 42px rgba(0, 0, 0, 0.34);
  --card-bg: var(--yuhan-surface);
  --font-color: var(--yuhan-ink);
}

body {
  background:
    radial-gradient(circle at 8% 2%, rgba(39, 169, 161, 0.09), transparent 30rem),
    radial-gradient(circle at 92% 12%, rgba(242, 184, 75, 0.07), transparent 28rem),
    #f6faf8;
}

[data-theme='dark'] body {
  background:
    radial-gradient(circle at 8% 2%, rgba(39, 169, 161, 0.1), transparent 30rem),
    radial-gradient(circle at 92% 12%, rgba(242, 184, 75, 0.05), transparent 28rem),
    #101a18;
}

::selection {
  color: #10231c;
  background: rgba(138, 214, 197, 0.75);
}

#page-header::before {
  background: linear-gradient(120deg, rgba(10, 35, 28, 0.56), rgba(18, 74, 62, 0.3));
}

#page-header #site-title,
#page-header #site-subtitle {
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.35);
}

#page-header.nav-fixed #nav {
  background: rgba(246, 250, 248, 0.86);
  border-bottom: 1px solid var(--yuhan-border);
  backdrop-filter: blur(16px) saturate(140%);
}

[data-theme='dark'] #page-header.nav-fixed #nav {
  background: rgba(16, 26, 24, 0.86);
}

#nav .site-page,
#nav #site-name {
  font-weight: 600;
  letter-spacing: 0.02em;
}

#recent-posts > .recent-post-item,
#aside-content .card-widget,
.layout > div:first-child:not(.recent-posts),
.article-sort-item {
  border: 1px solid var(--yuhan-border);
  box-shadow: var(--yuhan-shadow);
  backdrop-filter: blur(12px);
}

#recent-posts > .recent-post-item,
#aside-content .card-widget {
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

#recent-posts > .recent-post-item:hover,
#aside-content .card-widget:hover {
  border-color: rgba(39, 169, 161, 0.28);
  box-shadow: var(--yuhan-shadow-hover);
  transform: translateY(-4px);
}

#recent-posts > .recent-post-item .post_cover img.post_bg {
  transition: transform 0.55s ease, filter 0.35s ease;
}

#recent-posts > .recent-post-item:hover .post_cover img.post_bg {
  filter: saturate(1.06) contrast(1.02);
  transform: scale(1.045);
}

#recent-posts > .recent-post-item > .recent-post-info > .article-title {
  color: var(--yuhan-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}

#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap,
.post-meta-date,
.article-meta {
  color: var(--yuhan-muted);
}

#aside-content .card-info .author-info-name {
  color: var(--yuhan-ink);
  font-weight: 700;
}

#aside-content .card-info #card-info-btn {
  background: linear-gradient(135deg, var(--yuhan-green), var(--yuhan-teal));
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(46, 125, 91, 0.2);
}

#aside-content .card-info #card-info-btn:hover {
  box-shadow: 0 10px 24px rgba(46, 125, 91, 0.3);
  transform: translateY(-2px);
}

#article-container {
  color: var(--yuhan-ink);
  font-size: 16px;
  line-height: 1.85;
}

#article-container h1,
#article-container h2,
#article-container h3,
#article-container h4 {
  color: var(--yuhan-ink);
  font-weight: 700;
  letter-spacing: -0.015em;
}

#article-container h2 {
  border-bottom: 1px solid var(--yuhan-border);
  padding-bottom: 0.45em;
}

#article-container a {
  text-decoration-color: rgba(39, 169, 161, 0.4);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

#article-container blockquote {
  border-left: 4px solid var(--yuhan-green);
  border-radius: 0 12px 12px 0;
  background: rgba(46, 125, 91, 0.07);
}

#article-container code {
  border: 1px solid var(--yuhan-border);
  border-radius: 5px;
}

#article-container img {
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(28, 72, 55, 0.12);
}

#article-container table {
  overflow: hidden;
  border-radius: 10px;
}

#article-container table thead {
  background: rgba(46, 125, 91, 0.1);
}

.pagination .page-number.current {
  background: linear-gradient(135deg, var(--yuhan-green), var(--yuhan-teal));
  box-shadow: 0 6px 14px rgba(46, 125, 91, 0.22);
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: linear-gradient(180deg, var(--yuhan-teal), var(--yuhan-green));
}

@media screen and (max-width: 768px) {
  #recent-posts > .recent-post-item:hover,
  #aside-content .card-widget:hover {
    transform: none;
  }

  #article-container {
    font-size: 15.5px;
    line-height: 1.78;
  }
}