/* =========================================================
   BUTTONS
   ========================================================= */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    min-height: 48px;
    padding: var(--space-3) var(--space-6);

    border: var(--border-width-thin) solid transparent;
    border-radius: var(--radius-full);

    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);

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

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

.button:active {
    transform: translateY(0);
}


/* Primary */

.button--primary {
    background: var(--color-primary);
    color: #FFFFFF;

    box-shadow: var(--shadow-md);
}

.button--primary:hover {
    box-shadow: var(--glow-primary);
}


/* Secondary */

.button--secondary {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
}

.button--secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}


/* Arrow */

.button__arrow {
    transition: transform var(--transition-fast);
}

.button:hover .button__arrow {
    transform: translateX(3px);
}