:root {
  --accent: var(--blog-accent, #2b6ef2);
  --shadow-sm: 0 10px 28px rgba(21, 34, 58, 0.08);
  --shadow-md: 0 18px 38px rgba(21, 34, 58, 0.14);
}

.blog-card,
.post-card,
.post-full {
  background: color-mix(in srgb, var(--surface) 94%, #ffffff);
}

.topbar {
  border-width: 1px;
}

.post-card:hover,
.blog-card:hover {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
}

html[data-theme="dark"] {
  --bg: #121212;
  --surface: #1e1e1e;
  --surface-soft: #252525;
  --text: #e4e4e4;
}