CSS conflict within a span - can't fix. Any offer a solution?

CSS conflict within a span - can't fix. Any offer a solution?

I have a radio button with text next to and a label wrapped around so that
when the text or button are clicked it becomes active.
When inactive, I want part of the text to be standard colour and some of
the other text a different colour so I have a span inside that span.
Once active, the style changes on the text to make it a bolder font and
all orange. But the inner span goes unaffected.
Can anybody help? Alternative to span on inner text?
<label class="label-name"> <input type="radio" name="group1"
class="class-name" /> <span>Lorem <span
class="light-grey">Ipsum</span></span></label>
&
.class-name input:checked + span {
font-family: "bold-font-family", sans-serif;
color: #f26900 !important;
}
.light-grey {
color: #838383;
display: inline;
}
Styling the whole line of text in a p tag won't work for what I'm doing.