:root {
  --dada-accent: #2563eb;
  --dada-accent-2: #0f766e;
  --dada-ink: #172033;
  --dada-muted: #667085;
  --dada-soft: #f6f8fb;
}

body {
  background:
    radial-gradient(circle at 15% 8%, rgba(37, 99, 235, 0.12), transparent 28rem),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 46%, #f8fafc 100%);
  color: var(--dada-ink);
  letter-spacing: 0;
}

.navbar {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-brand {
  font-weight: 600;
}

.banner {
  background-position: center;
}

.banner .h2,
.banner .h1,
.banner .subtitle {
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.board {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.index-card,
.post-content {
  border-radius: 8px;
}

.index-card {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.index-card:hover {
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: 0 20px 44px rgba(37, 99, 235, 0.12);
  transform: translateY(-2px);
}

.index-card .index-header a,
.post-content h1,
.post-content h2,
.post-content h3 {
  color: #0f172a;
}

.post-content h2 {
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  padding-bottom: 0.35rem;
}

.post-content a {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.markdown-body blockquote {
  background: rgba(37, 99, 235, 0.06);
  border-left-color: var(--dada-accent);
  border-radius: 0 8px 8px 0;
}

.markdown-body table {
  overflow: hidden;
  border-radius: 8px;
}

.tagcloud a,
.post-meta a,
.category-chain a {
  border-radius: 999px;
}

footer {
  color: var(--dada-muted);
}

@media (max-width: 767px) {
  .banner {
    min-height: 56vh;
  }

  .board {
    border-radius: 0;
    box-shadow: none;
  }
}

html[data-user-color-scheme='dark'] body {
  background:
    radial-gradient(circle at 15% 8%, rgba(59, 130, 246, 0.2), transparent 28rem),
    linear-gradient(180deg, #111827 0%, #0f172a 48%, #111827 100%);
}

html[data-user-color-scheme='dark'] .board {
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

html[data-user-color-scheme='dark'] .index-card .index-header a,
html[data-user-color-scheme='dark'] .post-content h1,
html[data-user-color-scheme='dark'] .post-content h2,
html[data-user-color-scheme='dark'] .post-content h3 {
  color: #f8fafc;
}