## Context

#DREAM-696 introduced the `--box-list-item-*` variables for list item hover, selection, hover on selection, and the active work package shown in the split view, and applied them to the Notification center and the work package table (https://github.com/opf/openproject/pull/23458). Boards were not part of that change.

Work package cards still carry their own colours: `--selection-bgColor`, which is Primer's text-selection token rather than a list-selection one, for the selected state — and no hover background at all, since hover only fades in the inline buttons.

## Goal

`wp-single-card` expresses the same interaction states, in the same colours, as the Notification center, the work package table and Backlogs.

* rest border on the shared list item border colour

* a hover background, which cards currently lack entirely

* selection and hover-on-selection on the shared selected backgrounds

* the icon wrapper backgrounds that mirror the card background follow it


## Notes

`wp-single-card` is shared, so this reaches Boards, the work package module's cards view, `wp-grid`, the BIM/BCF list, embedded card tables and Team planner. One set of state colours across the product is the point, but the blast radius is wider than Boards alone.

Out of scope: the fourth state from #DREAM-696, the active work package shown in the split view. Cards have no equivalent — `selectedWhenOpen` collapses it into the ordinary selected state, and Boards seeds its selection from the URL, so a split-view card is indistinguishable from a multi-selected one. Giving cards a distinct state means a new modifier plus selection service wiring, which is a separate decision.

Raised from UX/UI design review of #DREAM-756.

### Hints for QA

Please perform a smoke test of the same screens as touched in <mention class="mention" data-id="77287" data-type="work_package" data-text="#DREAM-756" data-display-id="DREAM-756">#DREAM-756</mention>:

* Begin of the insertion**ProjectEnd of the insertion Begin of the deletion ProjectEnd of the deletion › Work packages — card Begin of the insertiondisplay**: the regular Work packages module rendered as cards instead of the table. There is no UI toggle for it — append `?query_props={"dr":"card"}` to the Work packages URL, e.g. `/projects/<project>/work_packages?query_props=%7B%22dr%22%3A%22card%22%7D`End of the insertion Begin of the deletion displayEnd of the deletion

* Begin of the insertion**ProjectEnd of the insertion Begin of the deletion ProjectEnd of the deletion › Boards › Begin of the insertion\[board\]**End of the insertion Begin of the deletion \[board\]End of the deletion — cards within and between lists

* Begin of the insertion**ProjectEnd of the insertion Begin of the deletion ProjectEnd of the deletion › BCF (BIM Begin of the insertionedition)**End of the insertion Begin of the deletion edition)End of the deletion — Begin of the insertiontheEnd of the insertion Begin of the deletion BCFEnd of the deletion cards Begin of the insertionshown next to the IFC viewer (also in the cards-only and split views of the BCF module)End of the insertion


Begin of the insertionOn each screen, check the card interaction states: rest border, hover background (new — cards previously had none), selection, and hover on selection.End of the insertion The colours Begin of the deletion for interaction statesEnd of the deletion should now align with those used in Backlogs, Begin of the insertiontheEnd of the insertion WP table Begin of the insertionview and the Notification center.End of the insertion Begin of the deletion view, etc.End of the deletion