/* v2.1 shared states: sample and live selector use identical declarations. */
.button:hover,.button[data-state="hover"]{background:var(--surface);color:var(--navy)}
.button.primary:hover,.button.primary[data-state="hover"]{background:var(--blue);color:var(--white);border-color:var(--blue)}
.button:active,.button[data-state="active"],.button.primary:active,.button.primary[data-state="active"]{background:var(--navy);color:var(--white);transform:translateY(1px)}
.button:focus-visible,.button[data-state="focus"]{outline:var(--focus-width) solid var(--blue);outline-offset:var(--focus-offset)}
.dark .button{background:transparent;border-color:var(--white);color:var(--white)}
.dark .button.primary{background:var(--teal);border-color:var(--teal);color:var(--navy)}
.dark .button:hover,.dark .button[data-state="hover"]{background:var(--white);color:var(--navy)}
.dark .button.primary:hover,.dark .button.primary[data-state="hover"]{background:var(--white);border-color:var(--white);color:var(--navy)}
.dark .button:active,.dark .button[data-state="active"],.dark .button.primary:active,.dark .button.primary[data-state="active"]{background:var(--blue);border-color:var(--white);color:var(--white)}
.dark .button:focus-visible,.dark .button[data-state="focus"]{outline-color:var(--teal)}

.icon-button{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:44px;min-height:44px;padding:10px;background:var(--white);border:1px solid var(--navy);border-radius:var(--radius);color:var(--navy)}
button.text-link{background:transparent;border:0;padding:8px;text-decoration:underline}
:is(.text-link,.icon-button):hover,:is(.text-link,.icon-button)[data-state="hover"]{color:var(--blue);background:var(--surface)}
:is(.text-link,.icon-button):active,:is(.text-link,.icon-button)[data-state="active"]{color:var(--white);background:var(--navy)}
:is(.text-link,.icon-button):focus-visible,:is(.text-link,.icon-button)[data-state="focus"]{outline:var(--focus-width) solid var(--blue);outline-offset:var(--focus-offset)}
.dark :is(.text-link,.icon-button){color:var(--white);border-color:var(--white);background:transparent}
.dark :is(.text-link,.icon-button):hover,.dark :is(.text-link,.icon-button)[data-state="hover"]{background:var(--white);color:var(--navy)}
.dark :is(.text-link,.icon-button):active,.dark :is(.text-link,.icon-button)[data-state="active"]{background:var(--blue);color:var(--white)}
.dark :is(.text-link,.icon-button):focus-visible,.dark :is(.text-link,.icon-button)[data-state="focus"]{outline-color:var(--teal)}