By default, all styles are unlayered. When adopted into a shadow tree, these styles continue to stay unlayered but are placed after the shadow root's own styles.
To deprioritize some styles, they can be explicitly put in a layer. For
example, you might put the default styles for your
buttons inside @layer defaults.
Later, you can use shadow DOM for adding more opinionated styles to the buttons. These styles will automatically take priority over the page defaults.
And finally, you can use unlayered (or higher-priority layered) page styles to customize the button even further.