:root {
  --primary-color: #0c5c45;
  --accent-color: #8bad24;
  --section-bg: #f2f5ef;
  --footer-bg: #073c30;
  --accent: #0c5c45;
  --accent-soft: #e8f0e9;
  --code-bg: #073c30;
}

html {
  scroll-behavior: smooth;
}

body,
.techblog-page,
.article-page {
  color: #13231d;
  background: #f6f5ee;
}

#header {
  border-bottom-color: #d9ded8;
  box-shadow: 0 8px 28px rgba(7, 60, 48, 0.05);
}

#gNav a:hover,
#gNav a.active {
  border-bottom-color: #0c5c45;
  color: #0c5c45;
}

#gNav a.recruit {
  background: #d76c31;
  border-color: #d76c31;
  color: #ffffff;
}

.techblog-masthead {
  min-height: 590px;
  color: #13231d;
  background: #ffffff;
}

.techblog-masthead__inner {
  padding-top: 72px;
  padding-bottom: 72px;
}

.techblog-masthead .techblog-eyebrow,
.techblog-eyebrow {
  color: #0c5c45;
}

.techblog-masthead h2 {
  color: #13231d;
  font-size: clamp(2.8rem, 5vw, 4.55rem);
}

.techblog-masthead p:last-child {
  color: #506058;
}

.techblog-content {
  background: #f6f5ee;
}

.techblog-post,
.techblog-side-panel,
.techblog-empty {
  border-color: #d9ded8;
  border-radius: 3px;
}

.techblog-post::before {
  background: linear-gradient(135deg, rgba(203, 242, 106, 0.14), rgba(12, 92, 69, 0.09));
}

.techblog-post:hover,
.techblog-post:focus-within {
  border-color: rgba(12, 92, 69, 0.55);
  box-shadow: 0 18px 40px rgba(7, 60, 48, 0.12);
}

.techblog-post__thumb::after,
.techblog-post__thumb--markdown::after {
  background: linear-gradient(135deg, rgba(7, 60, 48, 0.3), rgba(12, 92, 69, 0.14));
}

.techblog-post__tags span {
  background: #e8f0e9;
  color: #0c5c45;
}

.techblog-post:hover .techblog-post__tags span,
.techblog-post:focus-within .techblog-post__tags span {
  background: #0c5c45;
  box-shadow: none;
  color: #ffffff;
  text-shadow: none;
}

.techblog-contact-cta,
.article-bottom-cta__button--contact {
  background: #0c5c45;
  border-color: #0c5c45;
  box-shadow: 0 12px 24px rgba(7, 60, 48, 0.18);
}

.techblog-contact-cta:hover,
.techblog-contact-cta:focus-visible,
.article-bottom-cta__button--contact:hover,
.article-bottom-cta__button--contact:focus-visible {
  background: #073c30;
  border-color: #073c30;
  box-shadow: 0 16px 30px rgba(7, 60, 48, 0.24);
}

.article-bottom-cta__card--contact {
  border-color: rgba(12, 92, 69, 0.28);
  box-shadow: 0 18px 42px rgba(7, 60, 48, 0.1);
}

.article-bottom-cta__card--contact::before {
  background: linear-gradient(135deg, rgba(203, 242, 106, 0.15), rgba(255, 255, 255, 0) 58%);
}

.article-page article > header,
.article-page .markdown-card,
.article-page .toc,
.related-article-card {
  border-color: #d9ded8;
}

.article-page .markdown-body a,
.article-page .toc a:hover {
  color: #0c5c45;
}

#footer {
  background: #073c30;
  border-top-color: rgba(255, 255, 255, 0.18);
  color: #f5faf7;
}

#footer .data,
#footer .data a,
#footer .fNav a {
  color: #f5faf7;
}

#footer .logo {
  box-sizing: content-box;
  display: inline-flex;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 24, 18, 0.18);
}

#footer .logo img {
  display: block;
}

#footer .copyright {
  color: #c6d8d1;
}

#footer .fNav a:hover,
#footer .fNav a:focus-visible,
#footer .fNav a.active {
  border-bottom-color: #cbf26a;
  color: #cbf26a;
  outline: none;
}

#footer .site-footer-instagram a {
  background: #cbf26a;
  border-color: #cbf26a;
  color: #073c30;
}

#footer .site-footer-instagram a:hover,
#footer .site-footer-instagram a:focus-visible {
  background: #f5faf7;
  border-color: #f5faf7;
  color: #073c30;
}

@media (max-width: 900px) {
  .techblog-masthead {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
