.site-footer {
  --darkmode-color: var(--color--gray-70--light);
  --darkmode-color-link: var(--color--gray-90--light);
  --darkmode-color-link-hover: white;
  --darkmode-bg-main: var(--color--gray-10--light);
  --darkmode-bg-secondary: var(--color--gray-20--light);
  --darkmode-bg-border: var(--color--gray-20--light);

  color: light-dark(var(--color--gray-65), var(--darkmode-color));
  background: linear-gradient(180deg, light-dark(var(--color--gray-5--light), var(--darkmode-bg-main)) 0%, light-dark(var(--color--gray-10--light), var(--darkmode-bg-secondary)) 100%);
}

.site-footer a {
  color: dark-light(inherit, var(--darkmode-color-link));

  &:is(:hover, :focus) {
    color: dark-light(inherit, var(--darkmode-color-link-hover));
  }
}

@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .site-footer {
    border-color: light-dark(var(--color--black), var(--darkmode-bg-border));
  }
}