/* =============================================
   Meirong.dev — Lively warm dark theme
   ============================================= */
:root {
  --background: #111827;
  --foreground: #f1f5f9;
  --accent: #f59e0b;
  --accent-secondary: #8b5cf6;
  --accent-tertiary: #10b981;
  --surface: rgba(30, 41, 59, 0.7);
  --surface-hover: rgba(51, 65, 85, 0.6);
  --border: rgba(148, 163, 184, 0.12);
  --text-muted: rgba(241, 245, 249, 0.55);
  --radius: 10px;
}

/* ── Global refinements ── */
body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
}

/* Logo — gradient accent */
.logo a {
  background: linear-gradient(135deg, var(--accent) 0%, #f97316 100%) !important;
  color: var(--background) !important;
  font-weight: 800;
  border-radius: 6px;
  padding: 0 12px;
}

/* Navigation menu items — subtle hover */
.navigation-menu li a:hover {
  color: var(--accent) !important;
}

/* Post title on single/list — warm accent underline */
.post .post-title a {
  border-bottom-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.post .post-title a:hover {
  border-bottom-color: var(--accent);
}

/* Tags — colorful pills */
.post-tags a {
  color: var(--accent) !important;
  transition: color 0.2s ease;
}
.post-tags a:hover {
  color: #f97316 !important;
}

/* Buttons — lively gradient */
.button {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}
.button:hover {
  background: var(--accent) !important;
  color: var(--background) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--background);
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.4);
}

/* Selection color */
::selection {
  background: rgba(245, 158, 11, 0.3);
  color: var(--foreground);
}

/* Code blocks — slightly warmer surface */
.highlight pre {
  border-radius: 8px !important;
}

/* Footer */
.footer {
  opacity: 0.7;
  transition: opacity 0.2s;
}
.footer:hover {
  opacity: 1;
}

/* Header dotted line — accent gradient */
.header__right {
  background-image: repeating-linear-gradient(
    90deg,
    var(--accent),
    var(--accent) 2px,
    transparent 0,
    transparent 10px
  ) !important;
}