/* Buttons
 *
 * Usage: apply .btn + a style modifier to any <button>, <a>, or <div>.
 *
 *   <a class="btn btn--primary" href="#">Label →</a>
 *   <button class="btn btn--primary btn--bright">Label →</button>
 *   <button class="btn btn--secondary">Label →</button>
 *   <div class="btn btn--big" onclick="…">Label →</div>
 *
 * States:
 *   - :hover / :active / :focus-visible are handled automatically
 *   - disabled: use [disabled] on <button>, or .is-disabled / aria-disabled="true" on any element
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-width: 153px;
    min-height: 48px;
    padding: 16px 24px;
    font-family: var(--font-family-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 36px;
    cursor: pointer;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
}

.btn svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.btn:visited {
    color: inherit;
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
    cursor: not-allowed;
    pointer-events: none;
}

/* Neutralize the global `a::after` underline animation from global.css */
.btn::after {
    content: none;
}

/* --- Primary (filled) ----------------------------------------------------- */
.btn--primary {
    background-color: var(--color-vintage-grape-900);
    color: var(--color-alabaster-gray-100);
}

.btn--primary:hover {
    background-color: var(--color-copper-500);
    color: var(--color-alabaster-gray-100);
}

.btn--primary:active {
    background-color: var(--color-copper-700);
    color: var(--color-alabaster-gray-100);
}

.btn--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-vintage-grape-400);
}

.btn--primary:disabled,
.btn--primary[aria-disabled="true"],
.btn--primary.is-disabled {
    background-color: var(--color-vintage-grape-400);
    color: var(--color-vintage-grape-200);
}

.btn--primary.btn--bright {
    background-color: var(--color-alabaster-gray-300);
    color: var(--color-vintage-grape-900);
}

.btn--primary.btn--bright:hover {
    background-color: var(--color-copper-500);
    color: var(--color-alabaster-gray-100);
}

.btn--primary.btn--bright:active {
    background-color: var(--color-copper-700);
    color: var(--color-alabaster-gray-100);
}

/* --- Secondary (outlined) ------------------------------------------------- */
.btn--secondary {
    background-color: transparent;
    color: var(--color-vintage-grape-900);
    border-color: var(--color-vintage-grape-900);
}

.btn--secondary:hover {
    background-color: var(--color-copper-500);
    color: var(--color-alabaster-gray-100);
    border-color: var(--color-copper-500);
}

.btn--secondary:active {
    background-color: var(--color-copper-700);
    color: var(--color-alabaster-gray-100);
    border-color: var(--color-copper-700);
}

.btn--secondary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-vintage-grape-300);
}

.btn--secondary:disabled,
.btn--secondary[aria-disabled="true"],
.btn--secondary.is-disabled {
    color: var(--color-vintage-grape-300);
    border-color: var(--color-vintage-grape-300);
    background-color: transparent;
}

.btn--secondary.btn--bright {
    color: var(--color-alabaster-gray-100);
    border-color: var(--color-alabaster-gray-100);
}

.btn--secondary.btn--bright:hover {
    background-color: var(--color-copper-500);
    color: var(--color-alabaster-gray-100);
    border-color: var(--color-copper-500);
}

.btn--secondary.btn--bright:active {
    background-color: var(--color-copper-700);
    color: var(--color-alabaster-gray-100);
    border-color: var(--color-copper-700);
}

.btn--secondary.btn--bright:disabled,
.btn--secondary.btn--bright[aria-disabled="true"],
.btn--secondary.btn--bright.is-disabled {
    color: var(--color-alabaster-gray-500);
    border-color: var(--color-alabaster-gray-500);
}

/* --- Big ------------------------------------------------------------------ */
.btn--big {
    min-width: 292px;
    min-height: 64px;
    padding: 24px;
    font-size: 16px;
    border-radius: 8px;
    background-color: var(--color-vintage-grape-900);
    color: var(--color-alabaster-gray-100);
}

.btn--big:hover {
    background-color: var(--color-copper-500);
    color: var(--color-alabaster-gray-100);
}

.btn--big:active {
    background-color: var(--color-copper-700);
    color: var(--color-alabaster-gray-100);
}

.btn--big:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-vintage-grape-400);
}

.btn--big:disabled,
.btn--big[aria-disabled="true"],
.btn--big.is-disabled {
    background-color: var(--color-vintage-grape-400);
    color: var(--color-vintage-grape-200);
}