States

Most design values can change with a block's state, not only its breakpoint. You pick a state, then set the values for it.

• Interaction states, hover and focus, for how a button or link looks as the visitor touches it.
• Pseudo-classes and elements, for finer cases like the first child or a ::before.
• Accessibility states, for visitors whose system asks for reduced motion, higher contrast, or reduced data.

These are the newest piece, picked from a selector in the toolbar. They are for designing the version a preference produces, not for working around it. You cannot use the reduced-motion state to add motion back, and that is the point. It earns its place the other way. A section that leans on motion and looks flat once the motion is gone can get a still alternative that stands on its own. For contrast, you choose the high or low contrast colours yourself rather than leaving them to the browser, and reduced data follows the same idea, a lighter version for a slower connection.