:root {
  --global-bg: #fff;
  --card-bg: #fff;
  --font-color: #242424;
  --text-highlight-color: #111;
  --btn-bg: #111;
  --btn-color: #fff;
  --border-color: #ececec;
}

body {
  background: #fff !important;
  color: #242424;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  letter-spacing: .01em;
}

#page-header,
#footer {
  background: #fff !important;
}

#page-header:not(.not-top-img) #nav {
  background: rgba(255, 255, 255, .92);
}

#nav,
#nav a,
#nav #site-name,
#nav .site-page {
  color: #202020 !important;
  text-shadow: none !important;
}

#nav {
  border-bottom: 1px solid #eee;
  box-shadow: none;
  backdrop-filter: blur(12px);
}

#recent-posts > .recent-post-item,
.card-widget,
.layout > div:first-child:not(.recent-posts),
#post {
  border: 1px solid #ededed;
  border-radius: 12px;
  box-shadow: none !important;
}

#recent-posts > .recent-post-item:hover,
.card-widget:hover {
  border-color: #d8d8d8;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .04) !important;
}

a {
  transition: color .2s ease, opacity .2s ease;
}

#article-container a,
.post-meta__tags,
.article-meta__categories {
  color: #555 !important;
  text-decoration-color: #bbb;
}

#footer,
#footer a {
  color: #777 !important;
  text-shadow: none;
}

/* Functional components keep the same restrained visual language. */
#local-search .search-dialog,
.flink .flink-list-item,
.post-copyright,
.relatedPosts-list > div {
  background: #fff !important;
  border: 1px solid #ededed !important;
  box-shadow: none !important;
}

#local-search .search-dialog {
  border-radius: 14px;
}

.local-search-box--input {
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  color: #222 !important;
}

.search-keyword {
  background: #eee !important;
  color: #111 !important;
}

.flink .flink-list-item {
  border-radius: 10px !important;
}

.flink .flink-list-item:hover {
  transform: translateY(-2px) !important;
  border-color: #d5d5d5 !important;
}

.post-copyright {
  border-radius: 10px;
}

#rightside > div > button,
#rightside > div > a {
  background: #222 !important;
  color: #fff !important;
}

#pagination .page-number.current,
#pagination .page-number:hover,
#pagination .extend:hover {
  background: #222 !important;
  color: #fff !important;
}

.card-tag-cloud a,
.card-category-list-link,
.card-archive-list-link {
  color: #555 !important;
}

::selection {
  background: #222;
  color: #fff;
}

@media (max-width: 768px) {
  #recent-posts > .recent-post-item,
  .card-widget,
  .layout > div:first-child:not(.recent-posts),
  #post {
    border-radius: 8px;
  }
}