css darkish mode toggler not dealing with baby lessons

The mode for displaying internet pages is ready by way of the next code:

<label for="color-mode" model="padding-left: 5px; padding-top: 7px; coloration: #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>
<enter id="color-mode" kind="checkbox" title="color-mode" model="show: none; padding: 0;" >
<div class="color-scheme-wrapper">
  yield...
</div>

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

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

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

Nonetheless, class alert (used for hyperlinks) is simply being processed by the alert class definition, i.e. it stays fixed.

How can any subclass be outlined within the color-mode:checked block and thus be utilized in that context