:root {
  --wapoid-blue: #2E617C;
  --wapoid-ink: #17384A;
  --wapoid-cyan: #28B6C7;
  --wapoid-gold: #B8892E;
  --wapoid-orange: #D97A1D;
  --wapoid-pink: #FF4FA3;
  --wapoid-paper: #fff;
  --wapoid-panel: #EEF3F4;
  --wapoid-fog: #D8E1E5;
  --wapoid-white: #fff;
  --wapoid-radius: 8px;
  --wapoid-shadow-soft: 0 18px 50px rgba(23, 56, 74, .12);
  --wapoid-shadow-strong: 0 24px 70px rgba(23, 56, 74, .18);
}

[data-theme="light"] {
  --background-color: var(--wapoid-paper);
  --primary-foreground-color: #3f484e;
  --secondary-foreground-color: var(--wapoid-ink);
  --primary-subtle-color: var(--wapoid-cyan) !important;
  --secondary-subtle-color: var(--wapoid-panel);
  --titles-color: var(--wapoid-ink);
  --link-color: var(--wapoid-blue);
  --primary-border-color: var(--wapoid-fog);
  --secondary-border-color: rgba(23, 56, 74, .12);
  --transparent-background-color: rgba(255, 255, 255, .98);
  --footer-background-color: var(--wapoid-ink);
  --article-shadow-normal: var(--wapoid-shadow-soft);
  --article-shadow-hover: var(--wapoid-shadow-strong);
  --button-shadow-color-normal: rgba(23, 56, 74, .14);
  --button-shadow-color-hover: rgba(23, 56, 74, .22);
  --table-background-color-odd: rgba(215, 224, 229, .28);
  --table-head-border-bottom: rgba(23, 56, 74, .16);
  --toggle-darkmode-background-color: rgba(23, 56, 74, .08);
  --header-menu-gradient-second-color: var(--wapoid-paper);
}

[data-theme="dark"] {
  --background-color: #102b38;
  --primary-foreground-color: #dbe7eb;
  --secondary-foreground-color: var(--wapoid-paper);
  --primary-subtle-color: var(--wapoid-cyan) !important;
  --secondary-subtle-color: rgba(215, 224, 229, .08);
  --titles-color: #f4f0e7;
  --link-color: #6fd8e3;
  --primary-border-color: rgba(215, 224, 229, .18);
  --secondary-border-color: rgba(215, 224, 229, .1);
  --transparent-background-color: rgba(16, 43, 56, .98);
  --footer-background-color: #0b202b;
  --article-shadow-normal: 0 18px 48px rgba(0, 0, 0, .28);
  --article-shadow-hover: 0 26px 70px rgba(0, 0, 0, .36);
  --button-shadow-color-normal: rgba(0, 0, 0, .28);
  --button-shadow-color-hover: rgba(0, 0, 0, .38);
  --table-background-color-odd: rgba(255, 255, 255, .04);
  --table-head-border-bottom: rgba(215, 224, 229, .16);
  --toggle-darkmode-background-color: rgba(255, 255, 255, .08);
  --header-menu-gradient-second-color: rgba(16, 43, 56, .92);
}

body {
  background-color: var(--background-color);
}

a:hover,
.l-post-content a:hover {
  color: var(--wapoid-pink);
}

.m-header {
  border-bottom: 1px solid rgba(23, 56, 74, .1);
}

[data-theme="dark"] .m-header {
  border-bottom-color: rgba(215, 224, 229, .1);
}

.m-button,
.m-input,
.m-icon-button.filled,
.m-article-card,
.m-article-card:before,
.m-article-card__picture,
.m-article-card__picture img,
.m-article-card__info {
  border-radius: var(--wapoid-radius);
}

.m-button.primary {
  background-color: var(--wapoid-cyan);
  color: var(--wapoid-ink);
}

.m-button.primary:hover {
  background-color: var(--wapoid-pink);
  color: var(--wapoid-white);
}

.m-button.outlined {
  border-color: currentColor;
  color: var(--link-color);
}

.m-article-card {
  border-color: rgba(23, 56, 74, .08);
}

[data-theme="dark"] .m-article-card {
  border-color: rgba(215, 224, 229, .1);
}

.m-article-card__tag,
.m-tags li a,
.m-author__name {
  color: var(--link-color);
}

.m-article-card__title,
.m-recent-article__title {
  color: var(--link-color);
  transition: color .18s ease;
}

.m-article-card__excerpt {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--primary-foreground-color);
  display: -webkit-box;
  font-size: .95rem;
  line-height: 1.42;
  margin: 10px 0 0;
  max-height: 2.7em;
  opacity: .82;
  overflow: hidden;
}

.m-article-card:hover .m-article-card__title,
.m-article-card__info-link:hover .m-article-card__title,
.m-recent-article:hover .m-recent-article__title {
  color: var(--wapoid-pink);
}

.m-featured-slider__counter,
.m-article-card__featured span {
  color: var(--wapoid-ink);
}

.m-footer {
  background-color: var(--footer-background-color);
}

.m-subscribe-section {
  background-color: var(--wapoid-panel);
}

.l-post-content a {
  color: var(--link-color);
  text-decoration-color: color-mix(in srgb, var(--link-color) 45%, transparent);
}

::selection {
  background-color: var(--wapoid-gold);
  color: var(--wapoid-ink);
}