:root{
  --bg: #f9f9f9;
  --fg: #0d0d0d;
  --overlay-bg: rgba(255,255,255,0.98);
}

html[data-bs-theme="dark"]{
  --bg: #2D2D30;
  --fg: #ffffff;
  --overlay-bg: rgba(0,0,0,0.9);
}

html[data-bs-theme="light"]{
  --bg: #f9f9f9;
  --fg: #0d0d0d;
  --overlay-bg: rgba(255,255,255,0.98);
}

html,body{
  background-color: var(--bg);
  color: var(--fg);
}

#pjax-overlay{
  position: fixed;
  inset: 0;
  background: var(--bg);
  transition: opacity .12s ease-in-out, visibility .12s;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  pointer-events: none;
}

#pjax-overlay.visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.pjax-loading{
  overflow: hidden;
}

/* keep a minimal transition for color changes to avoid perceptible flash */
*{transition: color .12s ease, background-color .12s ease}