@layer components {
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2xs);
        min-block-size: var(--tap-min);
        padding: var(--space-2xs) var(--space-m);
        border: 1px solid transparent;
        border-radius: var(--radius-none);
        font: inherit;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        transition:
            background-color var(--duration-fast) var(--ease-jab),
            border-color var(--duration-fast) var(--ease-jab),
            translate var(--duration-fast) var(--ease-jab);

        /* Gold is rare: the one primary action on a screen. */
        &[data-variant="primary"] {
            background: var(--color-accent);
            color: var(--color-on-accent);

            &:hover {
                background: var(--color-accent-hover);
                translate: 0 -2px;
            }
        }

        &[data-variant="secondary"] {
            background: transparent;
            border-color: var(--color-border-strong);
            color: var(--color-text);

            &:hover {
                border-color: var(--color-accent);
            }
        }

        &:active {
            translate: 0 0;
        }
    }
}