css dark mode toggler not handling child classes

The mode for displaying web pages is set via the following code:

<label for="color-mode" style='padding-left: 5px; padding-top: 7px; color: #dad9d9;' >
  <span class="dark-mode-hide"><%= fa_icon('moon-o', class: 'fa-2x') %></span>
  <span class="light-mode-hide"><%= fa_icon('moon-o', class: 'fa-2x') %></span>
</label>
<input id="color-mode" type="checkbox" name="color-mode" style='display: none; padding: 0;' >
<div class="color-scheme-wrapper">
  yield...
</div>

Root variables set the colors and the toggle appropriately for background and character colors

:root {
  --bg: #dad9d9;
  --text: #2a2a28;
  --alert_color: #e2001a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2a2a28;
    --text: #dad9d9;
    &.alert { color: #f2773b; }
  }
}
 
#color-mode {
  width: 100%;
  padding: 0;
  border: 0px solid;
}
#color-mode:checked ~ * {
  --bg: #2a2a28;
  --text: #dad9d9;
  &.alert { color: #f2773b; }
}
@media (prefers-color-scheme: dark) {
  #color-mode:checked ~ * {
    --bg: #dad9d9;
    --text: #2a2a28;
    &.alert { color: #f2773b; }
  }
}

.alert {
  color: var(--alert_color);
}

However, class alert (used for links) is only being processed by the alert class definition, i.e. it stays constant.

How can any subclass be defined in the color-mode:checked block and thus be applied in that context