/* BOUTONS GLOBAUX */

.button {
    min-height: 48px;
    padding: 12px 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: var(--gj-font-ui);
    font-weight: 800;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        filter 160ms ease,
        transform 160ms ease;
}

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

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

.button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--gj-primary) 30%, transparent);
    outline-offset: 3px;
}

.button--accent {
    border-color: var(--gj-accent);
    background: var(--gj-accent);
    color: var(--gj-light);
}

.button--accent:hover {
    border-color: color-mix(in srgb, var(--gj-accent) 84%, var(--gj-secondary));
    background: color-mix(in srgb, var(--gj-accent) 84%, var(--gj-secondary));
    color: var(--gj-light);
}

.button--primary {
    border-color: var(--gj-primary);
    background: var(--gj-primary);
    color: var(--gj-light);
}

.button--primary:hover {
    color: var(--gj-light);
    filter: brightness(1.08);
}

.button--secondary {
    border-color: var(--gj-primary);
    background: transparent;
    color: var(--gj-primary);
}

.button--secondary:hover {
    background: color-mix(in srgb, var(--gj-primary) 8%, var(--gj-light));
}

.button--light {
    border-color: var(--gj-light);
    background: var(--gj-light);
    color: var(--gj-secondary);
}

.button--full {
    width: 100%;
}