:root{
  --spx-theme-green:#2ca946;
  --spx-theme-green-dark:#23863a;
  --spx-theme-topbar-dark:#222222;
  --spx-theme-surface-dark:#2b2b2b;
  --spx-theme-surface-dark-2:#232323;
  --spx-theme-page-dark:#2f2f2f;
  --spx-theme-text-dark:#ffffff;

  --spx-theme-topbar-light:#ffffff;
  --spx-theme-surface-light:#ffffff;
  --spx-theme-surface-light-2:#f5f7f8;
  --spx-theme-page-light:#eef2f4;
  --spx-theme-page-light-2:#e6ebee;
  --spx-theme-text-light:#1f2933;
  --spx-theme-text-light-soft:#4b5563;
  --spx-theme-border-light:rgba(31,41,51,.10);
}

.spx-logo .spx-logo-darkmode{
  display:block !important;
  max-height:54px;
  width:auto;
}

.spx-logo .spx-logo-lightmode{
  display:none !important;
  max-height:54px;
  width:auto;
}

body.light-theme .spx-logo .spx-logo-darkmode{
  display:none !important;
}

body.light-theme .spx-logo .spx-logo-lightmode{
  display:block !important;
}

.spx-topbar .spx-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.spx-theme-toggle{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0 0 0 auto;
  cursor:pointer;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.spx-theme-toggle-track{
  width:46px;
  height:24px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.18);
  position:relative;
  transition:background .18s ease, border-color .18s ease;
  display:block;
}

.spx-theme-toggle-thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#ffffff;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  transition:left .18s ease, background .18s ease;
}

.spx-theme-toggle[aria-pressed="true"] .spx-theme-toggle-track{
  background:#99C336;
  border-color:#99C336;
}

.spx-theme-toggle[aria-pressed="true"] .spix-theme-toggle-thumb,
.spx-theme-toggle[aria-pressed="true"] .spx-theme-toggle-thumb{
  left:24px;
}

.spx-theme-toggle:focus-visible .spx-theme-toggle-track{
  outline:2px solid rgba(255,255,255,.7);
  outline-offset:2px;
}

/* LIGHT THEME ROOT */
html.light-theme,
body.light-theme{
  background:var(--spx-theme-page-light) !important;
  color:var(--spx-theme-text-light) !important;
}

/* ONLY topbar/logo/footer switch, DO NOT TOUCH GREEN MENU */
body.light-theme .spx-topbar{
  background:var(--spx-theme-topbar-light) !important;
  border-bottom:1px solid var(--spx-theme-border-light);
}

body.light-theme .spx-logo img{
  filter:brightness(0) saturate(100%) invert(17%) sepia(7%) saturate(971%) hue-rotate(169deg) brightness(94%) contrast(90%);
}

body.light-theme .spx-theme-toggle-track{
  background:rgba(31,41,51,.10);
  border-color:rgba(31,41,51,.12);
}

body.light-theme .spx-theme-toggle-thumb{
  background:#1f2933;
}

body.light-theme .spx-theme-toggle:focus-visible .spx-theme-toggle-track{
  outline:2px solid rgba(31,41,51,.35);
}

/* Footer lighter, branding intact */
body.light-theme .spx-footer{
  background:var(--spx-theme-page-light-2) !important;
  color:var(--spx-theme-text-light) !important;
  border-top-color:#99C336 !important;
}

body.light-theme .spx-footer-col h5{
  color:#2ca946 !important;
}

body.light-theme .spx-footer-col a,
body.light-theme .spx-footer-copy{
  color:var(--spx-theme-text-light) !important;
}

body.light-theme .spx-footer-col a:hover{
  color:#2ca946 !important;
}

body.light-theme .spx-footer-line{
  background:rgba(31,41,51,.18) !important;
}

body.light-theme .spx-footer-socials a{
  background:rgba(31,41,51,.08) !important;
  color:var(--spx-theme-text-light) !important;
}

body.light-theme .spx-footer-socials a:hover{
  background:#99C336 !important;
  color:#1f2933 !important;
}


/* LIGHT THEME: content links dark, hover green */
body.light-theme .spix-hostfact-content a,
body.light-theme .spix-hostfact-page a,
body.light-theme .u-body a,
body.light-theme main a{
  color:#1f2933 !important;
}

body.light-theme .spix-hostfact-content a:hover,
body.light-theme .spix-hostfact-page a:hover,
body.light-theme .u-body a:hover,
body.light-theme main a:hover{
  color:#2ca946 !important;
}

/* LIGHT THEME: DO NOT TOUCH HEADER / MENU COLORS */
body.light-theme .spx-header,
body.light-theme .spx-navbar,
body.light-theme .spx-strip,
body.light-theme .spx-navwrap,
body.light-theme .spx-menu,
body.light-theme .spx-item,
body.light-theme .spix-hf-menu-wrap{
  color:#ffffff !important;
}

body.light-theme .spx-header a,
body.light-theme .spx-header a:visited,
body.light-theme .spx-header a:hover,
body.light-theme .spx-header a:focus,
body.light-theme .spx-header a:active,
body.light-theme .spx-navbar a,
body.light-theme .spx-navbar a:visited,
body.light-theme .spx-navbar a:hover,
body.light-theme .spx-navbar a:focus,
body.light-theme .spx-navbar a:active,
body.light-theme .spx-menu a,
body.light-theme .spx-menu a:visited,
body.light-theme .spx-menu a:hover,
body.light-theme .spx-menu a:focus,
body.light-theme .spx-menu a:active,
body.light-theme .spix-hf-menu-wrap,
body.light-theme .spix-hf-menu-wrap a,
body.light-theme .spix-hf-menu-wrap a:visited,
body.light-theme .spix-hf-menu-wrap a:hover,
body.light-theme .spix-hf-menu-wrap a:focus,
body.light-theme .spix-hf-menu-wrap a:active,
body.light-theme .spix-hf-link,
body.light-theme .spix-hf-link:hover,
body.light-theme .spix-hf-link:focus,
body.light-theme .spix-hf-link.active,
body.light-theme .spix-hf-hello,
body.light-theme .spix-hf-nav-dropdown summary{
  color:#ffffff !important;
}