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

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-hero,
body.dark-mode .vita-portrait,
body.dark-mode .vita-portrait img,
body.dark-mode .vita-list li,
body.dark-mode .vita-link-note,
body.dark-mode .vita-term,
body.dark-mode .vita-visit,
body.dark-mode .vita-tags span,
body.dark-mode .contact-input,
body.dark-mode .contact-textarea,
body.dark-mode .contact-submit,
body.dark-mode .image-slider {
  border-color: rgba(243, 239, 230, 0.55);
}

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

body.dark-mode .content-body p a {
  color: var(--ink);
}

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) 42%, #000 75%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 42%, #000 75%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 42%, #000 75%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 42%, #000 75%);
  mask-composite: intersect;
}

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

body.dark-mode .vita-hero {
  background: linear-gradient(120deg, #17140f 0%, #1f1a14 50%, #17140f 100%);
  box-shadow: 10px 10px 0 rgba(243, 239, 230, 0.3);
}

body.dark-mode .vita-portrait {
  background: #1f1a14;
}

body.dark-mode .vita-tags span,
body.dark-mode .contact-input,
body.dark-mode .contact-textarea {
  background: #1b1812;
  color: var(--ink);
}

body.dark-mode .contact-input::placeholder,
body.dark-mode .contact-textarea::placeholder {
  color: rgba(243, 239, 230, 0.45);
}

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

body.dark-mode .slider-arrow,
body.dark-mode .lightbox-nav {
  background: rgba(243, 239, 230, 0.9);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

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

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

body.dark-mode .lightbox-image,
body.dark-mode .lightbox-close {
  background: #1b1812;
}

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

.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: calc(16px * var(--font-scale));
  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-toggle {
  background: rgba(20, 18, 14, 0.9);
  border-color: rgba(243, 239, 230, 0.5);
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}