@property --gradient-button-fill {
    syntax: "<color>";
    inherits: true;
    initial-value: white;
}

:root {
    --clr-neutral-900: hsl(252, 59%, 16%);
    --clr-neutral-800: hsl(257, 35%, 25%);
    --clr-neutral-700: hsl(257, 28%, 35%);
    --clr-neutral-300: hsl(252, 56%, 84%);
    --clr-neutral-200: hsl(252, 56%, 98%);
    --clr-neutral-100: hsl(252, 56%, 100%);
}

.button {
    display: inline-flex;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    padding: 0.5em 1.5em;
    color: var(--text-high-contrast);
    font-weight: 500;
    transition: background-color 250ms;

    border: 4px solid transparent;
    background: linear-gradient(white, white) padding-box;
    background: linear-gradient(-45deg var(--gradient)) border-box;

    &hover,
    &focus-visible {
        color: var(--text-base-inverted);
        background-color: var(--clr-blue);
    }
}