:root {
  --blog-ink: #14201c;
  --blog-muted: #5d6965;
  --blog-line: #dce5df;
  --blog-paper: #fbfcf7;
  --blog-surface: #ffffff;
  --blog-mint: #dff5df;
  --blog-green: #117c5f;
  --blog-green-dark: #07523f;
  --blog-gold: #f2c14e;
  --blog-shadow: 0 20px 50px rgba(15, 43, 34, 0.12);
}

body.bg-slate-950,
body {
  background: var(--blog-paper) !important;
  color: var(--blog-ink) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

#siteHeader header,
header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 252, 247, 0.92) !important;
  border-bottom: 1px solid var(--blog-line);
  backdrop-filter: blur(16px);
}

#siteHeader nav.glass,
.site-header {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#siteHeader .shadow-glow,
#siteFooter .shadow-glow {
  box-shadow: none !important;
}

#siteHeader img,
#siteFooter img {
  border-radius: 8px !important;
}

#siteHeader a,
#siteHeader button,
#siteFooter a {
  color: var(--blog-muted) !important;
}

#siteHeader a:hover,
#siteHeader button:hover,
#siteFooter a:hover,
.article a,
.text-accent {
  color: var(--blog-green) !important;
}

#siteHeader [class*="bg-accent"],
a[class*="bg-accent"],
button[class*="bg-accent"] {
  background: var(--blog-green-dark) !important;
  color: #ffffff !important;
}

#siteHeader [class*="border-slate"],
#siteFooter [class*="border-slate"],
.article [class*="border-slate"],
.article [class*="border-accent"] {
  border-color: var(--blog-line) !important;
}

#siteHeader [class*="bg-slate"],
#siteFooter [class*="bg-slate"],
.article [class*="bg-slate"] {
  background: var(--blog-surface) !important;
  color: var(--blog-ink) !important;
  box-shadow: var(--blog-shadow);
}

#mobileMenu {
  background: var(--blog-paper) !important;
}

.article {
  max-width: 820px !important;
  color: var(--blog-ink) !important;
}

.article h1,
.article h2,
.article h3,
.article strong,
#siteHeader strong,
#siteFooter .font-semibold,
#siteFooter .text-slate-100 {
  color: var(--blog-ink) !important;
}

.article h1 {
  letter-spacing: 0 !important;
  line-height: 1.04 !important;
}

.article-date {
  margin-top: 1rem !important;
  color: var(--blog-green) !important;
  font-size: 0.88rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
}

.article p,
.article li,
.article td,
.article th,
.article .text-lg,
#siteHeader .text-slate-300,
#siteHeader .text-slate-400,
#siteFooter .text-slate-300,
#siteFooter .text-slate-400 {
  color: var(--blog-muted) !important;
}

.article section,
.article div[class*="rounded"],
.article table,
.article pre {
  border-radius: 8px !important;
}

.article div[class*="bg-accent/10"],
.article section[class*="bg-accent/10"] {
  background: var(--blog-mint) !important;
  border-color: rgba(17, 124, 95, 0.25) !important;
  color: var(--blog-ink) !important;
}

.article div[class*="bg-accent/10"] p,
.article div[class*="bg-accent/10"] h2,
.article section[class*="bg-accent/10"] p,
.article section[class*="bg-accent/10"] h2 {
  color: var(--blog-ink) !important;
}

.article div[class*="bg-accent/10"] a:not([class*="bg-accent"]),
.article section[class*="bg-accent/10"] a:not([class*="bg-accent"]) {
  color: var(--blog-green-dark) !important;
}

.article a[class*="bg-accent"] {
  background: var(--blog-green-dark) !important;
  color: #ffffff !important;
}

#siteFooter footer,
footer.site-footer {
  background: #eef5ee !important;
  color: var(--blog-ink) !important;
  border-top: 1px solid var(--blog-line) !important;
}

#siteFooter footer {
  padding: 30px clamp(18px, 5vw, 72px) !important;
}

#siteFooter .max-w-6xl {
  max-width: none !important;
}

.focus-ring:focus-visible {
  outline: 2px solid var(--blog-green) !important;
  outline-offset: 2px;
}