.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    min-height: 58px;

    padding:
        8px 10px 8px 25px;

    border-radius: 16px;

    font-size: 14px;
    font-weight: var(--font-weight-extrabold);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}


.button-primary {
    background: var(--red);

    color: var(--white);

    box-shadow:
        0 12px 28px rgba(215, 25, 32, 0.22);
}


.button-primary:hover {
    transform:
        translateY(-3px);

    background:
        var(--red-dark);

    box-shadow:
        0 18px 38px rgba(215, 25, 32, 0.28);
}


.button-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        rgba(255, 255, 255, 0.15);

    transition:
        transform var(--transition);
}


.button:hover .button-icon {
    transform:
        translateY(2px);
}

/* Shared roles available to future components without changing current layouts. */
.button-secondary {
    border: 1px solid var(--border-strong);
    background: var(--white);
    color: var(--navy);
}

.button-on-dark {
    border: 1px solid var(--border-on-dark);
    color: var(--text-on-dark);
}

.button-text-action {
    min-height: auto;
    padding: 0;
    border-radius: 0;
    color: var(--navy);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-extrabold);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.button:focus-visible {
    outline-color: var(--brand-red);
}