/* Dark mode: the site's own colour variables, flipped. Toggled by /theme.js. */
html[data-theme="dark"] {
  --white: #0b0b0b;
  --black: #f2f2f2;
  --blue: #f2f2f2;
  --grey: #9a9a9a;
  --light-grey: #5c5c5c;
  --_primitives---colors--white: #0b0b0b;
  --_primitives---colors--neutral-darkest: #f2f2f2;
  color-scheme: dark;
}
html[data-theme="dark"] body { background-color: var(--white); color: var(--black); }

/* The toggle: sized like the X icon beside it. */
.theme-toggle { background: none; border: 0; padding: 0; cursor: pointer; color: var(--black); display: flex; align-items: center; justify-content: center; }
.theme-toggle svg { width: 100%; height: 100%; }
.theme-toggle .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
.theme-toggle.is-mobile { display: none; }
@media screen and (max-width: 479px) {
  .theme-toggle.is-mobile { display: flex; margin-left: auto; margin-right: 0.75em; }
}

/* Spots the variables alone do not reach. */
html[data-theme="dark"] .brand svg image { filter: invert(1); }
html[data-theme="dark"] .brand svg text { fill: #f2f2f2; }
html[data-theme="dark"] .site-dots_bg { opacity: 0.35; }
html[data-theme="dark"] .footer-section,
html[data-theme="dark"] .exp-block { --white: #f2f2f2; --blue: #161616; --black: #161616; }
html[data-theme="dark"] .footer-section { border-top: 1px dashed var(--light-grey); }
html[data-theme="dark"] .insight-link { background-color: rgba(22, 22, 22, 0.85); }
html[data-theme="dark"] .contact-form_wrapper { background-color: #161616; }
html[data-theme="dark"] .chp-video { filter: invert(1); }
html[data-theme="dark"] .chp-progress { background-color: rgba(242, 242, 242, 0.25); }