:root {
  --theme-transition: 520ms ease;
}

body.theme-switching .theme-transition-overlay {
  opacity: 1;
  transition: opacity 180ms ease !important;
}

body.theme-switching *,
body.theme-switching *::before,
body.theme-switching *::after {
  transition: none !important;
  animation: none !important;
}

.theme-transition-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: var(--paper);
  transition: opacity 180ms ease;
  z-index: 10000;
}

html.dark-mode,
body.dark-mode {
  --ink: #f3efe6;
  --paper: #14120e;
  --highlight: limegreen;
  color: var(--ink);
  color-scheme: dark;
  background-color: var(--paper);
  background-image: none;
}

body.dark-mode .navbar,
body.dark-mode .navbar::before {
  /* background-color: var(--paper); */
  background-image: none;
}

body {
  transition: background var(--theme-transition), background-color var(--theme-transition), color var(--theme-transition),
    border-color var(--theme-transition), box-shadow var(--theme-transition);
}

body,
body * {
  transition: background-color var(--theme-transition), color var(--theme-transition), border-color var(--theme-transition),
    box-shadow var(--theme-transition);
}

body .panel-image-fade,
body .content-header {
  transition: background var(--theme-transition), background-color var(--theme-transition);
}

body.dark-mode ::selection {
  background: rgba(50, 205, 50, 0.45);
  color: #08140d;
}

body.dark-mode .accordion-item,
body.dark-mode .navbar,
body.dark-mode .more-button,
body.dark-mode .vita-list li,
body.dark-mode .vita-term,
body.dark-mode .vita-visit,
body.dark-mode .image-slider {
  border-color: rgba(243, 239, 230, 0.55);
}

body.dark-mode .vita-principles-close {
  background: transparent;
  color: #f3efe6;
  border-color: transparent;
}

body.dark-mode .vita-principles-sheet {
  background: transparent;
  border-color: transparent;
  color: #f3efe6;
}

body.dark-mode .lightbox-source {
  color: #f3efe6;
}

body.dark-mode .image-source-badge {
  color: #08140d;
}

body.dark-mode .lightbox-source.is-missing {
  color: rgba(243, 239, 230, 0.5);
}

body.dark-mode .image-source-badge.is-missing {
  background: #595959;
  color: rgba(243, 239, 230, 0.6);
}

body.dark-mode .content-body h2::after {
  background: rgba(243, 239, 230, 0.6);
}

body.dark-mode .content-body p a,
body.dark-mode .vita-body p a,
body.dark-mode .vita-intro a,
body.dark-mode .vita-list-intro a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

body.dark-mode .content-body p a:hover,
body.dark-mode .vita-body p a:hover,
body.dark-mode .vita-intro a:hover,
body.dark-mode .vita-list-intro a:hover {
  color: var(--highlight);
}

body.dark-mode .content-quote {
  background: transparent;
}

body.dark-mode .panel-image-box {
  background-color: #1c1812;
  -webkit-mask-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 22%, #000 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 22%, #000 55%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 22%, #000 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 22%, #000 55%);
  mask-composite: intersect;
}

body.dark-mode .panel-image-fade {
  background: transparent;
}

body.dark-mode .more-button:hover {
  color: #08140d;
}

body.dark-mode .slider-arrow,
body.dark-mode .lightbox-nav {
  background: transparent;
  box-shadow: none;
  border: none;
}

body.dark-mode .slider-arrow .material-symbols-outlined {
  color: #14120e;
}

body.dark-mode .lightbox-nav .material-symbols-outlined {
  color: #f3efe6;
}

body.dark-mode .lightbox {
  background: rgba(8, 7, 6, 0.58);
}

body.dark-mode .lightbox-image,
body.dark-mode .lightbox-close {
  background: transparent;
}

body.dark-mode .page-ornament img {
  filter: invert(0.9) brightness(1.05);
}

body.dark-mode .theme-transition-overlay {
  background: var(--paper);
}

.theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 17, 0.6);
  background: rgba(255, 255, 255, 0.7);
  padding: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  transition: background 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
  z-index: 9999;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 3px;
}

.theme-toggle-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1), background 320ms ease, box-shadow 320ms ease;
}

.theme-toggle-thumb::before {
  content: "☀️";
}

body.dark-mode .theme-toggle {
  background: rgba(20, 18, 14, 0.9);
  border-color: rgba(243, 239, 230, 0.5);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}

body.dark-mode .theme-toggle-thumb {
  transform: translateX(22px);
  background: transparent;
}

body.dark-mode .theme-toggle-thumb::before {
  content: "🌙";
}

body.dark-mode .vita-visit::before {
  border: 2px solid var(--ink);
  background: var(--ink);
}

body.dark-mode .vita-visit::after {

  background: var(--ink);
}